Application dialogs7

1import { Button } from "@/ui/button";
2import {
3  Dialog,
4  DialogClose,
5  DialogContent,
6  DialogFooter,
7  DialogTrigger,
8} from "@/ui/dialog";
9import { CheckCircleSolid, LockPassword } from "@mynaui/icons-react";
10import { ArrowRight, Check } from "lucide-react";
11 
12export default function WorkspaceDialog() {
13  return (
14    <Dialog>
15      <DialogTrigger asChild>
16        <Button variant="outline">Choose Workspace</Button>
17      </DialogTrigger>
18      <DialogContent className="sm:max-w-3xl">
19        <div className="space-y-4">
20          <div className="flex flex-col items-start justify-start gap-3">
21            <div className="bg-background border-border rounded-full border p-2">
22              <LockPassword className="h-5 w-5" />
23            </div>
24            <div>
25              <h3 className="text-lg font-semibold">Choose your workspace</h3>
26              <p className="text-muted-foreground text-base font-normal tracking-tight">
27                Select the plan that works best for your team.
28              </p>
29            </div>
30          </div>
31 
32          <div className="grid gap-4 md:grid-cols-2">
33            <div className="grid gap-3">
34              <div className="bg-background relative flex items-center gap-3 rounded-lg border p-4 px-4 py-3">
35                <div className="flex h-6 w-6 items-center justify-center rounded-full">
36                  <CheckCircleSolid className="h-5 w-5 text-emerald-500" />
37                </div>
38                <div>
39                  <h3 className="font-semibold">Basic</h3>
40                  <p className="text-muted-foreground text-sm">
41                    $7 per user/month
42                  </p>
43                </div>
44              </div>
45 
46              <div className="bg-background relative flex items-center gap-3 rounded-lg border p-4 px-4 py-3">
47                <div className="flex h-6 w-6 items-center justify-center rounded-full">
48                  <CheckCircleSolid className="text-muted h-5 w-5" />
49                </div>
50                <div>
51                  <h3 className="font-semibold">Pro</h3>
52                  <p className="text-muted-foreground text-sm">
53                    $12 per user/month
54                  </p>
55                </div>
56              </div>
57 
58              <div className="bg-background relative flex items-center gap-3 rounded-lg border p-4 px-4 py-3">
59                <div className="flex h-6 w-6 items-center justify-center rounded-full">
60// … truncated