From 4df8ae4769d1d70ffee269dd21c1c30d30256f08 Mon Sep 17 00:00:00 2001 From: Mathis Date: Thu, 6 Jun 2024 14:09:01 +0200 Subject: [PATCH] feat(components): add theme provider and theme button selector This commit introduces a `ThemeProvider` component and a `ThemeBtnSelector` component. The `ThemeProvider` component applies the current theme to all its children. The `ThemeBtnSelector` component provides a dropdown menu that allows users to select a theme ("light", "dark", or "system"). --- src/components/providers/theme-provider.tsx | 9 +++++ src/components/theme-btn-selector.tsx | 40 +++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 src/components/providers/theme-provider.tsx create mode 100644 src/components/theme-btn-selector.tsx diff --git a/src/components/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx new file mode 100644 index 0000000..6d17554 --- /dev/null +++ b/src/components/providers/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-btn-selector.tsx b/src/components/theme-btn-selector.tsx new file mode 100644 index 0000000..ab82183 --- /dev/null +++ b/src/components/theme-btn-selector.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import {MoonStar, Sun} from "lucide-react"; +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ThemeBtnSelector() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +}