old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust recurrence picker to not be a card

Browse Source
This commit is contained in:
Dmytro Stanchiev
2025-08-19 05:41:28 -04:00
parent ef035e2b7d
commit 6818046d58
1 changed files with 69 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/recurrence-picker.tsx
View File

@@ -73,88 +73,82 @@ export function RecurrencePicker({ value, onChange }: Props) {
} }
return ( return (
<Card className="w-full"> <div className="">
<Label htmlFor="frequency" className="pt-4 pb-2 pl-1">Repeats</Label>
<div className="space-y-2">
<Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
<SelectTrigger id="frequency">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="NONE">Does not repeat</SelectItem>
<SelectItem value="DAILY">Daily</SelectItem>
<SelectItem value="WEEKLY">Weekly</SelectItem>
<SelectItem value="MONTHLY">Monthly</SelectItem>
</SelectContent>
</Select>
</div>
{/* <CardHeader className="pb-4"> {rec.freq !== "NONE" && (
<CardTitle className="text-base">Recurrence Settings</CardTitle> <>
</CardHeader> */} <div className="space-y-2">
<CardContent className="space-y-4"> <Label htmlFor="interval">
<div className="space-y-2"> Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
<Label htmlFor="frequency">Repeats</Label> {rec.interval > 1 ? "s" : ""})
<Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}> </Label>
<SelectTrigger id="frequency"> <Input
<SelectValue /> id="interval"
</SelectTrigger> type="number"
<SelectContent> min={1}
<SelectItem value="NONE">Does not repeat</SelectItem> value={rec.interval}
<SelectItem value="DAILY">Daily</SelectItem> onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
<SelectItem value="WEEKLY">Weekly</SelectItem> className="w-24"
<SelectItem value="MONTHLY">Monthly</SelectItem> />
</SelectContent> </div>
</Select>
</div>
{rec.freq !== "NONE" && ( {rec.freq === "WEEKLY" && (
<>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="interval"> <Label>Days of the week</Label>
Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"} <div className="flex flex-wrap gap-4">
{rec.interval > 1 ? "s" : ""}) {["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
</Label> <div key={day} className="flex items-center space-x-2">
<Checkbox
id={day}
checked={rec.byDay?.includes(day) || false}
onCheckedChange={() => toggleDay(day)}
/>
<Label htmlFor={day} className="text-sm font-normal">
{dayLabels[day as keyof typeof dayLabels]}
</Label>
</div>
))}
</div>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="count">End after (occurrences)</Label>
<Input <Input
id="interval" id="count"
type="number" type="number"
min={1} placeholder="e.g. 10"
value={rec.interval} value={rec.count || ""}
onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })} onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
className="w-24"
/> />
</div> </div>
<div className="space-y-2">
{rec.freq === "WEEKLY" && ( <Label htmlFor="until">End by date</Label>
<div className="space-y-2"> <Input
<Label>Days of the week</Label> id="until"
<div className="flex flex-wrap gap-4"> type="date"
{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => ( value={rec.until || ""}
<div key={day} className="flex items-center space-x-2"> onChange={(e) => update({ until: e.target.value || undefined })}
<Checkbox />
id={day}
checked={rec.byDay?.includes(day) || false}
onCheckedChange={() => toggleDay(day)}
/>
<Label htmlFor={day} className="text-sm font-normal">
{dayLabels[day as keyof typeof dayLabels]}
</Label>
</div>
))}
</div>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="count">End after (occurrences)</Label>
<Input
id="count"
type="number"
placeholder="e.g. 10"
value={rec.count || ""}
onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
/>
</div>
<div className="space-y-2">
<Label htmlFor="until">End by date</Label>
<Input
id="until"
type="date"
value={rec.until || ""}
onChange={(e) => update({ until: e.target.value || undefined })}
/>
</div>
</div> </div>
</> </div>
)} </>
</CardContent> )}
</Card> </div>
) )
} }