feat: create db-entry on event-form-submit

src/components/time-picker.tsx

@@ -16,12 +16,19 @@ import {
 export default function TimePicker({
   dateLabel = 'Date',
   timeLabel = 'Time',
+  date,
+  setDate,
+  time,
+  setTime,
 }: {
   dateLabel?: string;
   timeLabel?: string;
+  date?: Date;
+  setDate?: (date: Date | undefined) => void;
+  time?: string;
+  setTime?: (time: string) => void;
 }) {
   const [open, setOpen] = React.useState(false);
-  const [date, setDate] = React.useState<Date | undefined>(undefined);
 
   return (
     <div className='flex gap-4'>
@@ -45,8 +52,8 @@ export default function TimePicker({
               mode='single'
               selected={date}
               captionLayout='dropdown'
-              onSelect={(date) => {
-                setDate(date);
+              onSelect={(d) => {
+                setDate?.(d);
                 setOpen(false);
               }}
               modifiers={{
@@ -71,11 +78,8 @@ export default function TimePicker({
           type='time'
           id='time'
           step='60'
-          defaultValue={new Date().toLocaleTimeString('en-GB', {
-            hour12: false,
-            hour: '2-digit',
-            minute: '2-digit',
-          })}
+          value={time}
+          onChange={(e) => setTime?.(e.target.value)}
           className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
         />
       </div>