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