Dialog

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@caroainc/ui-components/client'

<Dialog>
  <DialogTrigger asChild>
    <Button>ダイアログを開く</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>タイトル</DialogTitle>
      <DialogDescription>説明文</DialogDescription>
    </DialogHeader>
    <div>コンテンツ</div>
    <DialogFooter>
      <Button>確認</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<Dialog>
  <DialogTrigger asChild>
    <Button>プロフィール編集</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>プロフィール編集</DialogTitle>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      <Input />
    </div>
    <DialogFooter>
      <Button>保存</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>