Merge pull request #5 from IMPHNEN/ModalsGacha

Modals gacha
2025-03-17 18:34:21 +07:00
parent d20f0d89e5 4ac1278a33
commit c8935b885e
7 changed files with 363 additions and 1 deletions
@@ -1,7 +1,9 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { ModalsGacha } from '@imphnen-frontend-service/ui/organisms';
 import { cn } from '@imphnen-frontend-service/utils';
-import { FC, Fragment, ReactElement, useEffect } from 'react';
+import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';

 interface GachaItemProps {
  src: string;
@@ -10,6 +12,10 @@ interface GachaItemProps {
 }

 export const Components: FC = (): ReactElement => {
+  // Pinjem
+  const [showModal, setShowModal] = useState(false);
+  //
+
  const scrollToRoulette = () => {
    const rouletteSection = document.getElementById('roulette');
    if (rouletteSection) {
@@ -214,6 +220,19 @@ export const Components: FC = (): ReactElement => {
      </section>
      {/* Diffuser & Cloud */}
      <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
+
+      {/**Izin pake untuk debug modals gacha */}
+      <div>
+        <p>Debug : Test Modals Gacha</p>
+        <Button onClick={
+          () => setShowModal(true)
+        }>Tekan</Button>
+      </div>
+      {showModal && createPortal(
+        <ModalsGacha></ModalsGacha>,
+        document.body
+      )}
+      {/**Izin pake untuk debug modals gacha */}
    </Fragment>
  );
 };
@@ -1 +1,2 @@
 export * from './navbar';
+export * from "./modals-gacha";
@@ -0,0 +1 @@
+export * from './modals-gacha';
@@ -0,0 +1,41 @@
+import { FC, ReactElement } from 'react';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+export const ModalsGacha: FC = (): ReactElement => {
+    return (
+        <div className="fixed w-[100vw] overflow-y-auto h-[100vh] z-[100] top-0 bg-black/20 margin-[auto] flex md:items-center justify-center">
+            <div className='w-[256px] min-h-[797px] md:w-[692px] md:min-h-[505px] lg:w-[831px] lg:min-h-[669px] rounded-xl flex flex-col md:flex-row'>
+                <div className='md:min-h-full bg-primary-500 rounded-t-xl md:rounded-l-xl md:rounded-t-none lg:w-[442px] p-[36px] gap-5 md:p-[44px] md:gap-6 lg:p-[60px] lg:gap-8 flex flex-col items-center'>
+                    <div className='flex flex-col'>
+                        <h4 className='text-center text-2xl md:text-4xl text-white'>Yeay</h4>
+                        <h5 className='text-center text-xl md:text-3xl text-white'>Kamu Mendapatkan</h5>
+                    </div>
+                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTgDXJpZVMAfvzJqGiGgsc7n16iNKo9_Wmmw&s" alt="Prize" />
+                    <h5 className='text-center font-semibold text-2xl md:text-3xl text-white'>Istri Anime</h5>
+                    <div className='flex flex-col gap-1'>
+                        <h5 className='text-center text-xl md:text-2xl text-white'>Gak mau yang ini ?</h5>
+                        <Button variant='secondary'>Reroll</Button>
+                        <h6 className='text-center text-lg md:text-1xl text-white'>Free spin 2 Roll Left</h6>
+                    </div>
+                </div>
+                <div className='md:min-h-full bg-white rounded-b-xl md:rounded-b-none md:rounded-r-xl md:w-[382px] py-[36px] px-[30px] md:py-[44px] md:px-[36px] lg:w-[409px] lg:py-[60px] lg:px-[50px] flex flex-col items-center justify-center gap-6 md:gap-7 lg:gap-10'>
+                    <img src="/logos/logo.svg" alt="Logos" width={149} />
+                    <div className='flex flex-col'>
+                        <h4 className='text-center text-3xl text-primary-500 font-semibold'>Form Order</h4>
+                        <h5 className='text-center text-1xl text-primary-500'>Isi data di bawah untuk proses & pengiriman</h5>
+                        <form action="#">
+                            <p className='pt-4'>Nomor Transaksi</p>
+                            <Input type="text" className='w-full'></Input>
+                            <p className='pt-4'>Nama Lengkap</p>
+                            <Input type="text" className='w-full'></Input>
+                            <p className='pt-4'>Email</p>
+                            <Input type="email" className='w-full'></Input>
+                        </form>
+                    </div>
+                    <Button>Proses Pengiriman</Button>
+                </div>
+            </div>
+        </div>
+    )
+}
@@ -5643,6 +5643,46 @@
        "node": ">=8"
      }
    },
+    "node_modules/@nx/module-federation/node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@nx/module-federation/node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/@nx/module-federation/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
    "node_modules/@nx/module-federation/node_modules/semver": {
      "version": "7.6.3",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -6417,6 +6457,255 @@
        "win32"
      ]
    },
