Dock

import { Dock, DockItem, DockSeparator } from '@hanzo/ui'

export function Default() {
  return (
    <YStack width="100%" height={140} items="center" justify="flex-end" pb="$4">
      <Dock>
        <DockItem tooltip="Home" onClick={() => console.log("Home clicked")}>
          <Home size={22} />
        </DockItem>
        <DockItem tooltip="Search" onClick={() => console.log("Search clicked")}>
          <Search size={22} />
        </DockItem>
        <DockItem tooltip="Mail" onClick={() => console.log("Mail clicked")}>
          <Mail size={22} />
        </DockItem>
        <DockItem tooltip="Calendar" onClick={() => console.log("Calendar clicked")}>
          <Calendar size={22} />
        </DockItem>
        <DockItem tooltip="Settings" onClick={() => console.log("Settings clicked")}>
          <Settings size={22} />
        </DockItem>
      </Dock>
    </YStack>
  )
}

export function Positions() {
  return (
    <YStack width="100%" height={200} justify="space-between" style={{ flexDirection: "row" }}>
      <Dock position="left">
        <DockItem tooltip="Home">
          <Home size={20} />
        </DockItem>
        <DockItem tooltip="Search">
          <Search size={20} />
        </DockItem>
      </Dock>
      <Dock position="right">
        <DockItem tooltip="Mail">
          <Mail size={20} />
        </DockItem>
        <DockItem tooltip="Settings">
          <Settings size={20} />
        </DockItem>
      </Dock>
    </YStack>
  )
}

export function Magnification() {
  return (
    <YStack width="100%" gap="$6" items="center">
      <Dock magnification={80} distance={160}>
        <DockItem tooltip="Home">
          <Home size={22} />
        </DockItem>
        <DockItem tooltip="Search">
          <Search size={22} />
        </DockItem>
        <DockItem tooltip="Settings">
          <Settings size={22} />
        </DockItem>
      </Dock>
      <Dock magnification={0} distance={0}>
        <DockItem tooltip="Home">
          <Home size={22} />
        </DockItem>
        <DockItem tooltip="Search">
          <Search size={22} />
        </DockItem>
        <DockItem tooltip="Settings">
          <Settings size={22} />
        </DockItem>
      </Dock>
    </YStack>
  )
}

export function WithSeparators() {
  return (
    <YStack width="100%" height={140} items="center" justify="flex-end" pb="$4">
      <Dock>
        <DockItem tooltip="Home">
          <Home size={22} />
        </DockItem>
        <DockItem tooltip="Search">
          <Search size={22} />
        </DockItem>
        <DockSeparator />
        <DockItem tooltip="Mail">
          <Mail size={22} />
        </DockItem>
        <DockItem tooltip="Calendar">
          <Calendar size={22} />
        </DockItem>
        <DockSeparator />
        <DockItem tooltip="Settings">
          <Settings size={22} />
        </DockItem>
        <DockItem tooltip="Profile">
          <User size={22} />
        </DockItem>
      </Dock>
    </YStack>
  )
}

Types

export type DockPosition = 'bottom' | 'left' | 'right'

export type DockProps = Omit<ComponentProps<typeof Frame>, 'edge' | 'position' | 'className'> & {
  className?: string
  position?: DockPosition
  /** How far, in px, a hovered item grows beyond `BASE_SIZE`. */
  magnification?: number
  /** How far, in px either side of an item's centre, the growth reaches. */
  distance?: number
  children?: ReactNode
}

export type DockItemProps = Omit<ComponentProps<typeof ItemFrame>, 'className' | 'onClick'> & {
  className?: string
  children?: ReactNode
  onClick?: () => void
  tooltip?: string
  /** Overrides the Dock's `magnification` for this one item. */
  magnification?: number
  /** Overrides the Dock's `distance` for this one item. */
  distance?: number
}

export type DockSeparatorProps = ComponentProps<typeof SeparatorFrame>

Exports