TemplatePicker() — ui Function Reference

Architecture documentation for the TemplatePicker() function in template-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ TemplatePicker() — ui Function Reference

Dependency Diagram

graph TD
  75c802d2_b78e_3542_4580_8f828cba0e1b["TemplatePicker()"]
  1e78e81b_06b1_5143_3ba8_14712f41f48d["template-picker.tsx"]
  75c802d2_b78e_3542_4580_8f828cba0e1b -->|defined in| 1e78e81b_06b1_5143_3ba8_14712f41f48d
  style 75c802d2_b78e_3542_4580_8f828cba0e1b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/template-picker.tsx lines 31–94

export function TemplatePicker({
  isMobile,
  anchorRef,
}: {
  isMobile: boolean
  anchorRef: React.RefObject<HTMLDivElement | null>
}) {
  const [params, setParams] = useDesignSystemSearchParams()

  const currentTemplate = TEMPLATES.find(
    (template) => template.value === params.template
  )

  return (
    <Picker>
      <PickerTrigger className="hidden md:flex">
        <div className="flex flex-col justify-start text-left">
          <div className="text-muted-foreground text-xs">Template</div>
          <div className="text-foreground text-sm font-medium">
            {currentTemplate?.title}
          </div>
        </div>
        {currentTemplate?.logo && (
          <div
            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
            dangerouslySetInnerHTML={{
              __html: currentTemplate.logo,
            }}
          />
        )}
      </PickerTrigger>
      <PickerContent
        anchor={isMobile ? anchorRef : undefined}
        side={isMobile ? "top" : "right"}
        align={isMobile ? "center" : "start"}
      >
        <PickerRadioGroup
          value={params.template}
          onValueChange={(value) => {
            setParams({
              template: value as "next" | "start" | "vite",
            })
          }}
        >
          <PickerGroup>
            {TEMPLATES.map((template) => (
              <PickerRadioItem key={template.value} value={template.value}>
                {template.logo && (
                  <div
                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
                    dangerouslySetInnerHTML={{
                      __html: template.logo,
                    }}
                  />
                )}
                {template.title}
              </PickerRadioItem>
            ))}
          </PickerGroup>
        </PickerRadioGroup>
      </PickerContent>
    </Picker>
  )
}