personal-website/src/components/ThemeSelector.jsx

import * as React from "react"

import { icons } from "../lib/icons"
import { Button } from "./ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuTrigger,
} from "./ui/dropdown-menu"

import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
  } from "./ui/tooltip"

// Please note that clang = lang, it's just for more confusion
export function ThemeSelector({ tooltip }) {
    function getTheme() {
        console.log(localStorage.getItem("data-theme"));
        const theme = localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme");
        document.documentElement.setAttribute("data-theme", theme);
        return theme;
    }

    function newTheme(theme) {
        setTheme(theme);
        document.documentElement.setAttribute("data-theme", theme);
        localStorage.setItem("data-theme", theme);
    }

    const [theme, setTheme] = React.useState(getTheme());

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <div>
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger>
                                <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{tooltip}</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-20">
                <DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>
                    <DropdownMenuRadioItem value="theme_auto">Auto</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="theme_light">Light</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="theme_dark">Dark</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu >
    )
}