mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-09-13 07:10:51 +02:00
0067075ed1
* Update ScriptAccordion and ScriptItem components for improved styling * Add README.md for Proxmox VE Helper-Scripts Frontend * Remove testing dependencies and related test files from the frontend project * Update analytics URL in siteConfig to point to community-scripts.org * Refactor ESLint configuration to have one source of truth and run "npm lint" to apply new changes * Update lint script in package.json to remove npm * Add 'next' option to ESLint configuration for improved compatibility * Update package dependencies and versions in package.json and package-lock.json * Refactor theme provider import and enhance calendar component for dynamic icon rendering * rename sidebar, alerts and buttons * rename description and interfaces files * rename more files * change folder name * Refactor tooltip logic to improve updateable condition handling * Enhance CommandMenu to prevent duplicate scripts across categories * Remove test step from frontend CI/CD workflow
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
|
import { useTheme } from "next-themes";
|
|
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "./tooltip";
|
|
import { Button } from "./button";
|
|
|
|
export function ThemeToggle() {
|
|
const { setTheme, theme: currentTheme } = useTheme();
|
|
|
|
const handleChangeTheme = (theme: "light" | "dark") => {
|
|
if (theme === currentTheme)
|
|
return;
|
|
|
|
if (!document.startViewTransition)
|
|
return setTheme(theme);
|
|
document.startViewTransition(() => setTheme(theme));
|
|
};
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip delayDuration={100}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
type="button"
|
|
size="icon"
|
|
className="px-2"
|
|
aria-label="Toggle theme"
|
|
onClick={() =>
|
|
handleChangeTheme(currentTheme === "dark" ? "light" : "dark")}
|
|
>
|
|
<SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
|
|
<MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="text-xs">
|
|
Theme Toggle
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|