Pin List

import { PinList } from '@hanzo/ui'

Default

Click the pin to move a row to the top; click it again to send it back.

PulsarThreshold signatures
QuasarConsensus engine
PrismState sync
TorusFHE compiler

export function Default() {
  return (
    <YStack width={320}>
      <PinList items={projects} defaultValue={["pulsar"]} />
    </YStack>
  )
}

Controlled

The pinned set lives in the caller's own state, shown alongside the list.

QuasarConsensus engine
PulsarThreshold signatures
PrismState sync
TorusFHE compiler

Pinned: quasar

export function Controlled() {
  const [pinned, setPinned] = useState<string[]>(["quasar"])
  return (
    <YStack width={320} gap="$3">
      <PinList items={projects} value={pinned} onValueChange={setPinned} />
      <XStack gap="$2" flexWrap="wrap">
        <SizableText size="$2" color="$quiet">
          Pinned: {pinned.length ? pinned.join(", ") : "none"}
        </SizableText>
      </XStack>
    </YStack>
  )
}

Capped

At most two rows may be pinned; unpinning one frees a slot for another.

QuasarConsensus engine
PulsarThreshold signatures
PrismState sync
TorusFHE compiler

export function Capped() {
  return (
    <YStack width={320}>
      <PinList items={projects} defaultValue={["quasar", "pulsar"]} max={2} />
    </YStack>
  )
}

In place

PinnedFirst is false, so a pinned row is marked but never reordered.

QuasarConsensus engine
PulsarThreshold signatures
PrismState sync
TorusFHE compiler

export function InPlace() {
  return (
    <YStack width={320}>
      <PinList items={projects} defaultValue={["torus"]} pinnedFirst={false} />
    </YStack>
  )
}

Types

export interface PinListItem {
  id: string
  label: string
  description?: string
  icon?: ReactNode
  disabled?: boolean
}

export type PinListProps = Omit<ComponentProps<typeof YStack>, 'children' | 'onChange' | 'items'> & {
  /** Rows to list, in their unpinned (base) order. */
  items: PinListItem[]
  /** The pinned ids — controlled. */
  value?: string[]
  /** The pinned ids — uncontrolled initial state. */
  defaultValue?: string[]
  /** Fires with the next set of pinned ids whenever a row is pinned or unpinned. */
  onValueChange?: (value: string[]) => void
  /** Group pinned rows above the rest. Defaults to `true`; `false` pins in place. */
  pinnedFirst?: boolean
  /** How many rows may be pinned at once. Unset means no limit. */
  max?: number
}

Exports

PinListtype PinListItemtype PinListProps