"use client" import { useState } from "react" // shadcn import { Field, FieldContent, FieldGroup, FieldLabel, } from "@/components/ui/field" import { Switch } from "@/components/ui/switch" // ------------------------------ | SWITCH - COLOR OPTIONS | ------------------------------ // export function SwitchColorOptions() { const [states, setStates] = useState({ success: true, info: true, warning: true, danger: true, }) return ( {/* Success */} Success setStates((prev) => ({ ...prev, success: checked })) } className="focus-visible:ring-green-500/50 data-checked:bg-green-500 data-checked:ring-green-500" /> {/* Info */} Info setStates((prev) => ({ ...prev, info: checked })) } className="focus-visible:ring-cyan-500/50 data-checked:bg-cyan-500 data-checked:ring-cyan-500" /> {/* Warning */} Warning setStates((prev) => ({ ...prev, warning: checked })) } className="focus-visible:ring-yellow-500/50 data-checked:bg-yellow-500 data-checked:ring-yellow-500" /> {/* Danger */} Danger setStates((prev) => ({ ...prev, danger: checked })) } className="focus-visible:ring-red-500/50 data-checked:bg-red-500 data-checked:ring-red-500" /> ) }