Dialog

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

<Dialog>
  <DialogTrigger asChild>
    <Button btnColor='blue'>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent className='sm:max-w-[425px]'>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you&apos;re done.
      </DialogDescription>
    </DialogHeader>
    <div className='grid gap-3 text-base'>
      <div className='grid grid-cols-4 items-center gap-2'>
        <label htmlFor='name' className='text-right'>
          Name
        </label>
        <Input id='name' value='Pedro Duarte' className='col-span-3' />
      </div>
      <div className='grid grid-cols-4 items-center gap-2'>
        <label htmlFor='username' className='text-right'>
          Username
        </label>
        <Input id='username' value='@peduarte' className='col-span-3' />
      </div>
    </div>
    <DialogFooter>
      <Button type='submit'>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>