ModelItem() — ui Function Reference

Architecture documentation for the ModelItem() function in model-selector.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ModelItem() — ui Function Reference

Dependency Diagram

graph TD
  c273cd83_7f27_a159_5725_3371ea1c750d["ModelItem()"]
  c9ff8f7d_3661_b534_3ddc_912a75766464["model-selector.tsx"]
  c273cd83_7f27_a159_5725_3371ea1c750d -->|defined in| c9ff8f7d_3661_b534_3ddc_912a75766464
  style c273cd83_7f27_a159_5725_3371ea1c750d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/playground/components/model-selector.tsx lines 134–162

function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
  const ref = React.useRef<HTMLDivElement>(null)

  useMutationObserver(ref, (mutations) => {
    mutations.forEach((mutation) => {
      if (
        mutation.type === "attributes" &&
        mutation.attributeName === "aria-selected" &&
        ref.current?.getAttribute("aria-selected") === "true"
      ) {
        onPeek(model)
      }
    })
  })

  return (
    <CommandItem
      key={model.id}
      onSelect={onSelect}
      ref={ref}
      className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
    >
      {model.name}
      <Check
        className={cn("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
      />
    </CommandItem>
  )
}