personal-website/src/components/ThemeSelector.jsx

"use client"

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"


// Please note that clang = lang, it's just for more confusion
export function ThemeSelector() {
    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>
                <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
            </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 >
    )
}