f1d0d3a78c
Extract reusable control components (SliderControl, MetricControl, SegmentedControl, ToggleControl, ActionButton, PanelSection) and PanelWrapper to reduce duplication across all property panels. Net reduction of ~500 lines. Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { Check } from 'lucide-react'
|
|
|
|
interface ToggleControlProps {
|
|
label: string
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
className?: string
|
|
}
|
|
|
|
export function ToggleControl({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
className,
|
|
}: ToggleControlProps) {
|
|
return (
|
|
<div
|
|
className={cn("group flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e]", className)}
|
|
onClick={() => onChange(!checked)}
|
|
>
|
|
<div className="text-muted-foreground transition-colors group-hover:text-foreground select-none">
|
|
{label}
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"flex h-5 w-5 items-center justify-center rounded-[4px] border transition-all duration-200",
|
|
checked
|
|
? "border-primary bg-primary text-primary-foreground"
|
|
: "border-border bg-black/20 text-transparent group-hover:border-muted-foreground"
|
|
)}
|
|
>
|
|
<Check className="h-3.5 w-3.5" strokeWidth={3} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|