feat(components): add ImagePicker file upload component

src/components/image-picker.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import type React from "react";
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { ImageIcon } from "lucide-react";
+
+interface ImagePickerProps {
+	onFileSelect?: (file: File) => void;
+	className?: string;
+	children?: React.ReactNode;
+	variant?:
+		| "default"
+		| "destructive"
+		| "outline"
+		| "secondary"
+		| "ghost"
+		| "link";
+	size?: "default" | "sm" | "lg" | "icon";
+	disabled?: boolean;
+}
+
+export function ImagePicker({
+	onFileSelect,
+	className,
+	children,
+	variant = "ghost",
+	size = "icon",
+	disabled = false,
+}: ImagePickerProps) {
+	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);
+		}
+		if (fileInputRef.current) {
+			fileInputRef.current.value = "";
+		}
+	};
+
+	return (
+		<>
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept="image/png,image/jpeg,image/webp"
+				onChange={handleFileChange}
+				className="hidden"
+			/>
+			<Button
+				onClick={handleButtonClick}
+				variant={variant}
+				size={size}
+				className={className}
+				disabled={disabled}
+				aria-label="Attach image"
+			>
+				{children || <ImageIcon className="h-4 w-4" />}
+			</Button>
+		</>
+	);
+}