StyleSwitcher() — ui Function Reference

Architecture documentation for the StyleSwitcher() function in style-switcher.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ StyleSwitcher() — ui Function Reference

Dependency Diagram

graph TD
  9ea71df9_a2b3_956c_ca21_9a8af59701f4["StyleSwitcher()"]
  6d60fcd6_769b_a560_a472_66e81798a814["style-switcher.tsx"]
  9ea71df9_a2b3_956c_ca21_9a8af59701f4 -->|defined in| 6d60fcd6_769b_a560_a472_66e81798a814
  style 9ea71df9_a2b3_956c_ca21_9a8af59701f4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/style-switcher.tsx lines 17–49

export function StyleSwitcher({ className, ...props }: SelectTriggerProps) {
  const [config, setConfig] = useConfig()

  return (
    <Select
      value={config.style}
      onValueChange={(value: Style["name"]) =>
        setConfig({
          ...config,
          style: value,
        })
      }
    >
      <SelectTrigger
        className={cn(
          "h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4",
          className
        )}
        {...props}
      >
        <span className="text-muted-foreground">Style: </span>
        <SelectValue placeholder="Select style" />
      </SelectTrigger>
      <SelectContent>
        {styles.map((style) => (
          <SelectItem key={style.name} value={style.name} className="text-xs">
            {style.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}