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 (
<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">
<CardTitle className="text-base">Recurrence Settings</CardTitle>
</CardHeader> */}
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="frequency">Repeats</Label>
<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>
{rec.freq !== "NONE" && (
<>
<div className="space-y-2">
<Label htmlFor="interval">
Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
{rec.interval > 1 ? "s" : ""})
</Label>
<Input
id="interval"
type="number"
min={1}
value={rec.interval}
onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
className="w-24"
/>
</div>
{rec.freq !== "NONE" && (
<>
{rec.freq === "WEEKLY" && (
<div className="space-y-2">
<Label htmlFor="interval">
Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
{rec.interval > 1 ? "s" : ""})
</Label>
<Label>Days of the week</Label>
<div className="flex flex-wrap gap-4">
{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
<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
id="interval"
id="count"
type="number"
min={1}
value={rec.interval}
onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
className="w-24"
placeholder="e.g. 10"
value={rec.count || ""}
onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
/>
</div>
{rec.freq === "WEEKLY" && (
<div className="space-y-2">
<Label>Days of the week</Label>
<div className="flex flex-wrap gap-4">
{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
<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
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 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>
</>
)}
</CardContent>
</Card>
</div>
</>
)}
</div>
)
}