1 files changed, 48 insertions, 0 deletions
diff --git a/app/lib/camera/component/sjCamera.tsx b/app/lib/camera/component/sjCamera.tsx
new file mode 100644
index 0000000..5cc39ad
--- /dev/null
+++ b/app/lib/camera/component/sjCamera.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import useCameraStore from "../hooks/useCameraStore";
+import { IconButton } from "@mui/material";
+import { PendingActions } from "@mui/icons-material";
+
+const SjCamera: React.FC = () => {
+  const { setImageSj } = useCameraStore();
+  const handleSuratJalanCapture = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImageSj(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <>
+      <div className="p-4 py-8 items-center border-2 rounded-md shadow-sm w-[49%] text-center">
+        <input
+          type="file"
+          accept="image/*"
+          capture="environment"
+          onChange={handleSuratJalanCapture}
+          className="hidden"
+          id="suratJalanInput"
+        />
+        <label htmlFor="suratJalanInput" className="text-gray-600">
+          <IconButton
+            color="primary"
+            aria-label="upload picture"
+            component="span"
+          >
+            <PendingActions fontSize="large" />
+          </IconButton>
+          <br />
+          Foto Surat Jalan
+        </label>
+      </div>
+    </>
+  );
+};
+
+export default SjCamera;