diff --git a/package.json b/package.json index 11062eba7..81f6e857c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "eslint": "8.48.0", "eslint-config-next": "13.4.19", "next": "13.4.19", + "next-auth": "^4.24.5", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-quill": "^2.0.0" } } diff --git a/prisma/schema.prisma b/prisma/schema.prisma new file mode 100644 index 000000000..ea9160b45 --- /dev/null +++ b/prisma/schema.prisma @@ -0,0 +1,91 @@ +// This is your Prisma schema file, +// learn more about it in the docs: https://pris.ly/d/prisma-schema + +generator client { + provider = "prisma-client-js" +} + +datasource db { + provider = "mongodb" + url = env("DATABASE_URL") +} + +model Account { + id String @id @default(cuid()) @map("_id") + userId String + type String + provider String + providerAccountId String + refresh_token String? + access_token String? + expires_at Int? + token_type String? + scope String? + id_token String? + session_state String? + + user User @relation(fields: [userId], references: [id], onDelete: Cascade) + + @@unique([provider, providerAccountId]) +} + +model Session { + id String @id @default(cuid()) @map("_id") + sessionToken String @unique + userId String + expires DateTime + user User @relation(fields: [userId], references: [id], onDelete: Cascade) +} + +model User { + id String @id @default(cuid()) @map("_id") + name String? + email String @unique + emailVerified DateTime? + image String? + accounts Account[] + sessions Session[] + Post Post[] + Comment Comment[] +} + +model VerificationToken { + identifier String @id @map("_id") + token String @unique + expires DateTime + + @@unique([identifier, token]) +} + +model Category { + id String @id @default(cuid()) @map("_id") + slug String @unique + title String + img String? + Posts Post[] +} + +model Post { + id String @id @default(cuid()) @map("_id") + createdAt DateTime @default(now()) + slug String @unique + title String + desc String + img String? + views Int @default(0) + catSlug String + cat Category @relation(fields: [catSlug], references: [slug]) + userEmail String + user User @relation(fields: [userEmail], references: [email]) + comments Comment[] +} + +model Comment { + id String @id @default(cuid()) @map("_id") + createdAt DateTime @default(now()) + desc String + userEmail String + user User @relation(fields: [userEmail], references: [email]) + postSlug String + post Post @relation(fields: [postSlug], references: [slug]) +} \ No newline at end of file diff --git a/public/external.png b/public/external.png new file mode 100644 index 000000000..a244b5dd8 Binary files /dev/null and b/public/external.png differ diff --git a/public/image.png b/public/image.png new file mode 100644 index 000000000..b9245be00 Binary files /dev/null and b/public/image.png differ diff --git a/public/plus.png b/public/plus.png new file mode 100644 index 000000000..19c093a76 Binary files /dev/null and b/public/plus.png differ diff --git a/public/video.png b/public/video.png new file mode 100644 index 000000000..f0d8b431e Binary files /dev/null and b/public/video.png differ diff --git a/src/app/[slug]/page.jsx b/src/app/[slug]/page.jsx new file mode 100644 index 000000000..7b00d142e --- /dev/null +++ b/src/app/[slug]/page.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import styles from './singlePage.module.css'; +import Menu from '@/components/Menu/Menu'; +import Image from 'next/image'; +import Comments from '@/components/comments/Comments'; +const singlePage = () => { + return ( +
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ +
+ +
+ Abhishek + 12.08.2023 +
+
+
+
+ +
+
+
+
+
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, + magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat + adipisci ut corporis sint quidem inventore, soluta animi beatae + ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores + aperiam, deleniti laboriosam veritatis Lorem +

+ +

Lorem ipsum dolor sit amet consectetur.

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, + magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat + adipisci ut corporis sint quidem inventore, soluta animi beatae + ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores + aperiam, deleniti laboriosam veritatis Lorem +

+

Lorem ipsum dolor sit amet consectetur.

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, + magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat + adipisci ut corporis sint quidem inventore, soluta animi beatae + ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores + aperiam, deleniti laboriosam veritatis Lorem +

