tynanpurdy.com
Fork of atp.tools as a universal profile for people on the ATmosphere
1"use client";
2import { useTheme } from "@/providers/themeProvider";
3import { useEffect, useState } from "react";
4import { ChevronsUpDown, Circle, Moon, Sun } from "lucide-react";
5import { Button } from "./ui/button";
6import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
7
8const THEMES: ("dark" | "light")[] = ["dark", "light"];
9
10export function ColorToggle() {
11 const { setTheme, theme } = useTheme();
12 const [isOpen, setIsOpen] = useState(false);
13 const [mounted, setMounted] = useState(false);
14 useEffect(() => {
15 setMounted(true);
16 }, []);
17
18 const DarkLightIcon = !mounted ? Circle : theme === "dark" ? Moon : Sun;
19
20 return (
21 <Popover open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
22 <PopoverTrigger asChild>
23 <Button
24 variant="outline"
25 className="gap-2 mr-0 rounded-l-none flex-row align-middle w-full"
26 >
27 <DarkLightIcon className="h-4 w-4" />
28 Theme
29 <ChevronsUpDown className="h-4 w-4 opacity-50" />
30 </Button>
31 </PopoverTrigger>
32 <PopoverContent className="w-[200px]">
33 <div className="grid gap-1 p-2">
34 {THEMES.map((t) => (
35 <button
36 onClick={() => {
37 setTheme(t);
38 setIsOpen(false);
39 }}
40 className="flex items-center justify-between rounded-sm p-2 text-sm hover:bg-accent"
41 >
42 {t}
43 </button>
44 ))}
45 </div>
46 </PopoverContent>
47 </Popover>
48 );
49}