Message Dock

import { MessageDock } from '@hanzo/ui'

export function Default() {
  const messages: MessageDockMessage[] = [
    { id: "1", type: "success", title: "Success", description: "Your changes have been saved successfully." },
    { id: "2", type: "info", title: "Info", description: "New update available." },
    { id: "3", type: "warning", title: "Warning", description: "Please review your settings." },
  ]
  return (
    <YStack minH={200} position="relative">
      <MessageDock messages={messages} />
    </YStack>
  )
}

export function Positions() {
  const [position, setPosition] = useState<
    "top" | "bottom" | "top-right" | "bottom-right"
  >("bottom-right")
  const messages: MessageDockMessage[] = [
    { id: "1", type: "info", title: `Docked ${position}` },
  ]
  return (
    <YStack minH={200} position="relative" gap="$2">
      <YStack flexDirection="row" gap="$2" flexWrap="wrap">
        {(["top", "bottom", "top-right", "bottom-right"] as const).map((p) => (
          <Button key={p} size="sm" variant="outline" onPress={() => setPosition(p)}>
            {p}
          </Button>
        ))}
      </YStack>
      <MessageDock messages={messages} position={position} />
    </YStack>
  )
}

export function Dismissable() {
  const [messages, setMessages] = useState<MessageDockMessage[]>([
    { id: "1", type: "error", title: "Upload failed", description: "The file exceeded 10 MB." },
    { id: "2", type: "success", title: "Profile updated" },
  ])
  return (
    <YStack minH={200} position="relative">
      <MessageDock
        messages={messages}
        onClose={(id) => setMessages((prev) => prev.filter((m) => m.id !== id))}
      />
    </YStack>
  )
}

Types

export type MessageDockMessageType = 'info' | 'success' | 'warning' | 'error'

export type MessageDockMessage = {
  id: string
  type?: MessageDockMessageType
  title: string
  description?: string
}

export type MessageDockPosition = 'top' | 'bottom' | 'top-right' | 'bottom-right'

export type MessageDockProps = Omit<ComponentProps<typeof DockFrame>, 'anchor' | 'position' | 'children'> & {
  messages: MessageDockMessage[]
  onClose?: (id: string) => void
  position?: MessageDockPosition | null
}

Exports