refactored system settings

src/components/SettingForms/System/SystemFileUpload.tsx

@@ -0,0 +1,49 @@
+import { useFormikContext } from "formik";
+
+import FormGroup from "../components/FormGroup";
+import { toast } from "sonner";
+
+type SystemFileUploadProps = {
+  name: string;
+  selectedFile: File | null | undefined;
+};
+
+const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
+  const { setFieldValue } = useFormikContext();
+  const handleFileUploadClick = () => console.log(selectedFile);
+  return (
+    <div className="py-8 w-full">
+      <FormGroup>
+        <div className="flex-1 flex justify-end md:w-2/3">
+          <input
+            type="file"
+            name="softwareUpdate"
+            id="softwareUpdate"
+            className="file:px-10 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5 w-full max-w-xs"
+            onChange={(event) => {
+              const file = event.currentTarget.files?.[0];
+              if (!file) {
+                toast.error("No File selected");
+                return;
+              }
+
+              if (file?.size > 8 * 1024 * 1024)
+                toast.error("File is too large (max 8MB).");
+              setFieldValue(name, file);
+            }}
+          />
+        </div>
+      </FormGroup>
+      <button
+        type="button"
+        className="w-full max-w-md text-white bg-[#26B170]  hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        disabled={!selectedFile}
+        onClick={handleFileUploadClick}
+      >
+        Upload Software Update
+      </button>
+    </div>
+  );
+};
+
+export default SystemFileUpload;