✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured

5 files changed, 124 insertions, 18 deletions

diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx
index 9e5fc69..3c7db2e 100644
--- a/src/app/components/header/header.jsx
+++ b/src/app/components/header/header.jsx
@@ -1,26 +1,43 @@
 import Link from "next/link";

 import styles from "../../page.module.css";

+import { ThemeSwitcher } from "../themeSwitcher";

 

 export default async function Header() {

 	return (

-		<main className={styles.main}>

-			<div className={styles.header}>

-				<div className={styles.left}>

-					<Link

-						href={"/"}

-						style={{ textDecoration: "none", color: "white" }}

-					>

-						<p>Dramalama</p>

-					</Link>

-				</div>

-				<div className={styles.right}>

-					<Link href="/anime">Anime</Link>

-					<Link href="/kdrama">Kdrama</Link>

-					<Link href="/manga">Manga</Link>

-					<Link href="/movies">Movies</Link>

-					<Link href="/web-series">Series</Link>

-				</div>

+		<div className="fixed top-0 w-full flex items-center justify-between z-50  dark:bg-black bg-white">

+			<h4 className="text-teal-400 text-2xl p-2">

+				<Link href={"/"}>Dramalama</Link>

+			</h4>

+			<div

+				className={`mx-2 flex items-center overflow-auto ${styles.ScrollBarAdjuster}`}

+			>

+				<ThemeSwitcher />

+

+				<Link href={"/anime"} className="mx-2 hover:text-sky-400">

+					<p>Anime</p>

+				</Link>

+				<Link href={"/kdrama"} className="mx-2 hover:text-sky-400">

+					<p>Kdrama</p>

+				</Link>

+				<Link

+					href={"/components/workInProgress/"}

+					className="mx-2 hover:text-sky-400"

+				>

+					<p>Manga</p>

+				</Link>

+				<Link

+					href={"/components/workInProgress/"}

+					className="mx-2 hover:text-sky-400"

+				>

+					<p>Series</p>

+				</Link>

+				<Link

+					href={"/components/workInProgress/"}

+					className="mx-2 hover:text-sky-400"

+				>

+					<p>Movies</p>

+				</Link>

 			</div>

-		</main>

+		</div>

 	);

 }

diff --git a/src/app/components/moonIcon.jsx b/src/app/components/moonIcon.jsx
new file mode 100644
index 0000000..6f20a38
--- /dev/null
+++ b/src/app/components/moonIcon.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/src/app/components/sunIcon.jsx b/src/app/components/sunIcon.jsx
new file mode 100644
index 0000000..cc47cfa
--- /dev/null
+++ b/src/app/components/sunIcon.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
diff --git a/src/app/components/themeSwitcher.jsx b/src/app/components/themeSwitcher.jsx
new file mode 100644
index 0000000..995dbbf
--- /dev/null
+++ b/src/app/components/themeSwitcher.jsx
@@ -0,0 +1,43 @@
+// app/components/ThemeSwitcher.tsx
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+import React from "react";
+import { Switch } from "@nextui-org/react";
+import { SunIcon } from "./sunIcon";
+import { MoonIcon } from "./moonIcon";
+
+export function ThemeSwitcher() {
+	const [mounted, setMounted] = useState(false);
+	const { theme, setTheme } = useTheme();
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) return null;
+
+	return (
+		<Switch
+			defaultSelected
+			size="sm"
+			color="secondary"
+			thumbIcon={({ isSelected, className }) =>
+				isSelected ? (
+					<SunIcon className={className} />
+				) : (
+					<MoonIcon className={className} />
+				)
+			}
+			onClick={() => {
+				if (theme === "light") {
+					setTheme("dark");
+				} else {
+					setTheme("light");
+				}
+			}}
+		></Switch>
+	);
+}
diff --git a/src/app/components/workInProgress/page.jsx b/src/app/components/workInProgress/page.jsx
new file mode 100644
index 0000000..0af0a98
--- /dev/null
+++ b/src/app/components/workInProgress/page.jsx
@@ -0,0 +1,12 @@
+const WorkInProgress = async () => {
+	return (
+		<main className="h-screen w-screen flex flex-col items-center justify-center">
+			<p className="text-sky-400 uppercase">
+				This section is undergoing a complete overhaul. Sorry for the
+				inconvenience.
+			</p>
+		</main>
+	);
+};
+
+export default WorkInProgress;