Added light / dark mode toggle

LucDeCaf · Jan 16, 2024 · 4a7b0ac · 4a7b0ac
1 parent 01aecd2
commit 4a7b0ac
Show file tree

Hide file tree

Showing 5 changed files with 377 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import type { Options } from "@/lib/utils";
 import { Quota, VALID_DAYS_REVERSED } from "@/lib/utils";
 import { nanoid } from "nanoid";
 import { useEffect, useState } from "react";
+import { ModeToggle } from "@/components/mode-toggle";
 
 function App() {
     const [quotas, setQuotas] = useState<Quota[]>([]);
@@ -125,57 +126,58 @@ function App() {
                     <h2 className="text-2xl">Stats</h2>
                     <ul className="flex flex-col text-xl list-inside list-['-']">
                         <li>&nbsp;Total On Ship:&nbsp;&nbsp; {totalOnShip}</li>
-                        <li>&nbsp;Total Sold: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{totalSold}</li>
+                        <li>
+                            &nbsp;Total Sold: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            {totalSold}
+                        </li>
                         <li>&nbsp;Total Collected: {totalCollected}</li>
-                        <li>&nbsp;Average Per Day: {averagePerDay.toFixed(2)}</li>
+                        <li>
+                            &nbsp;Average Per Day: {averagePerDay.toFixed(2)}
+                        </li>
                     </ul>
                 </div>
             );
             break;
     }
 
     return (
-        <>
-            <main className="flex flex-col gap-6 p-8 pt-16 text-white">
-                <div className="flex justify-between">
-                    <h1 className="font-mono text-4xl">Quota Tracker</h1>
-                    <div className="flex gap-4 font-mono">
-                        <Button asChild variant="link" className="text-md">
-                            <a
-                                href="https://github.com/LucDeCaf/quota-tracker#readme"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                GitHub
-                            </a>
-                        </Button>
-                        <OptionsMenu
-                            options={options}
-                            setOptions={setOptions}
-                        />
-                        <Button
-                            className="text-md"
-                            variant="outline"
-                            onClick={() => setQuotas([])}
+        <main className="flex flex-col gap-6 p-8 pt-16">
+            <div className="flex justify-between">
+                <h1 className="font-mono text-4xl">Quota Tracker</h1>
+                <div className="flex gap-4 font-mono">
+                    <Button asChild variant="link" className="text-md">
+                        <a
+                            href="https://github.com/LucDeCaf/quota-tracker#readme"
+                            target="_blank"
+                            rel="noopener noreferrer"
                         >
-                            Clear
-                        </Button>
-                    </div>
+                            GitHub
+                        </a>
+                    </Button>
+                    <OptionsMenu options={options} setOptions={setOptions} />
+                    <Button
+                        className="text-md"
+                        variant="outline"
+                        onClick={() => setQuotas([])}
+                    >
+                        Clear
+                    </Button>
+                    <ModeToggle />
                 </div>
+            </div>
 
-                {statDisplay}
+            {statDisplay}
 
-                <Button
-                    variant="outline"
-                    className="font-mono text-3xl"
-                    onClick={addQuota}
-                >
-                    Add Quota
-                </Button>
+            <Button
+                variant="outline"
+                className="font-mono text-3xl"
+                onClick={addQuota}
+            >
+                Add Quota
+            </Button>
 
-                {view}
-            </main>
-        </>
+            {view}
+        </main>
     );
 }
 

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
@@ -0,0 +1,37 @@
+import { Moon, Sun } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTheme } from "@/components/theme-provider";
+
+export 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>
+    );
+}