feat: slicing modal for backoffice dashboard page

2025-03-31 01:33:18 +07:00
parent 3bbdba7015
commit ecec423d30
4 changed files with 267 additions and 2 deletions
@@ -0,0 +1,118 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalEditItem {
+  isOpen: boolean;
+  onClose: () => void;
+  onEditItem: () => void;
+  currentStep?: number;
+}
+
+const ModalEditItem = ({
+  isOpen,
+  onClose,
+  onEditItem,
+  currentStep = 1,
+}: IModalEditItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && (
+        <StepOne
+          nextStep={() => {
+            console.log('Next step');
+          }}
+          onClose={onClose}
+        />
+      )}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          resetStep={() => {
+            console.log('Reset step');
+          }}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
+  <>
+    <Modal.Header>
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Edit Item Gacha
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Silakan mengubah detail dari item yang diperlukan
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <InputForm
+          label="Nama Hadiah"
+          type="text"
+          placeholder="Masukkan Nama Hadiah"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Chance Rate"
+          type="text"
+          placeholder="Masukkan Chance Rate"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Foto Barang"
+          type="file"
+          placeholder=".jpg, .jpeg, atau .png"
+          size="lg"
+          className="w-full"
+        />
+      </div>
+
+      <Button variant="primary" size="lg" className="w-full">
+        Perbarui Item
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+interface IStepTwoProps {
+  onClose: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Update Item
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin dengan
+        <br /> perubahan yang dilakukan?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button variant="bordered" size="lg" className="w-full" onClick={onClose}>
+        Batal
+      </Button>
+      <Button variant="primary" size="lg" className="w-full">
+        Update
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalEditItem;