basic pages and styles

src/app/(auth)/forgot-password/page.jsx

@@ -0,0 +1,5 @@
+const ForgotPassword = () => {
+  return <div>Forgot Password Page</div>
+};
+
+export default ForgotPassword;

src/app/(auth)/login/page.jsx

@@ -0,0 +1,5 @@
+const Login = () => {
+  return <div>Login Page</div>
+};
+
+export default Login;

src/app/(auth)/register/page.jsx

@@ -0,0 +1,5 @@
+const Register = () => {
+  return <div>Register Page</div>
+};
+
+export default Register;

src/app/about/page.jsx

@@ -0,0 +1,5 @@
+const About = () => {
+  return <div>About Page</div>
+};
+
+export default About;

src/app/admin/page.jsx

@@ -0,0 +1,5 @@
+const Admin = () => {
+  return <div>Admin Page</div>
+};
+
+export default Admin;

src/app/blog/[slug]/page.jsx

@@ -0,0 +1,5 @@
+const SinglePost = () => {
+    return <div>Single Post Page</div>
+  };
+
+  export default SinglePost;

src/app/blog/page.jsx

@@ -0,0 +1,5 @@
+const Blog = () => {
+    return <div>Blog Page</div>
+  };
+
+  export default Blog;

src/app/contact/page.jsx

@@ -0,0 +1,5 @@
+const Contact = () => {
+    return <div>Contact Page</div>
+  };
+
+  export default Contact;

src/app/error.jsx

@@ -0,0 +1,8 @@
+"use client"
+const Error = () => {
+  return (
+    <div>Error</div>
+  )
+}
+
+export default Error

src/app/loading.jsx

@@ -0,0 +1,7 @@
+const Loading = () => {
+  return (
+    <div>Loading...</div>
+  )
+}
+
+export default Loading

src/app/not-found.jsx

@@ -0,0 +1,13 @@
+import Link from "next/link"
+
+const NotFound = () => {
+  return (
+    <div>
+        <h2>Not Found</h2>
+        <p>This page could not be found</p>
+        <Link href='/'>Go Home</Link>
+    </div>
+  )
+}
+
+export default NotFound

src/components/footer/Footer.jsx

@@ -0,0 +1,7 @@
+const Footer = () => {
+  return (
+    <h2>Footer</h2>
+  )
+}
+
+export default Footer

src/components/navbar/Navbar.jsx

@@ -0,0 +1,15 @@
+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

src/components/navbar/links/Links.jsx

@@ -0,0 +1,32 @@
+import styles from "./links.module.css";
+import NavLink from "./navLink/NavLink";
+
+const Links = () => {
+  const links = [
+    { id: 1, title: "Home", url: "/" },
+    { id: 2, title: "About", url: "/about" },
+    { id: 3, title: "Blog", url: "/blog" },
+    { id: 4, title: "Contact", url: "/contact" },
+  ];
+
+  const session = true;
+  const isAdmin = true;
+
+  return (
+    <div className={styles.links}>
+      {links.map((link) => (
+        <NavLink item={link} key={link.id} />
+      ))}
+      {session ? (
+        <>
+          {isAdmin && <NavLink item={{ title: "Admin", url: "/admin" }} />}
+          <button className={styles.logout}>Logout</button>
+        </>
+      ) : (
+        <NavLink item={{ title: "Login", url: "/login" }} />
+      )}
+    </div>
+  );
+};
+
+export default Links;

src/components/navbar/links/links.module.css

@@ -0,0 +1,10 @@
+.links {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.logout {
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+}

src/components/navbar/links/navLink/navLink.jsx

@@ -0,0 +1,12 @@
+"use client"
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import styles from "./navLink.module.css";
+
+const NavLink = ({ item }) => {
+    const pathName = usePathname();
+  return <Link href={item.url} className={`${styles.container} ${pathName === item.url && styles.active}`}>{item.title}</Link>;
+};
+
+export default NavLink;

src/components/navbar/links/navLink/navLink.module.css

@@ -0,0 +1,14 @@
+.container {
+    min-width: 100px;
+    padding: 10px;
+    border-radius: 20px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: 0.3s;
+    text-align: center;
+}
+
+.active {
+    background-color: var(--text);
+    color: var(--bg);
+}

src/components/navbar/navbar.module.css

@@ -0,0 +1,11 @@
+.container {
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 30px;
+    font-weight: bold;
+}