133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
"use client"
|
||
|
||
import * as React from "react"
|
||
import { toast } from "sonner"
|
||
|
||
import { useIsMobile } from "@/hooks/use-mobile"
|
||
import { Badge } from "@/styles/base-rhea/ui/badge"
|
||
import { Button } from "@/styles/base-rhea/ui/button"
|
||
import {
|
||
Drawer,
|
||
DrawerClose,
|
||
DrawerContent,
|
||
DrawerDescription,
|
||
DrawerFooter,
|
||
DrawerHeader,
|
||
DrawerTitle,
|
||
DrawerTrigger,
|
||
} from "@/styles/base-rhea/ui/drawer"
|
||
import {
|
||
Field,
|
||
FieldContent,
|
||
FieldDescription,
|
||
FieldLabel,
|
||
FieldTitle,
|
||
} from "@/styles/base-rhea/ui/field"
|
||
import { RadioGroup, RadioGroupItem } from "@/styles/base-rhea/ui/radio-group"
|
||
|
||
const deliveryTimes = [
|
||
{
|
||
value: "asap",
|
||
id: "delivery-asap",
|
||
label: "Standard delivery",
|
||
description: "25–35 min · Driver assigned now",
|
||
badge: "Fastest",
|
||
},
|
||
{
|
||
value: "5-00",
|
||
id: "delivery-5-00",
|
||
label: "5:00 PM – 5:15 PM",
|
||
description: "Prep starts at 4:45 PM",
|
||
},
|
||
{
|
||
value: "5-30",
|
||
id: "delivery-5-30",
|
||
label: "5:30 PM – 5:45 PM",
|
||
description: "Good if you're heading home",
|
||
},
|
||
{
|
||
value: "6-00",
|
||
id: "delivery-6-00",
|
||
label: "6:00 PM – 6:15 PM",
|
||
description: "Most popular · High demand",
|
||
},
|
||
{
|
||
value: "6-30",
|
||
id: "delivery-6-30",
|
||
label: "6:30 PM – 6:45 PM",
|
||
description: "Last slot before kitchen closes",
|
||
},
|
||
]
|
||
|
||
export function DrawerDemo() {
|
||
const [open, setOpen] = React.useState(false)
|
||
const [deliveryTime, setDeliveryTime] = React.useState("asap")
|
||
const isMobile = useIsMobile()
|
||
|
||
function handleConfirm() {
|
||
const selected = deliveryTimes.find((time) => time.value === deliveryTime)
|
||
|
||
if (!selected) {
|
||
return
|
||
}
|
||
|
||
setOpen(false)
|
||
toast("Delivery time confirmed", {
|
||
description: selected.label,
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Drawer
|
||
open={open}
|
||
onOpenChange={setOpen}
|
||
showSwipeHandle={isMobile}
|
||
swipeDirection={isMobile ? "down" : "right"}
|
||
>
|
||
<DrawerTrigger render={<Button variant="secondary" />}>
|
||
Open Drawer
|
||
</DrawerTrigger>
|
||
<DrawerContent>
|
||
<DrawerHeader>
|
||
<DrawerTitle>Pick a delivery time</DrawerTitle>
|
||
<DrawerDescription>
|
||
We'll prepare your order as soon as possible.
|
||
</DrawerDescription>
|
||
</DrawerHeader>
|
||
<div className="flex-1 scroll-fade overflow-y-auto p-4">
|
||
<RadioGroup
|
||
value={deliveryTime}
|
||
onValueChange={setDeliveryTime}
|
||
className="gap-2"
|
||
>
|
||
{deliveryTimes.map((time) => (
|
||
<FieldLabel key={time.value} htmlFor={time.id}>
|
||
<Field orientation="horizontal">
|
||
<FieldContent>
|
||
<FieldTitle className="flex items-center gap-2">
|
||
{time.label}
|
||
{time.badge ? (
|
||
<Badge variant="secondary">{time.badge}</Badge>
|
||
) : null}
|
||
</FieldTitle>
|
||
<FieldDescription>{time.description}</FieldDescription>
|
||
</FieldContent>
|
||
<RadioGroupItem value={time.value} id={time.id} />
|
||
</Field>
|
||
</FieldLabel>
|
||
))}
|
||
</RadioGroup>
|
||
</div>
|
||
<DrawerFooter>
|
||
<Button onClick={handleConfirm} className="h-[34px]">
|
||
Confirm Delivery Time
|
||
</Button>
|
||
<DrawerClose render={<Button variant="outline" />}>
|
||
Cancel
|
||
</DrawerClose>
|
||
</DrawerFooter>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
)
|
||
}
|