Dialog

import { Dialog, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger } from "@/components/optics/dialog";import { Button } from "@/components/optics/button";import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";<Dialog>  <DialogTrigger render={<Button variant="raised">Edit Profile</Button>} />  <DialogPopup>    <DialogHeader>      <DialogTitle>        Edit profile      </DialogTitle>      <DialogDescription>        Make changes to your profile here. Click save when you're done.      </DialogDescription>    </DialogHeader>    <div className="grid gap-4 py-4">      <div className="grid grid-cols-4 items-center gap-4">        <Label          className="text-right"          htmlFor="name"        >          Name        </Label>        <Input          className="col-span-3"          defaultValue="Pedro Duarte"          id="name"        />      </div>      <div className="grid grid-cols-4 items-center gap-4">        <Label          className="text-right"          htmlFor="username"        >          Username        </Label>        <Input          className="col-span-3"          defaultValue="@peduarte"          id="username"        />      </div>    </div>    <DialogFooter>      <Button        type="submit"        variant="default"      >        Save changes      </Button>    </DialogFooter>  </DialogPopup></Dialog>