From 4df8ae4769d1d70ffee269dd21c1c30d30256f08 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
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 <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
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 (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<MoonStar className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme("light")}>
+					Light
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>
+					Dark
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("system")}>
+					System
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}