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.8 kB · 66 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667"use client";
import { System, Dark, Light } from "@openstatus/icons";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@openstatus/ui/components/ui/select";import { cn } from "@openstatus/ui/lib/utils";import { useTheme } from "next-themes";import type * as React from "react";import { useState } from "react";import { useEffect } from "react";
export function ThemeToggle({ className, ...props}: React.ComponentProps<typeof SelectTrigger>) { const { setTheme, theme } = useTheme(); const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true); }, []);
// NOTE: hydration error if we don't do this if (!mounted) { return ( <Select> <SelectTrigger className={cn("w-[180px]", className)} {...props}> <SelectValue placeholder="Select theme" /> </SelectTrigger> </Select> ); }
return ( <Select value={theme} onValueChange={setTheme}> <SelectTrigger className={cn("w-[180px]", className)} {...props}> <SelectValue defaultValue={theme} placeholder="Select theme" /> </SelectTrigger> <SelectContent> <SelectItem value="light"> <div className="flex items-center gap-2"> <Light className="h-4 w-4" /> <span>Light</span> </div> </SelectItem> <SelectItem value="dark"> <div className="flex items-center gap-2"> <Dark className="h-4 w-4" /> <span>Dark</span> </div> </SelectItem> <SelectItem value="system"> <div className="flex items-center gap-2"> <System className="h-4 w-4" /> <span>System</span> </div> </SelectItem> </SelectContent> </Select> );}