Dialog

import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogIcon, DialogFooter, Button } from 'kalki-design'
import { ShareNetwork } from '@phosphor-icons/react'
import * as React from 'react'

const ACTION_BUTTON_CLASS = 'min-w-[96px]'

export function Example() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Media Dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)} size="md" showCloseButton={false}>
        <DialogHeader className="px-8 py-7">
          <div className="flex items-start gap-5">
            <DialogIcon tone="secondary" className="text-foreground [&>svg]:size-8">
              <ShareNetwork weight="duotone" />
            </DialogIcon>
            <div className="space-y-2">
              <DialogTitle>Share this project?</DialogTitle>
              <DialogDescription>Anyone with the link will be able to view and edit this project.</DialogDescription>
            </div>
          </div>
        </DialogHeader>
        <DialogFooter className="px-8">
          <Button size="md" variant="outline" className={ACTION_BUTTON_CLASS} onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button size="md" className={ACTION_BUTTON_CLASS} onClick={() => setOpen(false)}>
            Share
          </Button>
        </DialogFooter>
      </Dialog>
    </>
  )
}