Drawer

export function EditProfile() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Edit profile</Button>
      <Drawer
        open={open}
        onOpenChange={setOpen}
        title="Edit profile"
        description="Visible to everyone in the workspace"
        side="right"
        width={420}
        footerAlignment="right"
        footer={
          <>
            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
            <Button onClick={() => setOpen(false)}>Save changes</Button>
          </>
        }
      >
        <div>Profile fields</div>
      </Drawer>
    </>
  )
}