Dialog Stack

import { DialogStack } from '@hanzo/ui'

Default

Three panels offset diagonally, the last one in the list on top.

Welcome

This is the first dialog in the stack.

Settings

Configure your application settings here.

Confirmation

Are you sure you want to proceed?

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

Closeable

Each corner button removes its own panel from the stack, revealing the one behind it.

Welcome

This is the first dialog in the stack.

Settings

Configure your application settings here.

Confirmation

Are you sure you want to proceed?

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>
  )
}

Two panels

The stack works with any number of dialogs, not only three.

Draft

Unsaved changes.

Review

Ready to publish.

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

DialogStacktype DialogStackItemtype DialogStackProps