MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: gacha section in dashboard

Browse Source
This commit is contained in:
Hafid Nur
2025-03-27 14:31:30 +07:00
parent 31b7587571
commit 0bcc8f7f6a
2 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/public/lanyard-id-card.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

apps/backoffice/src/app/dashboard/page.tsx
+43 -40
View File
@@ -1,4 +1,4 @@
import { ArrowDownOutlined } from '@ant-design/icons'; import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { FC, ReactElement } from 'react'; import { FC, ReactElement } from 'react';
@@ -22,9 +22,9 @@ export const Components: FC = (): ReactElement => {
{[1, 2, 3, 4].map((item) => ( {[1, 2, 3, 4].map((item) => (
<div <div
key={item} key={item}
className="bg-white rounded-md shadow py-3 px-6 flex items-center" className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100"
> >
<div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded border border-neutral-100"> <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
<ArrowDownOutlined className="text-[20px]" /> <ArrowDownOutlined className="text-[20px]" />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@@ -39,59 +39,58 @@ export const Components: FC = (): ReactElement => {
</section> </section>
{/* Gacha Items Section */} {/* Gacha Items Section */}
<section className="flex flex-col gap-4"> <section className="flex flex-col gap-8">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-p2 font-medium text-primary-500"> <h2 className="text-p2 font-medium text-primary-500">
Gacha Items Gacha Items
</h2> </h2>
<Button variant="primary"></Button> <Button variant="primary" size="sm" className="items-end gap-3">
<button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2">
<span>Tambah Item</span> <span>Tambah Item</span>
<svg <PlusOutlined className="text-[16px]" />
className="w-4 h-4" </Button>
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 4V20M4 12H20"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</button>
</div> </div>
{/* Gacha Items List */} {/* Gacha Items List */}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4 max-h-140 overflow-auto">
{[1, 2, 3, 4].map((item) => ( {[1, 2, 3, 4, 5, 6].map((item) => (
<div <div
key={item} key={item}
className="bg-white rounded-md shadow p-4 flex justify-between items-center" className="bg-white max-h-[80px] overflow-clip rounded-lg shadow-sm flex justify-between items-center border border-neutral-100"
> >
<div className="flex items-center gap-4"> <div className="flex flex-col py-4 px-6 gap-4">
<img
src="/gacha/lanyard-id-card.png"
alt="Lanyard IMPHNEN"
className="w-20 h-20 object-contain"
/>
<div> <div>
<h3 className="font-medium">Lanyard IMPHNEN</h3> <h3 className="text-p3 text-primary-500 font-medium">
<div className="flex items-center gap-2 text-sm text-gray-500"> Lanyard IMPHNEN
</h3>
<div className="flex items-center gap-2 text-label2 text-gray-500 mt-1">
<span>Prize {item}</span> <span>Prize {item}</span>
<span>•</span> <span>Chance Rate: (0.1%)</span>
<span>Chance Rate: (1%)</span>
</div> </div>
</div> </div>
</div> <div className="flex justify-start gap-2">
<div className="flex gap-2"> <Button
<button className="text-gray-500 hover:text-primary-500"> variant="text"
size="sm"
className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
>
Edit Edit
</button> </Button>
<button className="text-gray-500 hover:text-red-500"> <Button
variant="text"
size="sm"
className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-red-500"
>
Delete Delete
</button> </Button>
</div>
</div>
<div className="w-60">
<img
src="lanyard-id-card.png"
alt="Lanyard IMPHNEN"
className="object-left-top"
/>
</div> </div>
</div> </div>
))} ))}
@@ -100,7 +99,11 @@ export const Components: FC = (): ReactElement => {
</div> </div>
{/* Right-side illustration */} {/* Right-side illustration */}
<img src="gacha.png" alt="" width={436} className="rounded-md" /> <img
src="gacha.png"
alt=""
className="rounded-lg min-w-[436px] h-auto object-cover"
/>
</div> </div>
</main> </main>
); );