"use client" ;
import { useState } from "react" ;
import { LayoutTemplate, Loader2, FileText, Mail, Presentation, File } from "lucide-react" ;
import { Button } from "@/components/ui/button" ;
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog" ;
import { Badge } from "@/components/ui/badge" ;
import { cn } from "@/lib/utils" ;
const templates = [
{ id: "1" , name: "Blank" , description: "Start fresh" , icon: File },
{ id: "2" , name: "Report" , description: "Professional layout" , icon: FileText },
{ id: "3" , name: "Newsletter" , description: "Email design" , icon: Mail, badge: "Popular" },
{ id: "4" , name: "Pitch Deck" , description: "Presentations" , icon: Presentation },
];
export const title = "React Dialog Block Select Template" ;
export default function DialogSelectTemplate () {
const [ open , setOpen ] = useState ( false );
const [ selected , setSelected ] = useState ( "1" );
const [ isLoading , setIsLoading ] = useState ( false );
const handleSelect = async () => {
setIsLoading ( true );
await new Promise (( resolve ) => setTimeout (resolve, 1000 ));
setIsLoading ( false );
setOpen ( false );
};
return (
< Dialog open = {open} onOpenChange = {setOpen}>
< div className = "flex min-h-[350px] items-center justify-center" >
< DialogTrigger asChild >
< Button variant = "outline" >
< LayoutTemplate className = "mr-2 h-4 w-4" />
Choose Template
</ Button >
</ DialogTrigger >
</ div >
< DialogContent className = "sm:max-w-sm" >
< DialogHeader >
< DialogTitle >Select Template</ DialogTitle >
< DialogDescription >
Choose a template to get started.
</ DialogDescription >
</ DialogHeader >
< div className = "grid grid-cols-2 gap-3 py-4" >
{templates. map (( template ) => {
const Icon = template.icon;
return (
< button
key = {template.id}
onClick = {() => setSelected (template.id)}
className = { cn (
"relative flex flex-col items-center rounded-lg border p-4 text-center transition-colors" ,
selected === template.id
? "border-primary bg-primary/5"
: "hover:bg-muted"
)}
>
{template.badge && (
< Badge variant = "secondary" className = "absolute -top-2 right-2 text-xs" >
{template.badge}
</ Badge >
)}
< Icon className = "h-8 w-8 text-muted-foreground mb-2" />
< p className = "text-sm font-medium" >{template.name}</ p >
< p className = "text-xs text-muted-foreground" >{template.description}</ p >
</ button >
);
})}
</ div >
< DialogFooter >
< Button variant = "outline" onClick = {() => setOpen ( false )}>
Cancel
</ Button >
< Button onClick = {handleSelect} disabled = {isLoading}>
{isLoading ? (
<>
< Loader2 className = "mr-2 h-4 w-4 animate-spin" />
Loading...
</>
) : (
"Use Template"
)}
</ Button >
</ DialogFooter >
</ DialogContent >
</ Dialog >
);
}