use button as a file picker

src/components/ics-file-picker.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import type React from "react"
+
+import { useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "lucide-react"
+
+interface IcsFilePickerProps {
+  onFileSelect?: (file: File) => void
+  className?: string
+  children?: React.ReactNode
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+  size?: "default" | "sm" | "lg" | "icon"
+}
+
+export function IcsFilePicker({
+  onFileSelect,
+  className,
+  children,
+  variant = "default",
+  size = "default",
+}: IcsFilePickerProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file && onFileSelect) {
+      onFileSelect(file)
+    }
+  }
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".ics"
+        onChange={handleFileChange}
+        className="hidden"
+        aria-hidden="true"
+      />
+      <Button onClick={handleButtonClick} variant={variant} size={size} className={className}>
+        {children || (
+          <>
+            <Calendar className="mr-2 h-4 w-4" />
+            Import Calendar
+          </>
+        )}
+      </Button>
+    </>
+  )
+}
+