File Input Component Made

src/components/fileInput/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+const FileInput = ({
+    title
+}) => {
+    return (
+        <div >
+            
+            <input type='file' className="hidden" id="file"/>
+            <label for="file" className="flex flex-col items-center border-dotted border-2 border-gray-300 rounded-lg p-4 cursor-pointer">
+            <div>
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44001 10.9 3.20001L12.4 5.20001C12.78 5.70001 13 6 14 6H17C21 6 22 7 22 11V13" stroke="rgba(110,132,159,0.3)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M13.7601 18.32C11.4101 18.49 11.4101 21.89 13.7601 22.06H19.3201C19.9901 22.06 20.6501 21.81 21.1401 21.36C22.7901 19.92 21.91 17.04 19.74 16.77C18.96 12.08 12.1801 13.86 13.7801 18.33" stroke="rgba(110,132,159,0.3)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </div>
+            <h1 className="text-xl font-bold text-gray-400">{title}</h1>
+            <p className="text-sm leading-7 text-gray-400">فایل خود را بکشید و اینجا رها کنید</p>
+            <p className="bg-gray-200 p-2 rounded text-sm mt-1 text-gray-500">انتخاب فایل</p>
+            </label>
+        </div>
+    )
+}
+export default FileInput;