Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.7 kB · 74 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475"use client";
import { System, Dark, Light } from "@openstatus/icons";import { useTheme } from "next-themes";import type * as React from "react";import { useEffect, useState } from "react";
import { cn } from "../lib/utils";
export function ThemeToggle({ className, ...props}: React.ComponentProps<"div">) { const { setTheme, theme } = useTheme(); const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true); }, []);
if (!mounted) { return ( <div className={cn( "bg-border [&>*]:bg-background flex items-center gap-px [&>*]:flex [&>*]:flex-1 [&>*]:items-center [&>*]:justify-center [&>*]:p-4", className, )} {...props} > <div> <Light className="h-6 w-6" /> </div> <div> <Dark className="h-6 w-6" /> </div> <div> <System className="h-6 w-6" /> </div> </div> ); }
return ( <div className={cn( "bg-border [&>*]:bg-background [&>*]:hover:bg-muted [&>*]:data-[active=true]:bg-muted flex items-center gap-px [&>*]:flex [&>*]:flex-1 [&>*]:items-center [&>*]:justify-center [&>*]:p-4", className, )} {...props} > <button type="button" data-active={theme === "light"} onClick={() => setTheme("light")} > [light] </button> <button type="button" data-active={theme === "dark"} onClick={() => setTheme("dark")} > [dark] </button> <button type="button" data-active={theme === "system"} onClick={() => setTheme("system")} > [system] </button> </div> );}