အသုံးပြုပုံ
automatic သည် desktop တွင် Popover ကို အသုံးပြုပြီး၊ mobile တွင် Drawer ကို အသုံးပြုပါသည်။ type က raw မဟုတ်ပါက trigger ကို ပေးရပါသည်။
TSXcalendar
1import { Button, Calendar } from "@quan-erp/shared-ui";
2import { Calendar as CalendarIcon } from "lucide-react";
3
4// Raw (standard Shadcn)
5<Calendar mode="single" selected={date} onSelect={setDate} />
6
7// Automatic responsive overlay
8<Calendar
9 type="automatic"
10 mode="single"
11 selected={date}
12 onSelect={setDate}
13 trigger={
14 <Button variant="outline">
15 <CalendarIcon className="mr-2 h-4 w-4" />
16 {date ? date.toLocaleDateString() : "Pick a date"}
17 </Button>
18 }
19/>