working idb example

src/app/page.tsx

@@ -1,38 +1,61 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { nanoid } from 'nanoid'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-import { nanoid } from 'nanoid'
+import { type CalendarEvent } from '@/lib/types'
 
-type Event = {
-  id: string
-  title: string
-  start: string
-  end?: string
-}
+import { addEvent, deleteEvent, getAllEvents, clearEvents } from '@/lib/db'
 
 export default function HomePage() {
-  const [events, setEvents] = useState<Event[]>([])
+  const [events, setEvents] = useState<CalendarEvent[]>([])
   const [open, setOpen] = useState(false)
   const [title, setTitle] = useState('')
   const [start, setStart] = useState('')
 
-  const addEvent = () => {
-    setEvents([...events, { id: nanoid(), title, start }])
+  // Load events only in the browser
+  useEffect(() => {
+    (async () => {
+      const stored = await getAllEvents()
+      setEvents(stored)
+    })()
+  }, [])
+
+  const handleAdd = async () => {
+    const newEvent = { id: nanoid(), title, start }
+    await addEvent(newEvent)
+    setEvents(prev => [...prev, newEvent])
     setTitle('')
     setStart('')
     setOpen(false)
   }
 
+  const handleDelete = async (id: string) => {
+    await deleteEvent(id)
+    setEvents(prev => prev.filter(e => e.id !== id))
+  }
+
+  const handleClearAll = async () => {
+    await clearEvents()
+    setEvents([])
+  }
+
   return (
     <div>
-      <Button onClick={() => setOpen(true)}>Add Event</Button>
+      <div className="flex gap-2">
+        <Button onClick={() => setOpen(true)}>Add Event</Button>
+        {events.length > 0 && <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>}
+      </div>
+
       <ul className="mt-4 space-y-2">
         {events.map(ev => (
-          <li key={ev.id} className="border p-2 rounded bg-white shadow-sm">
-            <strong>{ev.title}</strong> — {ev.start}
+          <li key={ev.id} className="border p-2 rounded bg-white shadow-sm flex justify-between items-center">
+            <div>
+              <strong>{ev.title}</strong> — {ev.start}
+            </div>
+            <Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
           </li>
         ))}
       </ul>
@@ -45,7 +68,7 @@ export default function HomePage() {
           <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
           <Input type="date" value={start} onChange={e => setStart(e.target.value)} />
           <DialogFooter>
-            <Button onClick={addEvent}>Save</Button>
+            <Button onClick={handleAdd}>Save</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>