PreviewControls() — ui Function Reference

Architecture documentation for the PreviewControls() function in preview-controls.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ PreviewControls() — ui Function Reference

Dependency Diagram

graph TD
  78946268_0c6c_6dcd_d77e_d07140479782["PreviewControls()"]
  d3ab9972_e64d_cdc8_4d1a_697b6a494e7a["preview-controls.tsx"]
  78946268_0c6c_6dcd_d77e_d07140479782 -->|defined in| d3ab9972_e64d_cdc8_4d1a_697b6a494e7a
  style 78946268_0c6c_6dcd_d77e_d07140479782 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/preview-controls.tsx lines 11–40

export function PreviewControls() {
  const [params, setParams] = useDesignSystemSearchParams({
    history: "replace",
  })

  return (
    <div className="flex h-8 items-center gap-1.5 rounded-md border p-1">
      <ToggleGroup
        type="single"
        value={params.size.toString()}
        onValueChange={(newValue) => {
          if (newValue) {
            setParams({ size: parseInt(newValue) })
          }
        }}
        className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
      >
        <ToggleGroupItem value="100" title="Desktop">
          <Monitor />
        </ToggleGroupItem>
        <ToggleGroupItem value="60" title="Tablet">
          <Tablet />
        </ToggleGroupItem>
        <ToggleGroupItem value="30" title="Mobile">
          <Smartphone />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}