"use client" ;
import { useState } from "react" ;
import { Focus, Play } from "lucide-react" ;
import { Button } from "@/components/ui/button" ;
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog" ;
import { Switch } from "@/components/ui/switch" ;
import { Label } from "@/components/ui/label" ;
import { cn } from "@/lib/utils" ;
const durations = [
{ value: 25 , label: "25 min" },
{ value: 50 , label: "50 min" },
{ value: 90 , label: "90 min" },
];
export const title = "React Dialog Block Focus Mode" ;
export default function DialogFocusMode () {
const [ open , setOpen ] = useState ( false );
const [ duration , setDuration ] = useState ( 25 );
const [ blockNotifs , setBlockNotifs ] = useState ( true );
const [ started , setStarted ] = useState ( false );
const handleStart = () => {
setStarted ( true );
};
const handleClose = () => {
setOpen ( false );
setTimeout (() => setStarted ( false ), 200 );
};
return (
< Dialog open = {open} onOpenChange = {setOpen}>
< div className = "flex min-h-[350px] items-center justify-center" >
< DialogTrigger asChild >
< Button variant = "outline" >
< Focus className = "mr-2 h-4 w-4" />
Focus Mode
</ Button >
</ DialogTrigger >
</ div >
< DialogContent style = {{ maxWidth: "384px" }}>
{started ? (
< div className = "flex flex-col items-center justify-center py-8 text-center" >
< div className = "h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center" >
< Focus className = "h-8 w-8 text-primary" />
</ div >
< h3 className = "mt-4 text-lg font-medium" >Focus Mode Active</ h3 >
< p className = "mt-1 text-sm text-muted-foreground" >
{duration} minute session started
</ p >
< p className = "text-xs text-muted-foreground mt-1" >
{blockNotifs ? "Notifications blocked" : "Notifications enabled" }
</ p >
< Button variant = "outline" onClick = {handleClose} className = "mt-6" >
End Session
</ Button >
</ div >
) : (
<>
< DialogHeader >
< DialogTitle >Start Focus Session</ DialogTitle >
< DialogDescription >
Block distractions and concentrate
</ DialogDescription >
</ DialogHeader >
< div className = "py-4 space-y-4" >
{ /* Duration */ }
< div className = "space-y-2" >
< Label className = "text-sm" >Duration</ Label >
< div className = "grid grid-cols-3 gap-2" >
{durations. map (( d ) => (
< button
key = {d.value}
onClick = {() => setDuration (d.value)}
className = { cn (
"py-2 rounded-md border text-sm font-medium transition-colors" ,
duration === d.value
? "border-primary bg-primary/5"
: "hover:border-muted-foreground/50"
)}
>
{d.label}
</ button >
))}
</ div >
</ div >
{ /* Settings */ }
< div className = "flex items-center justify-between" >
< Label htmlFor = "notifs" className = "text-sm" >
Block notifications
</ Label >
< Switch
id = "notifs"
checked = {blockNotifs}
onCheckedChange = {setBlockNotifs}
/>
</ div >
</ div >
< DialogFooter >
< Button onClick = {handleStart} className = "w-full" >
< Play className = "mr-2 h-4 w-4" />
Start Focus
</ Button >
</ DialogFooter >
</>
)}
</ DialogContent >
</ Dialog >
);
}