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 · 68 lines
TSX
at incident-api
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869"use client";
import { System, Dark, Light } from "@openstatus/icons";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@openstatus/ui/components/ui/select";import { Skeleton } from "@openstatus/ui/components/ui/skeleton";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 ThemeSelect({ className, ...props}: React.ComponentProps<typeof SelectTrigger>) { const { setTheme, theme } = useTheme(); const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true); }, []);
if (!mounted) { return ( <Skeleton className={cn("border-border h-9 rounded-md border", className)} /> ); }
return ( <Select value={theme} onValueChange={setTheme}> <SelectTrigger className={cn("w-full", className)} {...props}> <SelectValue className="w-full" 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> );}