"use client";
import { useState } from "react";
import { Package, Check, Truck, MapPin, Clock } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
const steps = [
{ id: "confirmed", label: "Confirmed", time: "Dec 8, 10:30 AM", done: true },
{ id: "processing", label: "Processing", time: "Dec 8, 2:15 PM", done: true },
{ id: "shipped", label: "Shipped", time: "Dec 9, 9:00 AM", done: true },
{ id: "transit", label: "In Transit", time: "Dec 10, 11:45 AM", done: true, current: true },
{ id: "delivered", label: "Delivered", time: "Expected Dec 11", done: false },
];
export const title = "React Dialog Block Order Tracking";
export default function DialogOrderTracking() {
const [open, setOpen] = useState(false);
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Package className="mr-2 h-4 w-4" />
Track Order
</Button>
</DialogTrigger>
</div>
<DialogContent style={{ maxWidth: "360px" }}>
<DialogHeader>
<DialogTitle>Order #38492</DialogTitle>
</DialogHeader>
<div className="py-4 space-y-6">
{/* Delivery estimate */}
<div className="flex items-center gap-3 p-3 rounded-lg border">
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
<Truck className="h-5 w-5 text-primary" />
</div>
<div>
<p className="text-sm font-medium">Arriving Tomorrow</p>
<p className="text-xs text-muted-foreground">
Wednesday, December 11
</p>
</div>
</div>
{/* Timeline */}
<div className="space-y-0">
{steps.map((step, i) => (
<div key={step.id} className="flex gap-3">
{/* Line and dot */}
<div className="flex flex-col items-center">
<div
className={cn(
"h-6 w-6 rounded-full flex items-center justify-center border-2",
step.done
? "bg-primary border-primary text-primary-foreground"
: "border-muted-foreground/30"
)}
>
{step.done && <Check className="h-3 w-3" />}
</div>
{i < steps.length - 1 && (
<div
className={cn(
"w-0.5 h-8",
steps[i + 1].done ? "bg-primary" : "bg-muted"
)}
/>
)}
</div>
{/* Content */}
<div className="pb-8">
<p
className={cn(
"text-sm font-medium",
step.current && "text-primary"
)}
>
{step.label}
</p>
<p className="text-xs text-muted-foreground">{step.time}</p>
</div>
</div>
))}
</div>
{/* Actions */}
<div className="flex gap-2">
<Button variant="outline" className="flex-1" onClick={() => setOpen(false)}>
<MapPin className="mr-2 h-4 w-4" />
View Map
</Button>
<Button variant="outline" className="flex-1" onClick={() => setOpen(false)}>
<Clock className="mr-2 h-4 w-4" />
Remind Me
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}