diff options
| author | real-zephex <[email protected]> | 2024-05-24 22:51:36 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-05-24 22:51:36 +0530 |
| commit | 180c9577f8337991ca71470816333fe8430cd3ca (patch) | |
| tree | 82caa5a920443bcf0db3746c7ecacd968d4fc148 /src/app/components/header | |
| parent | style: minor improvements to the anime cards (diff) | |
| download | dramalama-180c9577f8337991ca71470816333fe8430cd3ca.tar.xz dramalama-180c9577f8337991ca71470816333fe8430cd3ca.zip | |
✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured
Diffstat (limited to 'src/app/components/header')
| -rw-r--r-- | src/app/components/header/header.jsx | 53 |
1 files changed, 35 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>
);
}
|