+    "node_modules/@rspack/binding": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding/-/binding-1.2.8.tgz",
+      "integrity": "sha512-T3FMB3N9P1AbSAryfkSRJkPtmeSYs/Gj9zUZoPz1ckPEIcWZmpUOQbJylldjbw5waxtCL1haHNbi0pcSvxiaJw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "optionalDependencies": {
+        "@rspack/binding-darwin-arm64": "1.2.8",
+        "@rspack/binding-darwin-x64": "1.2.8",
+        "@rspack/binding-linux-arm64-gnu": "1.2.8",
+        "@rspack/binding-linux-arm64-musl": "1.2.8",
+        "@rspack/binding-linux-x64-gnu": "1.2.8",
+        "@rspack/binding-linux-x64-musl": "1.2.8",
+        "@rspack/binding-win32-arm64-msvc": "1.2.8",
+        "@rspack/binding-win32-ia32-msvc": "1.2.8",
+        "@rspack/binding-win32-x64-msvc": "1.2.8"
+      }
+    },
+    "node_modules/@rspack/binding-darwin-arm64": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-arm64/-/binding-darwin-arm64-1.2.8.tgz",
+      "integrity": "sha512-bDlrlroY3iMlzna/3i1gD6eRmhJW2zRyC3Ov6aR1micshVQ9RteigYZWkjZuQfyC5Z8dCcLUQJVojz+pqp0JXg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-darwin-x64": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-x64/-/binding-darwin-x64-1.2.8.tgz",
+      "integrity": "sha512-0/qOVbMuzZ+WbtDa4TbH46R4vph/W6MHcXbrXDO+vpdTMFDVJ64DnZXT7aqvGcY+7vTCIGm0GT+6ooR4KaIX8A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-linux-arm64-gnu": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.8.tgz",
+      "integrity": "sha512-En/SMl45s19iUVb1/ZDFQvFDxIjnlfk7yqV3drMWWAL5HSgksNejaTIFTO52aoohIBbmwuk5wSGcbU0G0IFiPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-linux-arm64-musl": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.8.tgz",
+      "integrity": "sha512-N1oZsXfJ9VLLcK7p1PS65cxLYQCZ7iqHW2OP6Ew2+hlz/d1hzngxgzrtZMCXFOHXDvTzVu5ff6jGS2v7+zv2tA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-linux-x64-gnu": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.8.tgz",
+      "integrity": "sha512-BdPaepoLKuaVwip4QK/nGqNi1xpbCWSxiycPbKRrGqKgt/QGihxxFgiqr4EpWQVIJNIMy4nCsg4arO0+H1KWGQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-linux-x64-musl": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.8.tgz",
+      "integrity": "sha512-GFv0Bod268OcXIcjeLoPlK0oz8rClEIxIRFkz+ejhbvfCwRJ+Fd+EKaaKQTBfZQujPqc0h2GctIF25nN5pFTmA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-win32-arm64-msvc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.8.tgz",
+      "integrity": "sha512-aEU+uJdbvJJGrzzAsjbjrPeNbG/bcG8JoXK2kSsUB+/sWHTIkHX0AQ3oX3aV/lcLKgZWrUxLAfLoCXEnIHMEyQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-win32-ia32-msvc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.2.8.tgz",
+      "integrity": "sha512-GHYzNOSoiLyG9elLTmMqADJMQzjll+co4irp5AgZ+KHG9EVq0qEHxDqDIJxZnUA15U8JDvCgo6YAo3T0BFEL0Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/binding-win32-x64-msvc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.8.tgz",
+      "integrity": "sha512-EigKLhKLH1kfv1e/ZgXuSKlIjkbyneJtiLbNDz7EeEVFGV1XMM6bsCea1sb2WOxsPYiOX4Q5JmR1j1KGrZS/LA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rspack/core": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@rspack/core/-/core-1.2.8.tgz",
+      "integrity": "sha512-ppj3uQQtkhgrYDLrUqb33YbpNEZCpAudpfVuOHGsvUrAnu1PijbfJJymoA5ZvUhM+HNMvPI5D1ie97TXyb0UVg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@module-federation/runtime-tools": "0.8.4",
+        "@rspack/binding": "1.2.8",
+        "@rspack/lite-tapable": "1.0.1",
+        "caniuse-lite": "^1.0.30001702"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "@rspack/tracing": "^1.x",
+        "@swc/helpers": ">=0.5.1"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/tracing": {
+          "optional": true
+        },
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rspack/core/node_modules/@module-federation/error-codes": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.8.4.tgz",
+      "integrity": "sha512-55LYmrDdKb4jt+qr8qE8U3al62ZANp3FhfVaNPOaAmdTh0jHdD8M3yf5HKFlr5xVkVO4eV/F/J2NCfpbh+pEXQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@rspack/core/node_modules/@module-federation/runtime": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.8.4.tgz",
+      "integrity": "sha512-yZeZ7z2Rx4gv/0E97oLTF3V6N25vglmwXGgoeju/W2YjsFvWzVtCDI7zRRb0mJhU6+jmSM8jP1DeQGbea/AiZQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@module-federation/error-codes": "0.8.4",
+        "@module-federation/sdk": "0.8.4"
+      }
+    },
+    "node_modules/@rspack/core/node_modules/@module-federation/runtime-tools": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime-tools/-/runtime-tools-0.8.4.tgz",
+      "integrity": "sha512-fjVOsItJ1u5YY6E9FnS56UDwZgqEQUrWFnouRiPtK123LUuqUI9FH4redZoKWlE1PB0ir1Z3tnqy8eFYzPO38Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@module-federation/runtime": "0.8.4",
+        "@module-federation/webpack-bundler-runtime": "0.8.4"
+      }
+    },
+    "node_modules/@rspack/core/node_modules/@module-federation/sdk": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.8.4.tgz",
+      "integrity": "sha512-waABomIjg/5m1rPDBWYG4KUhS5r7OUUY7S+avpaVIY/tkPWB3ibRDKy2dNLLAMaLKq0u+B1qIdEp4NIWkqhqpg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "isomorphic-rslog": "0.0.6"
+      }
+    },
+    "node_modules/@rspack/core/node_modules/@module-federation/webpack-bundler-runtime": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@module-federation/webpack-bundler-runtime/-/webpack-bundler-runtime-0.8.4.tgz",
+      "integrity": "sha512-HggROJhvHPUX7uqBD/XlajGygMNM1DG0+4OAkk8MBQe4a18QzrRNzZt6XQbRTSG4OaEoyRWhQHvYD3Yps405tQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@module-federation/runtime": "0.8.4",
+        "@module-federation/sdk": "0.8.4"
+      }
+    },
+    "node_modules/@rspack/lite-tapable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.0.1.tgz",
+      "integrity": "sha512-VynGOEsVw2s8TAlLf/uESfrgfrq2+rcXB1muPJYBWbsm1Oa6r5qVQhjA5ggM6z/coYPrsVMgovl3Ff7Q7OCp1w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
    "node_modules/@rtsao/scc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -17653,6 +17942,17 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/isomorphic-rslog": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/isomorphic-rslog/-/isomorphic-rslog-0.0.6.tgz",
+      "integrity": "sha512-HM0q6XqQ93psDlqvuViNs/Ea3hAyGDkIdVAHlrEocjjAwGrs1fZ+EdQjS9eUPacnYB7Y8SoDdSY3H8p3ce205A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=14.17.6"
+      }
+    },
    "node_modules/isomorphic-ws": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",