Dialog Stack

import { DialogStack } from '@hanzo/ui'

export function Default() {
  return (
    <YStack width="100%" minH={220} items="center" justify="center">
      <DialogStack width={320} height={160} dialogs={initial} />
    </YStack>
  )
}

export function Closeable() {
  const [dialogs, setDialogs] = useState(initial)
  return (
    <YStack width="100%" minH={220} items="center" justify="center">
      <DialogStack
        width={320}
        height={160}
        dialogs={dialogs}
        onClose={(id) => setDialogs((rest) => rest.filter((d) => d.id !== id))}
      />
    </YStack>
  )
}

export function TwoPanels() {
  return (
    <YStack width="100%" minH={200} items="center" justify="center">
      <DialogStack
        width={280}
        height={140}
        dialogs={[
          { id: "a", title: "Draft", content: "Unsaved changes." },
          { id: "b", title: "Review", content: "Ready to publish." },
        ]}
      />
    </YStack>
  )
}

Types

export type DialogStackItem = {
  id: string
  title: ReactNode
  content: ReactNode
}

export type DialogStackProps = ComponentProps<typeof YStack> & {
  dialogs: DialogStackItem[]
  onClose?: (id: string) => void
}

Exports