Shelf

import { Shelf } from '@hanzo/ui/catalog'

export function Default() {
  const [tab, setTab] = useState('skills')
  const [view, setView] = useState('discover')
  const [query, setQuery] = useState('')
  const [added, setAdded] = useState<string[]>(['git_branches'])
  const shown = SKILLS.filter((s) => s.name.includes(query.trim()))
  return (
    <XStack height={560} width="100%">
      <Shelf
        title="Customize"
        detail="What the agent brings to a run: the skills it knows, the connectors it calls, the plugins it runs."
        tabs={KINDS}
        tab={tab}
        onTab={setTab}
        view={view}
        onView={setView}
        search="Search skills"
        query={query}
        onQuery={setQuery}
        add="New skill"
        onAdd={() => {}}
      >
        <Tiles label="Skills to add">
          {shown.map((s) => (
            <Tile
              key={s.name}
              title={s.name}
              detail={s.detail}
              meta={s.from}
              onOpen={() => {}}
              action={<Add name={s.name} added={added.includes(s.name)} onPress={() => setAdded([...added, s.name])} />}
            />
          ))}
        </Tiles>
      </Shelf>
    </XStack>
  )
}

Types

export interface ShelfProps extends Col {
  /** The page's title. */
  title: string
  /** One or two lines on what the page is for. */
  detail?: string
  /** The kinds, as tabs. An icon is a component, drawn at 15px. */
  tabs: readonly View[]
  /** The open kind's id. */
  tab: string
  onTab: (id: string) => void
  /** The halves of a kind. Yours and Discover unless given. */
  views?: readonly View[]
  /** The open half's id. */
  view: string
  onView: (id: string) => void
  /** The search's name and placeholder — "Search skills". */
  search: string
  query: string
  onQuery: (q: string) => void
  /** The Add action's words — "New skill". None, and there is no Add. */
  add?: string
  onAdd?: () => void
  /** The title's outline level. */
  level?: 1 | 2
  /** The cards. */
  children?: ReactNode
}

Exports