From 180c9577f8337991ca71470816333fe8430cd3ca Mon Sep 17 00:00:00 2001 From: real-zephex Date: Fri, 24 May 2024 22:51:36 +0530 Subject: =?UTF-8?q?=E2=9C=A8=20feat(ui):=20=F0=9F=8E=A8=20migrate=20from?= =?UTF-8?q?=20vanilla=20css=20to=20tailwind=20css,=20adopted=20next=20ui?= =?UTF-8?q?=20and=20restructured?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/header/header.jsx | 53 ++++++++++++++++++++---------- src/app/components/moonIcon.jsx | 17 ++++++++++ src/app/components/sunIcon.jsx | 17 ++++++++++ src/app/components/themeSwitcher.jsx | 43 ++++++++++++++++++++++++ src/app/components/workInProgress/page.jsx | 12 +++++++ 5 files changed, 124 insertions(+), 18 deletions(-) create mode 100644 src/app/components/moonIcon.jsx create mode 100644 src/app/components/sunIcon.jsx create mode 100644 src/app/components/themeSwitcher.jsx create mode 100644 src/app/components/workInProgress/page.jsx (limited to 'src/app/components') 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 ( -
-
-
- -

Dramalama

- -
-
- Anime - Kdrama - Manga - Movies - Series -
+
+

+ Dramalama +

+
+ + + +

Anime

+ + +

Kdrama

+ + +

Manga

+ + +

Series

+ + +

Movies

+
-
+ ); } 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) => ( + +); 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) => ( + +); 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 ( + + isSelected ? ( + + ) : ( + + ) + } + onClick={() => { + if (theme === "light") { + setTheme("dark"); + } else { + setTheme("light"); + } + }} + > + ); +} 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 ( +
+

+ This section is undergoing a complete overhaul. Sorry for the + inconvenience. +

+
+ ); +}; + +export default WorkInProgress; -- cgit v1.2.3