From abb3b884a590c795bc2bc2658adefa3c16fbd8d5 Mon Sep 17 00:00:00 2001 From: sirin Date: Thu, 29 Aug 2024 08:54:43 +0700 Subject: [PATCH] Add theme provider and toggler --- src/app/layout.tsx | 19 +++++++++++++------ src/components/theme-provider.tsx | 9 +++++++++ src/components/theme-toggle.tsx | 22 ++++++++++++++++------ 3 files changed, 38 insertions(+), 12 deletions(-) create mode 100644 src/components/theme-provider.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a2455c5..d77651a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import { Montserrat } from "next/font/google"; +import { ThemeProvider } from "@/components/theme-provider"; import "@/app/globals.css"; const montserrat = Montserrat({ @@ -15,14 +16,20 @@ export const metadata: Metadata = { description: "B2DVentures is a financial services company.", }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { +interface RootLayoutProps { + children: Readonly; +} + +export default function RootLayout({ children }: RootLayoutProps) { return ( - {children} + + +
+
{children}
+
+ + ); } diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx new file mode 100644 index 0000000..b0ff266 --- /dev/null +++ b/src/components/theme-provider.tsx @@ -0,0 +1,9 @@ +"use client"; + +import * as React from "react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; +import { type ThemeProviderProps } from "next-themes/dist/types"; + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children}; +} diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx index 8c90fbc..3daf624 100644 --- a/src/components/theme-toggle.tsx +++ b/src/components/theme-toggle.tsx @@ -1,9 +1,19 @@ -"use client" +"use client"; -import * as React from "react" -import { ThemeProvider as NextThemesProvider } from "next-themes" -import { type ThemeProviderProps } from "next-themes/dist/types" +import * as React from "react"; +import { Moon, Sun } from "lucide-react"; +import { useTheme } from "next-themes"; -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { - return {children} +import { Button } from "@/components/ui/button"; + +export function ThemeToggle() { + const { setTheme, theme } = useTheme(); + + return ( + + ); }