From 52024ab52724b45c08f437f9f10805adefe2bf0e Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 21 Sep 2024 15:23:23 +0000
Subject: feature(web): Move bookmark imports into settings

---
 apps/web/components/ui/file-picker-button.tsx | 51 +++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 apps/web/components/ui/file-picker-button.tsx

(limited to 'apps/web/components/ui')

diff --git a/apps/web/components/ui/file-picker-button.tsx b/apps/web/components/ui/file-picker-button.tsx
new file mode 100644
index 00000000..ccac1643
--- /dev/null
+++ b/apps/web/components/ui/file-picker-button.tsx
@@ -0,0 +1,51 @@
+import React, { ChangeEvent, useRef } from "react";
+
+import { Button, ButtonProps } from "./button";
+
+interface FilePickerButtonProps extends Omit<ButtonProps, "onClick"> {
+  onFileSelect?: (file: File) => void;
+  accept?: string;
+  multiple?: boolean;
+}
+
+const FilePickerButton: React.FC<FilePickerButtonProps> = ({
+  onFileSelect,
+  accept,
+  multiple = false,
+  ...buttonProps
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      if (onFileSelect) {
+        if (multiple) {
+          Array.from(files).forEach(onFileSelect);
+        } else {
+          onFileSelect(files[0]);
+        }
+      }
+    }
+  };
+
+  return (
+    <div>
+      <Button onClick={handleButtonClick} {...buttonProps} />
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        className="hidden"
+        accept={accept}
+        multiple={multiple}
+      />
+    </div>
+  );
+};
+
+export default FilePickerButton;
-- 
cgit v1.2.3-70-g09d2