safak · DilshanGDT · May 27, 2024 · May 27, 2024 · May 28, 2024 · May 28, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/node": "20.12.12",
+    "@types/react": "18.3.3",
     "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "eslint-config-next": "14.0.4",
+    "tailwindcss": "^3.4.3"
   }
 }
diff --git a/src/app/(auth)/login/page.jsx b/src/app/(auth)/login/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const LoginPage = () => {
+  return (
+    <div>LoginPage</div>
+  )
+}
+
+export default LoginPage
diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AboutPage = () => {
+  return (
+    <div>AboutPage</div>
+  )
+}
+
+export default AboutPage
diff --git a/src/app/admin/page.jsx b/src/app/admin/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AdminPage = () => {
+  return (
+    <div>AdminPage</div>
+  )
+}
+
+export default AdminPage
diff --git a/src/app/blog/[slug]/page.jsx b/src/app/blog/[slug]/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SingelPostPage = () => {
+  return (
+    <div>SingelPostPage</div>
+  )
+}
+
+export default SingelPostPage
diff --git a/src/app/blog/page.jsx b/src/app/blog/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const BlogPage = () => {
+  return (
+    <div>BlogPage</div>
+  )
+}
+
+export default BlogPage
diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ContactPage = () => {
+  return (
+    <div>ContactPage</div>
+  )
+}
+
+export default ContactPage
diff --git a/src/app/error.jsx b/src/app/error.jsx
@@ -0,0 +1,12 @@
+"use client"
+"use modules"
+
+// use to indicate an error if something wen wrong
+
+const Error = () => {
+  return (
+    <div>Error</div>
+  )
+}
+
+export default Error
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -0,0 +1,36 @@
+
+:root {
+    --bg: #0d0c22;
+    --bgSoft: #2d2b42;
+    --text: white;
+    --textSoft: #e5e5e5;
+    --btn: #3673fd;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.container {
+    /*background-color: rebeccapurple;*/
+    width: 1300px;
+    margin: auto;
+    padding: 0 50px 0 50px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    flex-direction: column;
+    justify-content: space-between;
+} 
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,5 +1,7 @@
 import { Inter } from 'next/font/google'
 import './globals.css'
+import Navbar from '@/components/navbar/navbar'
+import Footer from '@/components/footer/Footer'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -11,7 +13,13 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <div className='container'>
+          <Navbar />
+          {children}
+          <Footer />
+        </div>
+      </body>
     </html>
   )
 }
diff --git a/src/app/loading.jsx b/src/app/loading.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+// use to make a loading screen between pages
+
+const Loading = () => {
+  return (
+    <div>Loading</div>
+  )
+}
+
+export default Loading
diff --git a/src/app/not-found.jsx b/src/app/not-found.jsx
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+import React from 'react'
+
+const NotFound = () => {
+  return (
+    <div>
+        <h2>Page Not Found</h2>
+        <p>Sorry, the page you are looking for does not exist.</p>
+        <Link href="/">Return Home</Link>
+    </div>
+  )
+}
+
+export default NotFound
diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -1,5 +1,5 @@
 const Home = () => {
-  return <div>Hello World!</div>;
+  return <div>Hello Page</div>;
 };
 
 export default Home;
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Links from './links/Links'
+import styles from './navbar.module.css'
+
+const Navbar = () => {
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.logo}>Logo</div>
+      <div>
+        <Links />
+      </div>
+    </div>
+  )
+}
+
+export default Navbar
diff --git a/src/components/navbar/links/Links.jsx b/src/components/navbar/links/Links.jsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import Link from "next/link"
+import styles from "./links.module.css"
+import  "./navLink/NavLink.jsx"
+import NavLink from './navLink/NavLink.jsx'
+
+const Links = () => {
+
+    const links = [
+        {
+            titles: "Homepage",
+            path: "/",
+        },
+        {
+            titles: "About",
+            path: "/about",
+        },
+        {
+            titles: "Contact",
+            path: "/contact",
+        },
+        {
+            titles: "Blog",
+            path: "/blog",
+        },
+    ];
+
+    // Temporary
+    const session = true
+    const isAdmin = true
+
+  return (
+    <div className={styles.links}>
+        {links.map((link => (
+            <NavLink item={link} key={link.titles} />
+        )))} 
+        {session ? (
+            <>
+                {isAdmin && <NavLink item={{title:"Login", path:"/login"}} />}
+                <button>Logout</button>
+            </>
+        ) : (
+            <NavLink item={{title:"Login", path:"/login"}} />
+        )}
+    </div>
+  )
+}
+
+export default Links
diff --git a/src/components/navbar/links/links.module.css b/src/components/navbar/links/links.module.css
@@ -0,0 +1,6 @@
+
+.links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
diff --git a/src/components/navbar/links/navLink/NavLink.jsx b/src/components/navbar/links/navLink/NavLink.jsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { usePathname } from "next/navigation"
+import styles from "./navLink.module.css"
+import Link from "next/link"
+
+
+const NavLink = ({item}) => {
+
+  const pathName = usePathname();
+
+  return (
+    <Link href={item.path} className={`${styles.container} ${pathName === item.path && styles.active}`}>
+            {item.titles} 
+    </Link>)
+}
+
+export default NavLink
diff --git a/src/components/navbar/links/navLink/navLink.module.css b/src/components/navbar/links/navLink/navLink.module.css
@@ -0,0 +1,13 @@
+
+.container {
+    min-width: 100px;
+    padding: 10px;
+    border-radius: 20px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.active {
+    background-color: var(--text);
+    color: var(--bg);
+}
diff --git a/src/components/navbar/navbar.module.css b/src/components/navbar/navbar.module.css
@@ -0,0 +1,12 @@
+
+.container {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    font-size: 30px;
+    font-weight: bold;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,ts,jsx,tsx}",
+  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+  "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
+export default Config;