Refactor event management into reusable components

- Extract EventCard, EventsList, and event dialog into separate components
- Add new AI toolbar and drag-drop container components
- Simplify main page.tsx by removing inline component definitions
- Improve code organization and maintainability

src/components/drag-drop-container.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react'
+import { toast } from 'sonner'
+
+interface DragDropContainerProps {
+  children: ReactNode
+  isDragOver: boolean
+  setIsDragOver: (isDragOver: boolean) => void
+  onImport: (file: File) => void
+}
+
+export const DragDropContainer = ({
+  children,
+  isDragOver,
+  setIsDragOver,
+  onImport
+}: DragDropContainerProps) => {
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(true)
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    if (e.dataTransfer.files?.length) {
+      const file = e.dataTransfer.files[0]
+      if (file.name.endsWith('.ics')) {
+        onImport(file)
+      } else {
+        toast.warning('Please drop an .ics file')
+      }
+    }
+  }
+
+  return (
+    <div 
+      onDragOver={handleDragOver} 
+      onDragLeave={handleDragLeave} 
+      onDrop={handleDrop}
+      className={`p-4 min-h-[80vh] flex flex-col rounded border-2 border-dashed transition ${
+        isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-700'
+      }`}
+    >
+      {children}
+      <div className='mt-auto w-full pb-4 text-gray-400'>
+        <div className='max-w-fit m-auto'>Drag & Drop *.ics here</div>
+      </div>
+    </div>
+  )
+}