update recurrence picker with shadcn components

src/components/recurrence-picker.tsx

@@ -1,10 +1,14 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
-import { Input } from '@/components/ui/input'
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 type Recurrence = {
-  freq: 'NONE' | 'DAILY' | 'WEEKLY' | 'MONTHLY'
+  freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY"
   interval: number
   byDay?: string[]
   count?: number
@@ -20,110 +24,137 @@ export function RecurrencePicker({ value, onChange }: Props) {
   const [rec, setRec] = useState<Recurrence>(() => {
     // If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
     if (value) {
-      const parts = Object.fromEntries(
-        value.split(';').map(p => p.split('='))
-      )
+      const parts = Object.fromEntries(value.split(";").map((p) => p.split("=")))
       return {
-        freq: parts.FREQ || 'NONE',
-        interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : 1,
-        byDay: parts.BYDAY ? parts.BYDAY.split(',') : [],
-        count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
-        until: parts.UNTIL
+        freq: parts.FREQ || "NONE",
+        interval: parts.INTERVAL ? Number.parseInt(parts.INTERVAL, 10) : 1,
+        byDay: parts.BYDAY ? parts.BYDAY.split(",") : [],
+        count: parts.COUNT ? Number.parseInt(parts.COUNT, 10) : undefined,
+        until: parts.UNTIL,
       }
     }
-    return { freq: 'NONE', interval: 1 }
+    return { freq: "NONE", interval: 1 }
   })
 
   const update = (updates: Partial<Recurrence>) => {
     const newRec = { ...rec, ...updates }
     setRec(newRec)
 
-    if (newRec.freq === 'NONE') {
+    if (newRec.freq === "NONE") {
       onChange(undefined)
       return
     }
 
     // Build RRULE string
     let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`
-    if (newRec.freq === 'WEEKLY' && newRec.byDay?.length) {
-      rrule += `;BYDAY=${newRec.byDay.join(',')}`
+    if (newRec.freq === "WEEKLY" && newRec.byDay?.length) {
+      rrule += `;BYDAY=${newRec.byDay.join(",")}`
     }
     if (newRec.count) rrule += `;COUNT=${newRec.count}`
-    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, '')}T000000Z`
+    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, "")}T000000Z`
 
     onChange(rrule)
   }
 
   const toggleDay = (day: string) => {
     const byDay = rec.byDay || []
-    const newByDay = byDay.includes(day)
-      ? byDay.filter(d => d !== day)
-      : [...byDay, day]
+    const newByDay = byDay.includes(day) ? byDay.filter((d) => d !== day) : [...byDay, day]
     update({ byDay: newByDay })
   }
 
+  const dayLabels = {
+    MO: "Mon",
+    TU: "Tue",
+    WE: "Wed",
+    TH: "Thu",
+    FR: "Fri",
+    SA: "Sat",
+    SU: "Sun",
+  }
+
   return (
-    <div className="space-y-2 border rounded p-2 mt-2 bg-gray-50">
-      <label className="block font-semibold text-sm">Repeats</label>
-      <select
-        className="border p-1 rounded w-full"
-        value={rec.freq}
-        onChange={e => update({ freq: e.target.value as "NONE" | "DAILY" | "WEEKLY" | "MONTHLY" | undefined })}
-      >
-        <option value="NONE">Does not repeat</option>
-        <option value="DAILY">Daily</option>
-        <option value="WEEKLY">Weekly</option>
-        <option value="MONTHLY">Monthly</option>
-      </select>
+    <Card className="w-full">
 
-      {rec.freq !== 'NONE' && (
-        <>
-          <label className="block text-sm">
-            Interval (every N {rec.freq === 'DAILY' ? 'days' : rec.freq === 'WEEKLY' ? 'weeks' : 'months'})
-          </label>
-          <Input
-            type="number"
-            min={1}
-            value={rec.interval}
-            onChange={e => update({ interval: parseInt(e.target.value, 10) || 1 })}
-          />
+      {/* <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 === 'WEEKLY' && (
-            <div className="flex gap-2 mt-2">
-              {['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'].map(day => (
-                <label key={day} className="flex items-center gap-1">
-                  <input
-                    type="checkbox"
-                    checked={rec.byDay?.includes(day)}
-                    onChange={() => toggleDay(day)}
-                  />
-                  {day}
-                </label>
-              ))}
-            </div>
-          )}
-
-          <div className="flex gap-2 mt-2">
-            <div>
-              <label className="text-sm">End after count</label>
+        {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"
-                placeholder="e.g. 10"
-                value={rec.count || ''}
-                onChange={e => update({ count: e.target.value ? parseInt(e.target.value, 10) : undefined })}
+                min={1}
+                value={rec.interval}
+                onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
+                className="w-24"
               />
             </div>
-            <div>
-              <label className="text-sm">End by date</label>
-              <Input
-                type="date"
-                value={rec.until || ''}
-                onChange={e => update({ until: e.target.value || undefined })}
-              />
+
+            {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>
-          </div>
-        </>
-      )}
-    </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
   )
 }