Dialog

export default function DialogHero() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline">Create playlist</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create playlist</DialogTitle>
          <DialogDescription>
            Give your playlist a name to get started. You can add tracks and update the details at
            any time.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-1.5 px-6">
          <label htmlFor="playlist-name" className="text-sm font-medium text-primary">
            Name
          </label>
          <input
            id="playlist-name"
            placeholder="My playlist"
            className="h-9 w-full rounded-md border border-line-ui bg-ui px-3 text-sm text-primary placeholder:text-muted outline-none focus:ring-2 focus:ring-focus"
          />
        </div>
        <DialogFooter>
          <DialogClose render={<Button variant="outline">Cancel</Button>} />
          <Button>Create</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default function DialogDefault() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline">Keyboard shortcuts</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Keyboard shortcuts</DialogTitle>
          <DialogDescription>Speed up your workflow with these shortcuts.</DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-2 px-6">
          {[
            { keys: ['⌘', 'K'], label: 'Open command menu' },
            { keys: ['⌘', '/'], label: 'Search tracks' },
            { keys: ['Space'], label: 'Play / pause' },
            { keys: ['⌘', '↑'], label: 'Volume up' },
            { keys: ['⌘', '↓'], label: 'Volume down' },
          ].map(({ keys, label }) => (
            <div key={label} className="flex items-center justify-between">
              <span className="text-sm text-primary">{label}</span>
              <KbdGroup>
                {keys.map((key) => (
                  <Kbd key={key}>{key}</Kbd>
                ))}
              </KbdGroup>
            </div>
          ))}
        </div>
        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  );
}

export default function DialogScrollable() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline">Release notes</Button>} />
      <DialogContent className="flex max-h-[80vh] flex-col gap-0">
        <DialogHeader>
          <DialogTitle>Release notes</DialogTitle>
          <DialogDescription>{"What's new in the latest versions of the app."}</DialogDescription>
        </DialogHeader>
        <div className="flex-1 overflow-y-auto px-6 py-6">
          <div className="flex flex-col gap-6">
            {RELEASE_NOTES.map(({ version, date, changes }) => (
              <div key={version} className="flex flex-col gap-2">
                <div className="flex items-baseline gap-2">
                  <span className="text-sm font-medium text-primary">v{version}</span>
                  <span className="text-xs text-muted">{date}</span>
                </div>
                <ul className="flex flex-col gap-1">
                  {changes.map((change) => (
                    <li key={change} className="flex gap-2 text-sm text-secondary">
                      <span className="mt-1.5 size-1 shrink-0 rounded-full bg-muted" />
                      {change}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  );
}