feat: migrate simple theme switcher component

2025-04-27 05:56:52 +07:00
parent c07c75f23b
commit 10da7d0a16
7 changed files with 79 additions and 1 deletions
@@ -9,6 +9,7 @@ import { cn } from '@imphnen-frontend-service/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import { SimpleThemeToggle } from './simple-theme-toggle';

 export function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
@@ -80,6 +81,7 @@ export function Header() {
        </nav>

        <div className="flex items-center gap-4">
+          <SimpleThemeToggle />
          <Button className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300">
            Gabung Discord
          </Button>
@@ -0,0 +1,42 @@
+'use client';
+
+import {
+  Button,
+  MoonIcon,
+  SunIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function SimpleThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className="focus-visible:ring-0"
+    >
+      {theme === 'dark' ? (
+        <SunIcon className="h-[1.2rem] w-[1.2rem]" />
+      ) : (
+        <MoonIcon className="h-[1.2rem] w-[1.2rem]" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}
@@ -0,0 +1,8 @@
+'use client';
+
+import type { ThemeProviderProps } from 'next-themes';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
@@ -1,6 +1,7 @@
 import { type Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import '../styles/globals.css';
+import { ThemeProvider } from './_components/theme-provider';

 const inter = Inter({ subsets: ['latin'] });

@@ -16,7 +17,16 @@ export default function RootLayout({
 }) {
  return (
    <html lang="id" suppressHydrationWarning>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
    </html>
  );
 }