Design System

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent ariaTitle="Dialog Title">
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description text.
      </DialogDescription>
    </DialogHeader>
    <div>
      {/* Your content here */}
    </div>
    <DialogFooter>
      <Button variant="ghost">Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

<CommandDialog open={open} onOpenChange={setOpen}>
  <div className="flex w-full flex-row items-center gap-2 p-0.5">
    <CommandInput placeholder="Search..." className="w-full" />
    <div className="flex shrink-0 items-center gap-1 px-2">
      <Kbd className="h-5 w-5">
        <IconCommand size={12} />
      </Kbd>
      <Kbd className="h-5 w-5">T</Kbd>
    </div>
  </div>
  <div className="w-full">
    <div className="border-border h-[1px] w-full border-b" />
  </div>
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem value="action" onSelect={handleAction}>
        <Icon /> Action Name
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>Open Settings</Button>
  </DialogTrigger>
  <DialogContent
    ariaTitle="Settings"
    className="h-full max-h-[600px] !max-w-[760px] p-0"
  >
    <div className="overflow-y-auto">
      <h3 className="border-border mx-5 border-b py-4 text-lg font-bold">
        Settings
      </h3>
      <div className="flex flex-row gap-6 p-4">
        <div className="flex w-[160px] shrink-0 flex-col gap-1">
          {tabs.map(tab => (
            <Button
              key={tab.key}
              variant={activeTab === tab.key ? 'secondary' : 'ghost'}
              onClick={() => setActiveTab(tab.key)}
            >
              {tab.icon}
              {tab.title}
            </Button>
          ))}
        </div>
        <div className="flex flex-1 flex-col px-4">
          {renderTabContent(activeTab)}
        </div>
      </div>
    </div>
  </DialogContent>
</Dialog>