feat: add dialog usage

steven-tey · Mar 30, 2024 · 9152e46 · 9152e46
1 parent 41d7e6a
commit 9152e46
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -3,6 +3,13 @@ import { Button } from "@/components/tailwind/ui/button";
 import Menu from "@/components/tailwind/ui/menu";
 import Link from "next/link";
 import TailwindAdvancedEditor from "@/components/tailwind/advanced-editor";
+import {
+ Dialog,
+ DialogContent,
+ DialogTrigger,
+} from "@/components/tailwind/ui/dialog";
+import { ScrollArea } from "@/components/tailwind/ui/scroll-area";
+import { BookOpen } from "lucide-react";
 
 export default function Page() {
  return (
@@ -13,11 +20,25 @@ export default function Page() {
  <Github />
  </a>
  </Button>
+ <Dialog>
+ <DialogTrigger asChild>
+ <Button className="ml gap-2">
+ <BookOpen className="h-4 w-4" />
+ Usage in dialog
+ </Button>
+ </DialogTrigger>
+ <DialogContent className="flex max-w-3xl h-[calc(100vh-24px)]">
+ <ScrollArea className="max-h-screen">
+ <TailwindAdvancedEditor />
+ </ScrollArea>
+ </DialogContent>
+ </Dialog>
  <Link href="/docs" className="ml-auto">
  <Button variant="ghost">Documentation</Button>
  </Link>
  <Menu />
  </div>
+
  <TailwindAdvancedEditor />
  </div>
  );