Dialog with Privacy Toggle

1'use client';
2 
3import { useState } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Dialog,
8  DialogContent,
9  DialogDescription,
10  DialogHeader,
11  DialogTitle,
12  DialogTrigger,
13} from '@/components/ui/dialog';
14import { Input } from '@/components/ui/input';
15import { Label } from '@/components/ui/label';
16import { Switch } from '@/components/ui/switch';
17 
18export default function Dialog06() {
19  const [open, setOpen] = useState(true);
20 
21  return (
22    <Dialog onOpenChange={setOpen} open={open}>
23      <DialogTrigger render={<Button onClick={() => setOpen(true)} />}>
24        Create Workspace
25      </DialogTrigger>
26      <DialogContent className="p-0 sm:max-w-lg">
27        <DialogHeader className="px-6 pt-4">
28          <DialogTitle className="text-balance font-semibold text-foreground text-lg">
29            Create workspace
30          </DialogTitle>
31          <DialogDescription className="mt-2 text-pretty text-muted-foreground text-sm leading-6">
32            Workspaces are shared environments where teams can connect to data
33            sources, run queries and create reports.
34          </DialogDescription>
35        </DialogHeader>
36 
37        <form action="#" method="POST">
38          <div className="px-6 pb-4">
39            <Label className="font-medium text-sm" htmlFor="workspace-name">
40              Workspace Name<span className="text-destructive">*</span>
41            </Label>
42            <Input
43              className="mt-2"
44              id="workspace-name"
45              name="workspace-name"
46              placeholder="My workspace"
47              required
48              type="text"
49            />
50            <Button className="mt-4 w-full" type="submit">
51              Create workspace
52            </Button>
53          </div>
54          <div className="rounded-b-md border-t bg-muted px-6 py-4">
55            <div className="flex items-start space-x-3">
56              <div className="mt-1 pt-0.5">
57                <Switch
58                  id="enable-private-workspace"
59                  name="enable-private-workspace"
60                />
61              </div>
62              <div>
63                <Label
64                  className="font-medium text-sm"
65                  htmlFor="enable-private-workspace"
66                >
67                  Set workspace to private
68                </Label>
69                <p className="text-pretty text-muted-foreground text-sm">
70                  Only those invited can access or view
71                </p>
72// … truncated