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>
32 lines
831 B
TypeScript
32 lines
831 B
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
icon?: React.ReactNode
|
|
label: string
|
|
}
|
|
|
|
export function ActionButton({ icon, label, className, ...props }: ActionButtonProps) {
|
|
return (
|
|
<button
|
|
{...props}
|
|
className={cn(
|
|
"flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-xs font-medium text-foreground transition-colors hover:bg-[#3e3e3e] active:bg-[#3e3e3e]",
|
|
className
|
|
)}
|
|
>
|
|
{icon}
|
|
<span>{label}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function ActionGroup({ children, className }: { children: React.ReactNode; className?: string }) {
|
|
return (
|
|
<div className={cn("flex gap-1.5", className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|