From df8316094f37f6761fdadd239f2ebcca508de57b Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Sun, 27 Apr 2025 18:09:15 -0300
Subject: [PATCH] feat: add theme toggle component and environment
 configuration for LiveKit integration

---
 .env                                 |  7 +++++
 .gitignore                           |  3 +--
 src/components/ui/mode-toggle.tsx    | 38 ++++++++++++++++++++++++++++
 src/components/ui/theme-provider.tsx |  9 +++++++
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 .env
 create mode 100644 src/components/ui/mode-toggle.tsx
 create mode 100644 src/components/ui/theme-provider.tsx

diff --git a/.env b/.env
new file mode 100644
index 0000000..36542c9
--- /dev/null
+++ b/.env
@@ -0,0 +1,7 @@
+# Public environment variables
+# These variables are exposed to the client-side code   
+# and should not contain any sensitive information.
+
+
+NEXT_PUBLIC_LIVEKIT_URL=https://call.pragmatismo.com.br
+
diff --git a/.gitignore b/.gitignore
index 9812bf1..445726f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,5 +24,4 @@ dist-ssr
 *.sw?
 output.sh
 .next
-ui
-.env
+out
\ No newline at end of file
diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
new file mode 100644
index 0000000..82ce072
--- /dev/null
+++ b/src/components/ui/mode-toggle.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import { Moon, 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 default function ModeToggle() {
+  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" />
+          <Moon 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>
+  )
+}
diff --git a/src/components/ui/theme-provider.tsx b/src/components/ui/theme-provider.tsx
new file mode 100644
index 0000000..36dec3a
--- /dev/null
+++ b/src/components/ui/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";
+  
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}