+

Lorem ipsum dolor sit amet consectetur.

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, + magnam fugiat. Natus eaque harum ex at cum aperiam atque fugiat + adipisci ut corporis sint quidem inventore, soluta animi beatae + ipsam nam omnis ullam odit, non culpa sed? Rem quae asperiores + aperiam, deleniti laboriosam veritatis Lorem +

+
+
+ + +
+
+ +
+ +
+ ); +}; + +export default singlePage; diff --git a/src/app/[slug]/singlePage.module.css b/src/app/[slug]/singlePage.module.css new file mode 100644 index 000000000..8878f8737 --- /dev/null +++ b/src/app/[slug]/singlePage.module.css @@ -0,0 +1,95 @@ +.infoContainer { + display: flex; + align-items: center; + gap: 50px; +} + +.textContainer { + flex: 1; +} + +.title { + font-size: 64px; + margin-bottom: 50px; +} + +.user { + display: flex; + + align-items: center; + gap: 40px; +} + +.userImageContainer { + width: 50px; + height: 50px; + position: relative; +} + +.avatar { + border-radius: 50%; + object-fit: cover; +} + +.userTextContainer { + display: flex; + flex-direction: column; + gap: 5px; + color: var(--softTextColor); +} + +.username { + font-size: 20px; + font-weight: 500; +} + +.imageContainer { + flex: 1; + height: 350px; + position: relative; +} + +.image { + object-fit: cover; +} + +.content { + display: flex; + gap: 50px; +} + +.post { + flex: 5; + margin-top: 60px; +} + +.description p { + font-size: 20px; + font-weight: 300; + margin-bottom: 20px; +} + +@media screen and (max-width: 1536px) { + .title { + font-size: 54px; + } +} +@media screen and (max-width: 1280px) { + .title { + font-size: 48px; + } +} +@media screen and (max-width: 1024px) { + .imageContainer { + display: none; + } +} +@media screen and (max-width: 640px) { + .title { + font-size: 36px; + } + + .description p { + font-size: 18px; + } +} diff --git a/src/app/api/auth/[...nextauth]/route.js b/src/app/api/auth/[...nextauth]/route.js new file mode 100644 index 000000000..35abae1bc --- /dev/null +++ b/src/app/api/auth/[...nextauth]/route.js @@ -0,0 +1,6 @@ +import { authOptions } from '@/utils/auth'; +import NextAuth from 'next-auth'; + +const handler = NextAuth(authOptions); + +export { handler as GET, handler as POST }; diff --git a/src/app/globals.css b/src/app/globals.css index e69de29bb..315274904 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -0,0 +1,78 @@ +:root { + --bg: white; + --textColor: black; + --softBg: #f0f0f0; + --softTextColor: #626262; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + max-width: 100vw; + overflow-x: hidden; +} + +a { + color: inherit; + text-decoration: none; +} +.dark { + --bg: #0f172a; + --textColor: #ddd; + --softBg: #1f273a; + --softTextColor: a6a6a6; +} + +.container { + min-height: 100vh; + background-color: var(--bg); + color: var(--textColor); +} + +.wrapper { + max-width: 1536px; + margin-left: auto; + margin-right: auto; + + padding-left: 80px; + padding-right: 80px; +} +.ql-container { + font-size: 28px !important; +} + +.quill > .ql-container > .ql-editor.ql-blank::before { + color: #b3b3b1; +} + +@media screen and (max-width: 1536px) { + .wrapper { + max-width: 1366px; + } +} +@media screen and (max-width: 1280px) { + .wrapper { + max-width: 1024px; + } +} +@media screen and (max-width: 1024px) { + .wrapper { + max-width: 768px; + padding-left: 40px; + padding-right: 40px; + } +} +@media screen and (max-width: 768px) { + .wrapper { + max-width: 640px; + } +} +@media screen and (max-width: 640px) { + .wrapper { + max-width: 475px; + } +} diff --git a/src/app/homepage.module.css b/src/app/homepage.module.css index e69de29bb..0f7aef53a 100644 --- a/src/app/homepage.module.css +++ b/src/app/homepage.module.css @@ -0,0 +1,4 @@ +.container{ + display: flex; + gap: 50; +} \ No newline at end of file diff --git a/src/app/layout.js b/src/app/layout.js index 507fb0619..e099516f1 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,17 +1,36 @@ -import './globals.css' -import { Inter } from 'next/font/google' +import './globals.css'; +import { Inter } from 'next/font/google'; +import Navbar from '@/components/Navbar/Navbar'; +import Footer from '@/components/Footer/Footer'; +import { ThemeContextProvider } from '@/context/ThemeContext'; +import ThemeProvider from '@/providers/ThemeProvider'; +import AuthProvider from '@/providers/AuthProvider'; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ['latin'] }); export const metadata = { - title: 'Blog App', + title: 'Abedium', description: 'The best blog app!', -} +}; export default function RootLayout({ children }) { return ( - {children} + + + + +
+
+ + {children} +
+
+ + + + - ) + ); } diff --git a/src/app/login/login.module.css b/src/app/login/login.module.css new file mode 100644 index 000000000..3b5ae5710 --- /dev/null +++ b/src/app/login/login.module.css @@ -0,0 +1,55 @@ +.container { + display: flex; + align-items: center; + justify-content: center; + margin-top: 60px; + } + + .wrapper { + background-color: var(--softBg); + padding: 150px 200px; + display: flex; + flex-direction: column; + gap: 50px; + border-radius: 10px; + } + + .socialButton { + padding: 20px; + border-radius: 5px; + border: none; + color: white; + font-weight: bold; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + + .socialButton:first-child { + background-color: #ff5555; + } + + .socialButton:nth-child(2) { + background-color: #111; + } + + .socialButton:nth-child(3) { + background-color: #087bea; + } + + @media screen and (max-width: 768px) { + .wrapper { + padding: 50px 100px; + } + } + @media screen and (max-width: 640px) { + .wrapper { + padding: 30px; + } + + .socialButton{ + font-weight: 400; + font-size: 14px; + } + } \ No newline at end of file diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx new file mode 100644 index 000000000..b9f1684e3 --- /dev/null +++ b/src/app/login/page.jsx @@ -0,0 +1,32 @@ +'use client'; + +import React from 'react'; +import styles from './login.module.css'; +import { signIn, useSession } from 'next-auth/react'; +import { useRouter } from 'next/navigation'; + +const LoginPage = () => { + const { data, status } = useSession(); + + const router = useRouter(); + if (status === 'loading') { + return
Loading...
; + } + if (status === 'authenticated') { + router.push('/'); + } + + return ( +
+
+
signIn('google')}> + Sign in With Google +
+
Sign in with Github
+
Sign in with Facebook
+
+
+ ); +}; + +export default LoginPage; diff --git a/src/app/page.jsx b/src/app/page.jsx index 02e8e8b92..99dc082c6 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,5 +1,19 @@ -import styles from "./homepage.module.css"; +import Link from 'next/link'; +import styles from './homepage.module.css'; +import Featured from '@/components/Featured/Featured'; +import CategoryList from '@/components/CategoryList/CategoryList'; +import CardList from '@/components/CardList/CardList'; +import Menu from '@/components/Menu/Menu'; export default function Home() { - return
Hello
; + return ( +
+ + +
+ + +
+
+ ); } diff --git a/src/app/write/page.jsx b/src/app/write/page.jsx new file mode 100644 index 000000000..3d1a3a5b7 --- /dev/null +++ b/src/app/write/page.jsx @@ -0,0 +1,50 @@ +'use client'; + +import React, { useState } from 'react'; +import styles from './writePage.module.css'; +import ReactQuill from 'react-quill'; +import Image from 'next/image'; +import 'react-quill/dist/quill.bubble.css'; + +const WritePage = () => { + const [open, setOpen] = useState(false); + const [value, setValue] = useState(''); + return ( +
+ +
+ + {open && ( +
+ + + +
+ )} + +
+ +
+ ); +}; + +export default WritePage; diff --git a/src/app/write/writePage.module.css b/src/app/write/writePage.module.css new file mode 100644 index 000000000..428c43aeb --- /dev/null +++ b/src/app/write/writePage.module.css @@ -0,0 +1,76 @@ +.container{ + position: relative; + display: flex; + flex-direction: column; + } + + .select{ + margin-bottom: 50px; + padding: 10px 20px; + margin-left: 50px; + width: max-content; + } + + .editor { + display: flex; + gap: 20px; + height: 700px; + position: relative; + + } + + .button, + .addButton { + width: 36px; + height: 36px; + border-radius: 50%; + background-color: transparent; + border: 1px solid var(--textColor); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + + .addButton { + border-color: #1a8917; + } + + .add { + display: flex; + gap: 20px; + background-color: var(--bg); + position: absolute; + z-index: 999; + width: 100%; + left: 50px; + } + + .input{ + padding: 50px; + font-size: 64px; + border: none; + outline: none; + background-color: transparent; + color: var(--textColor); + } + + .input::placeholder{ + color: #b3b3b1; + } + + .textArea { + width: 100%; + } + + .publish{ + position: absolute; + top: 0px; + right: 0px; + padding: 10px 20px; + border: none; + background-color: #1a8917; + color: white; + cursor: pointer; + border-radius: 20px; + } \ No newline at end of file diff --git a/src/components/CardList/CardList.jsx b/src/components/CardList/CardList.jsx new file mode 100644 index 000000000..2a47a8317 --- /dev/null +++ b/src/components/CardList/CardList.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import styles from './cardList.module.css'; +import Pagination from '../Pagination/Pagination'; +import Image from 'next/image'; +import Card from '../card/Card'; + +const CardList = () => { + return ( +
+

Recent Posts

+
+
+ + + + +
+
+
+ +
+
+ ); +}; + +export default CardList; diff --git a/src/components/CardList/cardList.module.css b/src/components/CardList/cardList.module.css new file mode 100644 index 000000000..3f54b847f --- /dev/null +++ b/src/components/CardList/cardList.module.css @@ -0,0 +1,7 @@ +.container{ + flex:5 + } + + .title{ + margin: 50px 0px; + } \ No newline at end of file diff --git a/src/components/CategoryList/CategoryList.jsx b/src/components/CategoryList/CategoryList.jsx new file mode 100644 index 000000000..2e6f5afb5 --- /dev/null +++ b/src/components/CategoryList/CategoryList.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import styles from './categoryList.module.css'; +import Image from 'next/image'; +import Link from 'next/link'; + +const CategoryList = () => { + return ( +
+

Popular Categories

+
+ + + + + style + + + + Travel + + + + Culture + + + + fashion + + + + culture + +
+
+ ); +}; + +export default CategoryList; diff --git a/src/components/CategoryList/categoryList.module.css b/src/components/CategoryList/categoryList.module.css new file mode 100644 index 000000000..35b8244f5 --- /dev/null +++ b/src/components/CategoryList/categoryList.module.css @@ -0,0 +1,73 @@ +.container { +} + +.title { + margin: 50px 0px; +} + +.categories { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 20px; +} + +.category { + display: flex; + align-items: center; + gap: 10px; + text-transform: capitalize; + width: 15%; + height: 80px; + justify-content: center; + border-radius: 10px; +} + +.category.style { + background-color: #57c4ff31; +} + +.category.fashion { + background-color: #da85c731; +} + +.category.food { + background-color: #7fb88133; +} + +.category.travel { + background-color: #ff795736; +} + +.category.culture { + background-color: #ffb04f45; +} + +.category.coding { + background-color: #5e4fff31; +} + +.image { + border-radius: 50%; +} + +@media screen and (max-width: 1280px) { + .category { + width: 20%; + } +} +@media screen and (max-width: 1024px) { + .category { + width: 25%; + } +} +@media screen and (max-width: 768px) { + .category { + width: 45%; + } +} +@media screen and (max-width: 640px) { + .category { + width: 100%; + } +} diff --git a/src/components/Featured/Featured.jsx b/src/components/Featured/Featured.jsx new file mode 100644 index 000000000..125accaa2 --- /dev/null +++ b/src/components/Featured/Featured.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import styles from './featured.module.css'; +import Image from 'next/image'; + +const Featured = () => { + return ( +
+

+ Hey, Abhishek here! Discover my stories and creative ideas. +

+
+
+ +
+
+

+ Lorem ipsum dolor sit amet alim consectetur adipisicing elit. +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Cupiditate, quam nisi magni ea laborum inventore voluptatum + laudantium repellat ducimus unde aspernatur fuga. Quo, accusantium + quisquam! Harum unde sit culpa debitis. +

+ +
+
+
+ ); +}; + +export default Featured; diff --git a/src/components/Featured/featured.module.css b/src/components/Featured/featured.module.css new file mode 100644 index 000000000..c1743b46a --- /dev/null +++ b/src/components/Featured/featured.module.css @@ -0,0 +1,77 @@ +.container { + margin-top: 30px; + } + + .title { + font-size: 78px; + font-weight: 300; + } + + .post { + margin-top: 60px; + display: flex; + align-items: center; + gap: 50px; + } + + .imgContainer { + flex: 1; + height: 500px; + position: relative; + } + + .image { + object-fit: cover; + } + + .textContainer { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + } + + .postTitle { + font-size: 40px; + } + + .postDesc { + font-size: 20px; + font-weight: 300; + color: var(--softTextColor); + } + + .button { + padding: 16px 20px; + border: none; + border-radius: 5px; + width: max-content; + } + + @media screen and (max-width: 1280px) { + .title { + font-size: 72px; + } + } + + @media screen and (max-width: 1024px) { + .title { + font-size: 64px; + } + + .imgContainer { + display: none; + } + } + + @media screen and (max-width: 768px) { + .title { + font-size: 48px; + } + } + + @media screen and (max-width: 640px) { + .title { + font-size: 36px; + } + } \ No newline at end of file diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx new file mode 100644 index 000000000..0d6d04b24 --- /dev/null +++ b/src/components/Footer/Footer.jsx @@ -0,0 +1,54 @@ +import React from "react"; +import styles from "./footer.module.css"; +import Image from "next/image"; +import Link from "next/link"; + +const Footer = () => { + return ( +
+
+
+ lama blog +

Abhidium

+
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim + necessitatibus similique aspernatur obcaecati veritatis. Aperiam cum + porro sequi, totam minima consequuntur, aspernatur deleniti vero + repellendus dorales. +

+
+ + + + +
+
+
+
+ Links + Homepage + Blog + About + Contact +
+
+ Tags + Style + Fashion + Coding + Travel +
+
+ Social + Facebook + Instagram + Tiktok + Youtube +
+
+
+ ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/components/Footer/footer.module.css b/src/components/Footer/footer.module.css new file mode 100644 index 000000000..0c6d886e9 --- /dev/null +++ b/src/components/Footer/footer.module.css @@ -0,0 +1,75 @@ +.container { + margin-top: 50px; + padding: 20px 0px; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--softTextColor); + } + + .info { + flex: 1; + display: flex; + flex-direction: column; + gap: 14px; + } + + .logo { + display: flex; + align-items: center; + gap: 10px; + } + + .logoText { + font-size: 24px; + } + + .desc { + font-weight: 300; + } + + .icons { + margin-top: 10px; + display: flex; + gap: 10px; + } + + .links { + flex: 1; + display: flex; + justify-content: flex-end; + gap: 100px; + } + + .list { + display: flex; + flex-direction: column; + gap: 10px; + font-weight: 300; + } + + .listTitle { + font-weight: bold; + } + + @media screen and (max-width: 1024px) { + .links { + gap: 50px; + } + } + @media screen and (max-width: 768px) { + .container { + flex-direction: column; + gap: 50px; + } + + .links { + width: 100%; + justify-content: space-between; + } + } + @media screen and (max-width: 640px) { + .links { + font-size: 14px; + } + } \ No newline at end of file diff --git a/src/components/Menu/Menu.jsx b/src/components/Menu/Menu.jsx new file mode 100644 index 000000000..04061fff1 --- /dev/null +++ b/src/components/Menu/Menu.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import styles from './menu.module.css'; +import Link from 'next/link'; +import Image from 'next/image'; +import MenuPost from '../menuPosts/MenuPosts'; +import CategoryList from '../CategoryList/CategoryList'; +import MenuCategories from '../menuCategory.jsx/MenuCategories'; + +const Menu = () => { + return ( +
+

{"What's hot"}

+

Most Popular

+ + +

{'Discover By Topics'}

+

Category

+ + + +

{'Choosen By the Editor'}

+

Editorial Best

+ +
+ ); +}; + +export default Menu; diff --git a/src/components/Menu/menu.module.css b/src/components/Menu/menu.module.css new file mode 100644 index 000000000..10404d145 --- /dev/null +++ b/src/components/Menu/menu.module.css @@ -0,0 +1,20 @@ +.container { + flex: 2; + margin-top: 60px; +} + +.subtitle { + color: gray; + font-size: 16px; + font-weight: 400; +} +.title { + font-size: 28px; +} + + +@media screen and (max-width: 1024px) { + .container { + display: none; + } +} \ No newline at end of file diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx new file mode 100644 index 000000000..873bf3d87 --- /dev/null +++ b/src/components/Navbar/Navbar.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import styles from './navbar.module.css'; +import Image from 'next/image'; +import Link from 'next/link'; +import AuthLinks from '../authLinks/AuthLinks'; +import ThemeToggle from '../themeToggle/ThemeToggle'; + +const Navbar = () => { + return ( +
+
+ facebook + facebook + facebook + facebook +
+ +
Abhidium
+ +
+ + + Homepage + + + Contact + + + About + + +
+
+ ); +}; + +export default Navbar; diff --git a/src/components/Navbar/navbar.module.css b/src/components/Navbar/navbar.module.css new file mode 100644 index 000000000..cf9826b4f --- /dev/null +++ b/src/components/Navbar/navbar.module.css @@ -0,0 +1,58 @@ +.container { + display: flex; + align-items: center; + justify-content: space-between; + height: 100px; +} + +.social { + display: flex; + gap: 10px; + flex: 1; +} + +.logo { + flex: 1; + text-align: center; + font-size: 36px; + font-weight: bold; +} + +.links { + display: flex; + align-items: center; + gap: 20px; + flex: 1; + font-size: 20px; +} + +@media screen and (max-width: 1280px) { + .logo { + font-size: 32px; + } + .links { + font-size: 18px; + gap: 15px; + } +} +@media screen and (max-width: 1024px) { + .social { + display: none; + } + .logo { + text-align: left; + } +} +@media screen and (max-width: 768px) { + .logo { + font-size: 24px; + } +} +@media screen and (max-width: 640px) { + .links{ + justify-content: flex-end; + } + .link { + display: none; + } +} \ No newline at end of file diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx new file mode 100644 index 000000000..69b4ba938 --- /dev/null +++ b/src/components/Pagination/Pagination.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './pagination.module.css'; + +const Pagination = () => { + return ( +
+ + +
+ ); +}; + +export default Pagination; diff --git a/src/components/Pagination/pagination.module.css b/src/components/Pagination/pagination.module.css new file mode 100644 index 000000000..690b8a470 --- /dev/null +++ b/src/components/Pagination/pagination.module.css @@ -0,0 +1,15 @@ +.container{ + display: flex; + justify-content: space-between; + + +} + +.button{ + width: 100px; + border: none; + padding: 16px; + background-color: crimson; + color: white; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/authLinks/AuthLinks.jsx b/src/components/authLinks/AuthLinks.jsx new file mode 100644 index 000000000..8c55f690b --- /dev/null +++ b/src/components/authLinks/AuthLinks.jsx @@ -0,0 +1,50 @@ +'use client'; +import Link from 'next/link'; +import React, { useState } from 'react'; +import styles from './authLinks.module.css'; +import { signOut } from 'next-auth/react'; + +const AuthLinks = () => { + const [open, setOpen] = useState(false); + const status = 'notAuthenticated'; // Make sure the case matches + + return ( + <> + {status !== 'notAuthenticated' ? ( + + Login + + ) : ( + <> + + Write + + + Logout + + )} +
setOpen(!open)}> +
+
+
+
+ {open && ( +
+ Homepage + About + Contact + {status !== 'notAuthenticated' ? ( + Login + ) : ( + <> + Write + Logout + + )} +
+ )} + + ); +}; + +export default AuthLinks; diff --git a/src/components/authLinks/authLinks.module.css b/src/components/authLinks/authLinks.module.css new file mode 100644 index 000000000..9a3773397 --- /dev/null +++ b/src/components/authLinks/authLinks.module.css @@ -0,0 +1,44 @@ +.link { + cursor: pointer; +} + +.burger { + width: 20px; + height: 16px; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + display: none; +} + +.line { + width: 100%; + height: 2px; + background-color: var(--textColor); +} + +.responsiveMenu{ + position: absolute; + top: 100px; + left: 0; + background-color: var(--bg); + height: calc(100vh - 100px); + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 50px; + font-size: 36px; + z-index: 999; +} + +@media screen and (max-width: 640px) { + .burger { + display: flex; + } + + .link{ + display: none; + } +} \ No newline at end of file diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx new file mode 100644 index 000000000..914d38ef3 --- /dev/null +++ b/src/components/card/Card.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import styles from './card.module.css'; +import Image from 'next/image'; +import Link from 'next/link'; +const Card = () => { + return ( +
+
+ +
+
+
+ CULTURE + 11.02.2023 +
+ +

Lorem ipsum dolor sit amet.

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum magnam + minus cupiditate quia quaerat aperiam. Veritatis laboriosam architecto + animi dignissimos labore officiis? +

+ Read More +
+
+ ); +}; + +export default Card; diff --git a/src/components/card/card.module.css b/src/components/card/card.module.css new file mode 100644 index 000000000..0036c3913 --- /dev/null +++ b/src/components/card/card.module.css @@ -0,0 +1,55 @@ +.container { + margin-bottom: 50px; + display: flex; + align-items: center; + gap: 50px; +} + +.imageContainer { + flex: 1; + height: 350px; + position: relative; +} + +.image { + object-fit: cover; +} + +.textContainer { + flex: 1; + display: flex; + flex-direction: column; + gap: 30px; +} + +.date { + color: gray; +} + +.category { + color: crimson; + font-weight: 500; + +} + +.desc { + font-size: 18px; + font-weight: 300; + color: var(--softTextColor); +} + +.link { + border-bottom: 1px solid crimson; + width: max-content; + padding: 2px 0px; +} +.detail{ + display: flex; + justify-content: space-around; +} + +@media screen and (max-width: 1280px) { + .imageContainer { + display: none; + } +} diff --git a/src/components/comments/Comments.jsx b/src/components/comments/Comments.jsx new file mode 100644 index 000000000..41850571b --- /dev/null +++ b/src/components/comments/Comments.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import styles from './comments.module.css'; +import Link from 'next/link'; +import Image from 'next/image'; + +const Comments = () => { + const status = 'authenticated'; + return ( +
+

Comments

+ {status === 'authenticated' ? ( +
+