"use client";
import { useState } from "react";
import { Check, Clock } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
const statuses = [
{ id: "available", label: "Available", emoji: "🟢" },
{ id: "busy", label: "Busy", emoji: "🔴" },
{ id: "away", label: "Away", emoji: "🟡" },
{ id: "dnd", label: "Do not disturb", emoji: "⛔" },
{ id: "invisible", label: "Invisible", emoji: "⚫" },
];
const durations = [
{ value: "30", label: "30 min" },
{ value: "60", label: "1 hour" },
{ value: "240", label: "4 hours" },
{ value: "today", label: "Today" },
];
export const title = "React Dialog Block Availability Status";
export default function DialogAvailabilityStatus() {
const [open, setOpen] = useState(false);
const [status, setStatus] = useState("available");
const [message, setMessage] = useState("");
const [duration, setDuration] = useState("60");
const [saved, setSaved] = useState(false);
const selectedStatus = statuses.find((s) => s.id === status);
const handleSave = () => {
setSaved(true);
setTimeout(() => {
setOpen(false);
setTimeout(() => setSaved(false), 200);
}, 800);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<span className="mr-2">🟢</span>
Set Status
</Button>
</DialogTrigger>
</div>
<DialogContent style={{ maxWidth: "320px" }}>
{saved ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<span className="text-4xl">{selectedStatus?.emoji}</span>
<h3 className="mt-4 text-lg font-medium">
{selectedStatus?.label}
</h3>
{message && (
<p className="mt-1 text-sm text-muted-foreground">{message}</p>
)}
</div>
) : (
<>
<DialogHeader>
<DialogTitle>Set your status</DialogTitle>
</DialogHeader>
<div className="py-4 space-y-4">
{/* Status options - compact grid */}
<div className="grid grid-cols-2 gap-2">
{statuses.map((s) => (
<button
key={s.id}
onClick={() => setStatus(s.id)}
className={cn(
"flex items-center gap-2 p-2.5 rounded-md transition-colors text-left",
status === s.id
? "bg-primary/5 border border-primary"
: "hover:bg-muted border border-transparent"
)}
>
<span className="text-sm">{s.emoji}</span>
<span className="text-sm">{s.label}</span>
</button>
))}
</div>
{/* Message input */}
<Input
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="What's happening?"
/>
{/* Duration chips */}
<div className="flex items-center gap-2">
<Clock className="h-4 w-4 text-muted-foreground" />
<div className="flex gap-1.5 flex-1">
{durations.map((d) => (
<button
key={d.value}
onClick={() => setDuration(d.value)}
className={cn(
"px-2.5 py-1 rounded-full text-xs transition-colors",
duration === d.value
? "bg-primary text-primary-foreground"
: "bg-muted hover:bg-muted/80"
)}
>
{d.label}
</button>
))}
</div>
</div>
</div>
<Button onClick={handleSave} className="w-full">
Save
</Button>
</>
)}
</DialogContent>
</Dialog>
);
}