Merge branch 'develop' into DimentorinAuth
This commit is contained in:
Naufal Azmi
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
|
||||
<div className="bg-primary-50 min-h-screen flex justify-center">
|
||||
<div className="bg-primary-50 min-h-screen w-full flex">
|
||||
<BackofficeSidebar />
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { FC, ReactElement } from 'react';
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import {
|
||||
FilterOutlined,
|
||||
SearchOutlined,
|
||||
EditOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { DataTable } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
@@ -32,7 +32,7 @@ const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({
|
||||
name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
|
||||
email: 'fullname23@gmail.com',
|
||||
phone: '081904423804',
|
||||
address: 'Jl. Pantai Cibaduyut Indonesia',
|
||||
address: 'Jl. Pantai Cibaduyut Indah',
|
||||
}));
|
||||
|
||||
const columns: ColumnDef<Account>[] = [
|
||||
@@ -100,6 +100,7 @@ export const Components: FC = (): ReactElement => {
|
||||
});
|
||||
|
||||
const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
|
||||
const table = useReactTable({
|
||||
data: mockData,
|
||||
@@ -120,7 +121,7 @@ export const Components: FC = (): ReactElement => {
|
||||
return (
|
||||
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
|
||||
{/* Header */}
|
||||
<header className="bg-white py-4 px-8 rounded-md shadow p-4">
|
||||
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||
<h1 className="text-p2 font-semibold">Data Akun</h1>
|
||||
</header>
|
||||
|
||||
@@ -138,15 +139,23 @@ export const Components: FC = (): ReactElement => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled
|
||||
size="md"
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filters
|
||||
</Button>
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
className="flex items-center gap-3"
|
||||
disabled
|
||||
onClick={() => setShowFilter(!showFilter)}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filters
|
||||
</Button>
|
||||
{showFilter && (
|
||||
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
||||
<Filter onClose={() => setShowFilter(false)} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
|
||||
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
|
||||
<div className="bg-primary-50 min-h-screen flex justify-center">
|
||||
<div className="bg-primary-50 min-h-screen w-full flex">
|
||||
<BackofficeSidebar />
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
PlusOutlined,
|
||||
ReloadOutlined,
|
||||
UsergroupAddOutlined,
|
||||
UsergroupDeleteOutlined,
|
||||
UserSwitchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { FC, ReactElement } from 'react';
|
||||
|
||||
@@ -6,7 +12,7 @@ export const Components: FC = (): ReactElement => {
|
||||
return (
|
||||
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
|
||||
{/* Dashboard Header */}
|
||||
<header className="bg-white py-4 px-8 rounded-md shadow p-4">
|
||||
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||
<h1 className="text-p2 font-semibold">Dashboard</h1>
|
||||
</header>
|
||||
|
||||
@@ -18,23 +24,51 @@ export const Components: FC = (): ReactElement => {
|
||||
Summary
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Summary Cards */}
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
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-md">
|
||||
<ArrowDownOutlined className="text-[20px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-p1 font-semibold">1000</h3>
|
||||
<p className="text-label1 text-neutral-500">
|
||||
Total Participants
|
||||
</p>
|
||||
</div>
|
||||
{/* Participants */}
|
||||
<div 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-md">
|
||||
<UsergroupAddOutlined className="text-[20px]" />
|
||||
</div>
|
||||
))}
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-p1 font-semibold">1000</h3>
|
||||
<p className="text-label1 text-neutral-500">Participants</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Roll and Reroll */}
|
||||
<div 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-md">
|
||||
<ReloadOutlined className="text-[20px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-p1 font-semibold">1000</h3>
|
||||
<p className="text-label1 text-neutral-500">
|
||||
Roll and Reroll
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Redeem */}
|
||||
<div 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-md">
|
||||
<UserSwitchOutlined className="text-[20px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-p1 font-semibold">1000</h3>
|
||||
<p className="text-label1 text-neutral-500">Redeem</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inactive Users */}
|
||||
<div 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-md">
|
||||
<UsergroupDeleteOutlined className="text-[20px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-p1 font-semibold">1000</h3>
|
||||
<p className="text-label1 text-neutral-500">Inactive Users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -78,7 +112,7 @@ export const Components: FC = (): ReactElement => {
|
||||
<Button
|
||||
variant="text"
|
||||
size="sm"
|
||||
className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-red-500"
|
||||
className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
@@ -87,7 +121,7 @@ export const Components: FC = (): ReactElement => {
|
||||
|
||||
{/* Lebih baik gunakan gambar yang sudah di-clip dengan size height: 78px daripada hard-code object-position dan margin */}
|
||||
<img
|
||||
src="gacha-clip.png"
|
||||
src="gacha-clip.webp"
|
||||
alt="Lanyard IMPHNEN"
|
||||
className="h-full"
|
||||
/>
|
||||
@@ -99,7 +133,7 @@ export const Components: FC = (): ReactElement => {
|
||||
|
||||
{/* Right-side illustration */}
|
||||
<img
|
||||
src="gacha.png"
|
||||
src="gacha.webp"
|
||||
alt=""
|
||||
className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { FC, ReactElement } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
|
||||
|
||||
export const AppLayout: FC = (): ReactElement => {
|
||||
return (
|
||||
<div className="bg-primary-50 min-h-screen flex justify-center">
|
||||
<div className="bg-primary-50 min-h-screen w-full flex">
|
||||
<BackofficeSidebar />
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppLayout;
|
||||
@@ -0,0 +1,232 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import {
|
||||
FilterOutlined,
|
||||
SearchOutlined,
|
||||
AuditOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
PaginationState,
|
||||
useReactTable,
|
||||
RowSelectionState,
|
||||
} from '@tanstack/react-table';
|
||||
|
||||
type Status = 'valid' | 'invalid' | 'unchecked';
|
||||
|
||||
interface Prize {
|
||||
id: number;
|
||||
name: string;
|
||||
orderValid: Status;
|
||||
items: string;
|
||||
address: string;
|
||||
status: Status;
|
||||
}
|
||||
|
||||
const items = [
|
||||
'Sertifikat + Laminating',
|
||||
'Lanyard + ID Card',
|
||||
'Pin',
|
||||
'Sticker Isi 3',
|
||||
'Sticker Isi 5',
|
||||
'Gelang Karet',
|
||||
];
|
||||
|
||||
// Mock data for transactions
|
||||
const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: 'Nama Lengkap',
|
||||
orderValid: (i % 3 === 0
|
||||
? 'invalid'
|
||||
: i % 5 === 0
|
||||
? 'unchecked'
|
||||
: 'valid') as Status,
|
||||
items: items[i % items.length],
|
||||
address: 'Jl. Pantai Cibaduyut Indah',
|
||||
status: (i % 3 === 0
|
||||
? 'unchecked'
|
||||
: i % 5 === 0
|
||||
? 'invalid'
|
||||
: 'valid') as Status,
|
||||
}));
|
||||
|
||||
const columns: ColumnDef<Prize>[] = [
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded"
|
||||
checked={table.getIsAllRowsSelected()}
|
||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded"
|
||||
checked={row.getIsSelected()}
|
||||
onChange={row.getToggleSelectedHandler()}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'No',
|
||||
accessorKey: 'id',
|
||||
},
|
||||
{
|
||||
header: 'Nama Lengkap',
|
||||
accessorKey: 'name',
|
||||
},
|
||||
{
|
||||
header: 'Order Valid?',
|
||||
accessorKey: 'orderValid',
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.orderValid;
|
||||
const statusColors: Record<Status, string> = {
|
||||
valid: 'bg-success-200 text-success-500',
|
||||
invalid: 'bg-danger-200 text-danger-500',
|
||||
unchecked: 'bg-warning-200 text-warning-900',
|
||||
};
|
||||
const statusText: Record<Status, string> = {
|
||||
valid: 'Valid',
|
||||
invalid: 'Invalid',
|
||||
unchecked: 'Unchecked',
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
||||
>
|
||||
{statusText[status]}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Items',
|
||||
accessorKey: 'items',
|
||||
},
|
||||
{
|
||||
header: 'Alamat Pengiriman',
|
||||
accessorKey: 'address',
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessorKey: 'status',
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status;
|
||||
const statusColors: Record<Status, string> = {
|
||||
valid: 'bg-success-200 text-success-500',
|
||||
invalid: 'bg-danger-200 text-danger-500',
|
||||
unchecked: 'bg-warning-200 text-warning-900',
|
||||
};
|
||||
const statusText: Record<Status, string> = {
|
||||
valid: 'Valid',
|
||||
invalid: 'Invalid',
|
||||
unchecked: 'Unchecked',
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
||||
>
|
||||
{statusText[status]}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Action',
|
||||
cell: ({ row }) => (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// handleUpdate(row.id);
|
||||
}}
|
||||
className="flex items-center gap-2 w-full"
|
||||
>
|
||||
<AuditOutlined className="text-[16px]" /> Process
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export const Components: FC = (): ReactElement => {
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 9,
|
||||
});
|
||||
|
||||
const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
|
||||
const table = useReactTable({
|
||||
data: mockData,
|
||||
columns,
|
||||
state: {
|
||||
pagination,
|
||||
rowSelection,
|
||||
},
|
||||
enableRowSelection: true,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
onPaginationChange: setPagination,
|
||||
pageCount: Math.ceil(mockData.length / pagination.pageSize),
|
||||
manualPagination: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
|
||||
{/* Header */}
|
||||
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||
<h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
|
||||
</header>
|
||||
|
||||
{/* Account Table Section */}
|
||||
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
||||
{/* Search and Filter */}
|
||||
<div className="flex justify-between items-center gap-8 mb-2">
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
|
||||
className="pl-12 w-full max-h-full"
|
||||
/>
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
||||
<SearchOutlined />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
className="flex items-center gap-3"
|
||||
onClick={() => setShowFilter(!showFilter)}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filters
|
||||
</Button>
|
||||
{showFilter && (
|
||||
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
||||
<Filter onClose={() => setShowFilter(false)} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<DataTable data={mockData} columns={columns} table={table} />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Components;
|
||||
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
|
||||
<div className="bg-primary-50 min-h-screen flex justify-center">
|
||||
<div className="bg-primary-50 min-h-screen w-full flex">
|
||||
<BackofficeSidebar />
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
|
||||
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { FC, ReactElement } from 'react';
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import {
|
||||
FilterOutlined,
|
||||
SearchOutlined,
|
||||
AuditOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { DataTable } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
@@ -39,7 +38,7 @@ const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
|
||||
: 'valid') as TransactionStatus,
|
||||
}));
|
||||
|
||||
const columns: ColumnDef<Account>[] = [
|
||||
const columns: ColumnDef<Transaction>[] = [
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => (
|
||||
@@ -77,9 +76,9 @@ const columns: ColumnDef<Account>[] = [
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status;
|
||||
const statusColors: Record<TransactionStatus, string> = {
|
||||
valid: 'bg-success-500 text-white',
|
||||
invalid: 'bg-danger-500 text-white',
|
||||
unchecked: 'bg-yellow-400 text-black',
|
||||
valid: 'bg-success-200 text-success-500',
|
||||
invalid: 'bg-danger-200 text-danger-500',
|
||||
unchecked: 'bg-warning-200 text-warning-900',
|
||||
};
|
||||
const statusText: Record<TransactionStatus, string> = {
|
||||
valid: 'Valid',
|
||||
@@ -88,7 +87,7 @@ const columns: ColumnDef<Account>[] = [
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={`py-1 px-3 rounded-md text-center ${statusColors[status]}`}
|
||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
||||
>
|
||||
{statusText[status]}
|
||||
</div>
|
||||
@@ -120,6 +119,7 @@ export const Components: FC = (): ReactElement => {
|
||||
});
|
||||
|
||||
const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
|
||||
const table = useReactTable({
|
||||
data: mockTransactions,
|
||||
@@ -140,7 +140,7 @@ export const Components: FC = (): ReactElement => {
|
||||
return (
|
||||
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
|
||||
{/* Header */}
|
||||
<header className="bg-white py-4 px-8 rounded-md shadow p-4">
|
||||
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||
<h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
|
||||
</header>
|
||||
|
||||
@@ -158,14 +158,22 @@ export const Components: FC = (): ReactElement => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filters
|
||||
</Button>
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
className="flex items-center gap-3"
|
||||
onClick={() => setShowFilter(!showFilter)}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filters
|
||||
</Button>
|
||||
{showFilter && (
|
||||
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
||||
<Filter onClose={() => setShowFilter(false)} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
|
||||
--color-neutral-50: #f6f6f6;
|
||||
--color-neutral-100: #e7e7e7;
|
||||
--color-neutral-200: #d0d0d0;
|
||||
--color-neutral-300: #b7b7b7;
|
||||
--color-neutral-400: #9f9f9f;
|
||||
--color-neutral-500: #7e7e7e;
|
||||
--color-neutral-200: #d1d1d1;
|
||||
--color-neutral-300: #b0b0b0;
|
||||
--color-neutral-400: #888888;
|
||||
--color-neutral-500: #6d6d6d;
|
||||
--color-neutral-600: #5d5d5d;
|
||||
--color-neutral-700: #4a4a4a;
|
||||
--color-neutral-800: #3a3a3a;
|
||||
--color-neutral-900: #2f2f2f;
|
||||
--color-neutral-700: #4f4f4f;
|
||||
--color-neutral-800: #454545;
|
||||
--color-neutral-900: #3d3d3d;
|
||||
--color-neutral-950: #2b2b2b;
|
||||
|
||||
--color-success-100: #e0fbd8;
|
||||
|
||||
+54
-13
@@ -1,9 +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 { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
interface GachaItemProps {
|
||||
src: string;
|
||||
@@ -14,7 +14,6 @@ interface GachaItemProps {
|
||||
export const Components: FC = (): ReactElement => {
|
||||
// Pinjem
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
//
|
||||
|
||||
const scrollToRoulette = () => {
|
||||
const rouletteSection = document.getElementById('roulette');
|
||||
@@ -222,16 +221,58 @@ export const Components: FC = (): ReactElement => {
|
||||
<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
|
||||
)}
|
||||
<button onClick={() => setShowModal(true)}>Open Modal</button>
|
||||
<Modal
|
||||
className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
|
||||
isOpen={showModal}
|
||||
onClose={() => setShowModal(false)}
|
||||
>
|
||||
<Modal.Header className="space-y-4">
|
||||
<img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
|
||||
<h1 className="text-primary-500 text-p1 text-center font-semibold">
|
||||
Login
|
||||
</h1>
|
||||
</Modal.Header>
|
||||
<Modal.Content className="space-y-4">
|
||||
<InputForm
|
||||
label="Email"
|
||||
placeholder="Masukkan Email"
|
||||
type="email"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Password"
|
||||
placeholder="Masukkan password"
|
||||
type="password"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<Link to="/forgot-password">
|
||||
<h1 className="text-end text-primary-500 text-xl font-medium">
|
||||
Lupa Password?
|
||||
</h1>
|
||||
</Link>
|
||||
</Modal.Content>
|
||||
<Modal.Footer className="flex flex-col md:flex-col pt-4">
|
||||
<Button
|
||||
size="md"
|
||||
className="w-full"
|
||||
onClick={() => console.log('Login')}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
<div className="flex justify-center gap-2 pt-2.5 font-medium">
|
||||
<p className="text-neutral-500">Belum punya akun?</p>
|
||||
<Link
|
||||
className="text-primary-500 hover:text-primary-600"
|
||||
to="/register"
|
||||
>
|
||||
Daftar disini
|
||||
</Link>
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
{/**Izin pake untuk debug modals gacha */}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
|
||||
--color-neutral-50: #f6f6f6;
|
||||
--color-neutral-100: #e7e7e7;
|
||||
--color-neutral-200: #d0d0d0;
|
||||
--color-neutral-300: #b7b7b7;
|
||||
--color-neutral-400: #9f9f9f;
|
||||
--color-neutral-500: #7e7e7e;
|
||||
--color-neutral-200: #d1d1d1;
|
||||
--color-neutral-300: #b0b0b0;
|
||||
--color-neutral-400: #888888;
|
||||
--color-neutral-500: #6d6d6d;
|
||||
--color-neutral-600: #5d5d5d;
|
||||
--color-neutral-700: #4a4a4a;
|
||||
--color-neutral-800: #3a3a3a;
|
||||
--color-neutral-900: #2f2f2f;
|
||||
--color-neutral-700: #4f4f4f;
|
||||
--color-neutral-800: #454545;
|
||||
--color-neutral-900: #3d3d3d;
|
||||
--color-neutral-950: #2b2b2b;
|
||||
|
||||
--color-success-100: #e0fbd8;
|
||||
|
||||
@@ -11,6 +11,10 @@ const config: StorybookConfig = {
|
||||
},
|
||||
},
|
||||
},
|
||||
staticDirs: [
|
||||
'../../../apps/backoffice/public',
|
||||
'../../../apps/gacha/public',
|
||||
'../../../apps/dimentorin/public', ],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@@ -51,7 +51,7 @@ export const Button: FC<TButtonProps> = ({
|
||||
...rest
|
||||
}): ReactElement => {
|
||||
const mergedClassName = cn(
|
||||
'inline-flex items-center justify-center font-[600] rounded-lg px-[16px] py-[10px]',
|
||||
'inline-flex items-center justify-center font-[600] rounded-md px-[16px] py-[10px]',
|
||||
'transition-colors duration-200 cursor-pointer',
|
||||
sizeClasses[size],
|
||||
variantClasses[variant],
|
||||
|
||||
@@ -45,7 +45,7 @@ export const Input: FC<TInputProps> = ({
|
||||
};
|
||||
|
||||
const mergedClassName = cn(
|
||||
'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70',
|
||||
'px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70',
|
||||
sizeClasses[size].textSize,
|
||||
disabled && disabledClass,
|
||||
className
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
|
||||
--color-neutral-50: #f6f6f6;
|
||||
--color-neutral-100: #e7e7e7;
|
||||
--color-neutral-200: #d0d0d0;
|
||||
--color-neutral-300: #b7b7b7;
|
||||
--color-neutral-400: #9f9f9f;
|
||||
--color-neutral-500: #7e7e7e;
|
||||
--color-neutral-200: #d1d1d1;
|
||||
--color-neutral-300: #b0b0b0;
|
||||
--color-neutral-400: #888888;
|
||||
--color-neutral-500: #6d6d6d;
|
||||
--color-neutral-600: #5d5d5d;
|
||||
--color-neutral-700: #4a4a4a;
|
||||
--color-neutral-800: #3a3a3a;
|
||||
--color-neutral-900: #2f2f2f;
|
||||
--color-neutral-700: #4f4f4f;
|
||||
--color-neutral-800: #454545;
|
||||
--color-neutral-900: #3d3d3d;
|
||||
--color-neutral-950: #2b2b2b;
|
||||
|
||||
--color-success-100: #e0fbd8;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export * from "./forgot-step";
|
||||
export * from "./otp-form";
|
||||
export * from './input-form';
|
||||
export * from './pagination';
|
||||
export * from './pagination';
|
||||
export * from './modal/modal';
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { InputForm } from './input-form';
|
||||
|
||||
const meta = {
|
||||
title: 'Molecules/InputForm',
|
||||
title: 'Molecules/Input Form',
|
||||
component: InputForm,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
import React, { useEffect, useMemo, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
overlayClassName?: string;
|
||||
closeButtonClassName?: string;
|
||||
disableEscapeKeyDown?: boolean;
|
||||
'aria-label'?: string;
|
||||
'aria-labelledby'?: string;
|
||||
'aria-describedby'?: string;
|
||||
}
|
||||
|
||||
const Modal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
children,
|
||||
className,
|
||||
overlayClassName,
|
||||
closeButtonClassName,
|
||||
disableEscapeKeyDown = false,
|
||||
'aria-label': ariaLabel,
|
||||
'aria-labelledby': ariaLabelledBy,
|
||||
'aria-describedby': ariaDescribedBy,
|
||||
}: ModalProps) => {
|
||||
const handleEscapeKey = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen && !disableEscapeKeyDown) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[isOpen, onClose, disableEscapeKeyDown]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
window.addEventListener('keydown', handleEscapeKey);
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
window.removeEventListener('keydown', handleEscapeKey);
|
||||
};
|
||||
}, [isOpen, handleEscapeKey]);
|
||||
|
||||
const modalNode = useMemo(() => document.createElement('div'), []);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.appendChild(modalNode);
|
||||
return () => {
|
||||
document.body.removeChild(modalNode);
|
||||
};
|
||||
}, [modalNode]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div
|
||||
className={cn(
|
||||
'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
|
||||
isOpen ? 'opacity-100' : 'opacity-0',
|
||||
overlayClassName
|
||||
)}
|
||||
onClick={onClose}
|
||||
role="presentation"
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
|
||||
'sm:rounded-lg sm:max-w-md',
|
||||
isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
|
||||
className
|
||||
)}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy}
|
||||
aria-describedby={ariaDescribedBy}
|
||||
>
|
||||
{children}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
|
||||
closeButtonClassName
|
||||
)}
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<CloseOutlined className="h-4 w-4 cursor-pointer" />
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
modalNode
|
||||
);
|
||||
};
|
||||
|
||||
interface ModalHeaderProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ModalHeader = ({ className, children }: ModalHeaderProps) => (
|
||||
<div
|
||||
className={cn(
|
||||
'mb-4 flex flex-col space-y-1.5 text-center sm:text-left',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface ModalContentProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ModalContent = ({ className, children }: ModalContentProps) => (
|
||||
<div className={cn('mb-4', className)}>{children}</div>
|
||||
);
|
||||
|
||||
interface ModalFooterProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ModalFooter = ({ className, children }: ModalFooterProps) => (
|
||||
<div className={cn('flex gap-2 sm:flex-row sm:justify-end', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface ModalTitleProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const ModalTitle = ({ className, children, id }: ModalTitleProps) => (
|
||||
<h2
|
||||
id={id}
|
||||
className={cn(
|
||||
'text-lg font-semibold leading-none tracking-tight',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
|
||||
interface ModalDescriptionProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const ModalDescription = ({
|
||||
className,
|
||||
children,
|
||||
id,
|
||||
}: ModalDescriptionProps) => (
|
||||
<p id={id} className={cn('text-sm text-gray-500', className)}>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
|
||||
Modal.Header = ModalHeader;
|
||||
Modal.Content = ModalContent;
|
||||
Modal.Footer = ModalFooter;
|
||||
Modal.Title = ModalTitle;
|
||||
Modal.Description = ModalDescription;
|
||||
|
||||
export { Modal };
|
||||
export type {
|
||||
ModalProps,
|
||||
ModalHeaderProps,
|
||||
ModalContentProps,
|
||||
ModalFooterProps,
|
||||
ModalTitleProps,
|
||||
ModalDescriptionProps,
|
||||
};
|
||||
@@ -0,0 +1,106 @@
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { Modal } from './modal';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
describe('Modal Component', () => {
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: vi.fn(),
|
||||
children: <div>Modal Content</div>,
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders when isOpen is true', () => {
|
||||
render(<Modal {...defaultProps} />);
|
||||
expect(screen.getByText('Modal Content')).toBeInTheDocument();
|
||||
expect(screen.getByRole('dialog')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Close modal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render when isOpen is false', () => {
|
||||
render(<Modal {...defaultProps} isOpen={false} />);
|
||||
expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onClose when close button is clicked', async () => {
|
||||
render(<Modal {...defaultProps} />);
|
||||
fireEvent.click(screen.getByLabelText('Close modal'));
|
||||
await waitFor(() => expect(defaultProps.onClose).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
|
||||
it('calls onClose when overlay is clicked', async () => {
|
||||
render(<Modal {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('presentation'));
|
||||
await waitFor(() => expect(defaultProps.onClose).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
|
||||
it('closes on Escape key press when disableEscapeKeyDown is false', async () => {
|
||||
render(<Modal {...defaultProps} />);
|
||||
fireEvent.keyDown(window, { key: 'Escape' });
|
||||
await waitFor(() => expect(defaultProps.onClose).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
|
||||
it('does not close on Escape key press when disableEscapeKeyDown is true', async () => {
|
||||
render(<Modal {...defaultProps} disableEscapeKeyDown={true} />);
|
||||
fireEvent.keyDown(window, { key: 'Escape' });
|
||||
await waitFor(() => expect(defaultProps.onClose).not.toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('renders sub-components correctly', () => {
|
||||
render(
|
||||
<Modal {...defaultProps}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Modal Title</Modal.Title>
|
||||
<Modal.Description>Modal Description</Modal.Description>
|
||||
</Modal.Header>
|
||||
<Modal.Content>Modal Content</Modal.Content>
|
||||
<Modal.Footer>
|
||||
<button>Footer Button</button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Modal Title')).toBeInTheDocument();
|
||||
expect(screen.getByText('Modal Description')).toBeInTheDocument();
|
||||
expect(screen.getByText('Modal Content')).toBeInTheDocument();
|
||||
expect(screen.getByText('Footer Button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom classNames', () => {
|
||||
render(
|
||||
<Modal
|
||||
{...defaultProps}
|
||||
className="custom-modal"
|
||||
overlayClassName="custom-overlay"
|
||||
closeButtonClassName="custom-close"
|
||||
/>
|
||||
);
|
||||
expect(screen.getByRole('dialog')).toHaveClass('custom-modal');
|
||||
expect(screen.getByRole('presentation')).toHaveClass('custom-overlay');
|
||||
expect(screen.getByLabelText('Close modal')).toHaveClass('custom-close');
|
||||
});
|
||||
|
||||
it('sets ARIA attributes correctly', () => {
|
||||
render(
|
||||
<Modal
|
||||
{...defaultProps}
|
||||
aria-label="Test Modal"
|
||||
aria-labelledby="modal-title"
|
||||
aria-describedby="modal-desc"
|
||||
>
|
||||
<Modal.Header>
|
||||
<Modal.Title id="modal-title">Title</Modal.Title>
|
||||
<Modal.Description id="modal-desc">Description</Modal.Description>
|
||||
</Modal.Header>
|
||||
</Modal>
|
||||
);
|
||||
const modal = screen.getByRole('dialog');
|
||||
expect(modal).toHaveAttribute('aria-label', 'Test Modal');
|
||||
expect(modal).toHaveAttribute('aria-labelledby', 'modal-title');
|
||||
expect(modal).toHaveAttribute('aria-describedby', 'modal-desc');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Modal } from './modal';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
const meta: Meta<typeof Modal> = {
|
||||
title: 'Components/Modal',
|
||||
component: Modal,
|
||||
argTypes: {
|
||||
isOpen: { control: 'boolean' },
|
||||
onClose: { action: 'closed' },
|
||||
className: { control: 'text' },
|
||||
overlayClassName: { control: 'text' },
|
||||
closeButtonClassName: { control: 'text' },
|
||||
disableEscapeKeyDown: { control: 'boolean' },
|
||||
'aria-label': { control: 'text' },
|
||||
'aria-labelledby': { control: 'text' },
|
||||
'aria-describedby': { control: 'text' },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof Modal>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
onClose: () => {
|
||||
console.log('Modal closed');
|
||||
},
|
||||
children: (
|
||||
<>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Modal Title</Modal.Title>
|
||||
<Modal.Description>
|
||||
This is a simple modal description.
|
||||
</Modal.Description>
|
||||
</Modal.Header>
|
||||
<Modal.Content>This is the main content of the modal.</Modal.Content>
|
||||
<Modal.Footer>
|
||||
<button className="px-4 py-2 bg-blue-500 text-white rounded">
|
||||
Confirm
|
||||
</button>
|
||||
<button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
|
||||
</Modal.Footer>
|
||||
</>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomClasses: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
className: 'bg-red-100',
|
||||
overlayClassName: 'bg-opacity-50',
|
||||
closeButtonClassName: 'text-red-500',
|
||||
},
|
||||
};
|
||||
|
||||
export const NoEscapeClose: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
disableEscapeKeyDown: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithAria: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
'aria-label': 'Custom Modal',
|
||||
'aria-labelledby': 'modal-title',
|
||||
'aria-describedby': 'modal-desc',
|
||||
children: (
|
||||
<>
|
||||
<Modal.Header>
|
||||
<Modal.Title id="modal-title">Modal Title</Modal.Title>
|
||||
<Modal.Description id="modal-desc">
|
||||
This is a modal with ARIA attributes.
|
||||
</Modal.Description>
|
||||
</Modal.Header>
|
||||
<Modal.Content>Modal content here.</Modal.Content>
|
||||
</>
|
||||
),
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,190 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
import React, { useEffect, useMemo, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
overlayClassName?: string;
|
||||
closeButtonClassName?: string;
|
||||
disableEscapeKeyDown?: boolean;
|
||||
'aria-label'?: string;
|
||||
'aria-labelledby'?: string;
|
||||
'aria-describedby'?: string;
|
||||
}
|
||||
|
||||
const Modal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
children,
|
||||
className,
|
||||
overlayClassName,
|
||||
closeButtonClassName,
|
||||
disableEscapeKeyDown = false,
|
||||
'aria-label': ariaLabel,
|
||||
'aria-labelledby': ariaLabelledBy,
|
||||
'aria-describedby': ariaDescribedBy,
|
||||
}: ModalProps) => {
|
||||
const handleEscapeKey = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen && !disableEscapeKeyDown) {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[isOpen, onClose, disableEscapeKeyDown]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
window.addEventListener('keydown', handleEscapeKey);
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
window.removeEventListener('keydown', handleEscapeKey);
|
||||
};
|
||||
}, [isOpen, handleEscapeKey]);
|
||||
|
||||
const modalNode = useMemo(() => document.createElement('div'), []);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.appendChild(modalNode);
|
||||
return () => {
|
||||
document.body.removeChild(modalNode);
|
||||
};
|
||||
}, [modalNode]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div
|
||||
className={cn(
|
||||
'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
|
||||
isOpen ? 'opacity-100' : 'opacity-0',
|
||||
overlayClassName
|
||||
)}
|
||||
onClick={onClose}
|
||||
role="presentation"
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
|
||||
'sm:rounded-lg sm:max-w-md',
|
||||
isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
|
||||
className
|
||||
)}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy}
|
||||
aria-describedby={ariaDescribedBy}
|
||||
>
|
||||
{children}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
|
||||
closeButtonClassName
|
||||
)}
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<CloseOutlined className="h-4 w-4 cursor-pointer" />
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
modalNode
|
||||
);
|
||||
};
|
||||
|
||||
interface ModalHeaderProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ModalHeader = ({ className, children }: ModalHeaderProps) => (
|
||||
<div
|
||||
className={cn(
|
||||
'mb-4 flex flex-col space-y-1.5 text-center sm:text-left',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface ModalContentProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ModalContent = ({ className, children }: ModalContentProps) => (
|
||||
<div className={cn('mb-4', className)}>{children}</div>
|
||||
);
|
||||
|
||||
interface ModalFooterProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ModalFooter = ({ className, children }: ModalFooterProps) => (
|
||||
<div className={cn('flex gap-2 sm:flex-row sm:justify-end', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface ModalTitleProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const ModalTitle = ({ className, children, id }: ModalTitleProps) => (
|
||||
<h2
|
||||
id={id}
|
||||
className={cn(
|
||||
'text-lg font-semibold leading-none tracking-tight',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
|
||||
interface ModalDescriptionProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const ModalDescription = ({
|
||||
className,
|
||||
children,
|
||||
id,
|
||||
}: ModalDescriptionProps) => (
|
||||
<p id={id} className={cn('text-sm text-gray-500', className)}>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
|
||||
Modal.Header = ModalHeader;
|
||||
Modal.Content = ModalContent;
|
||||
Modal.Footer = ModalFooter;
|
||||
Modal.Title = ModalTitle;
|
||||
Modal.Description = ModalDescription;
|
||||
|
||||
export { Modal };
|
||||
export type {
|
||||
ModalProps,
|
||||
ModalHeaderProps,
|
||||
ModalContentProps,
|
||||
ModalFooterProps,
|
||||
ModalTitleProps,
|
||||
ModalDescriptionProps,
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
AuditOutlined,
|
||||
InboxOutlined,
|
||||
LogoutOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
@@ -56,6 +57,18 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
<AuditOutlined className="text-[20px]" />
|
||||
<span className="text-p3 font-medium">Validasi Transaksi</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/prizes"
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/prizes')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<InboxOutlined className="text-[20px]" />
|
||||
<span className="text-p3 font-medium">Data Pengiriman Hadiah</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
getPaginationRowModel,
|
||||
flexRender,
|
||||
ColumnDef,
|
||||
Table,
|
||||
} from '@tanstack/react-table';
|
||||
import { Pagination } from '../../molecules';
|
||||
|
||||
@@ -13,6 +14,7 @@ import React from 'react';
|
||||
interface DataTableProps<T> {
|
||||
data: T[];
|
||||
columns: ColumnDef<T>[];
|
||||
table: Table<T>;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
@@ -47,7 +49,7 @@ export const DataTable = <T,>({
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th
|
||||
key={header.id}
|
||||
className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
|
||||
className="py-4 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
@@ -60,7 +62,7 @@ export const DataTable = <T,>({
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="mt-3">
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="bg-primary-100 odd:bg-white">
|
||||
{row.getVisibleCells().map((cell, index) => (
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Filter } from './filter';
|
||||
|
||||
const meta: Meta<typeof Filter> = {
|
||||
title: 'Organisms/Filter',
|
||||
component: Filter,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
default: 'neutral',
|
||||
values: [{ name: 'neutral', value: '#e7e7e7' }],
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof Filter>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Filter>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface RadioProps {
|
||||
checked?: boolean;
|
||||
disabled?: boolean;
|
||||
id: string;
|
||||
label?: string;
|
||||
name: string;
|
||||
value: string;
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
const Radio = ({
|
||||
checked,
|
||||
disabled,
|
||||
id,
|
||||
label,
|
||||
name,
|
||||
value,
|
||||
onChange,
|
||||
}: RadioProps) => (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="relative grid place-items-center mt-1">
|
||||
<input
|
||||
type="radio"
|
||||
id={id}
|
||||
name={name}
|
||||
value={value}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-gray-400"
|
||||
/>
|
||||
<div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-gray-400" />
|
||||
</div>
|
||||
<label htmlFor={id} className="text-start text-neutral-400 text-label2">
|
||||
{label || 'This is the radio label'}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
|
||||
interface FilterProps {
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export const Filter = ({ onClose }: FilterProps) => {
|
||||
const [selectedStatus, setSelectedStatus] = useState('delivered');
|
||||
|
||||
const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedStatus(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="inline-flex flex-col p-[20px] bg-white rounded-lg gap-4 w-[122px] shadow">
|
||||
<div className="flex justify-between items-baseline">
|
||||
<span className="font-semibold text-p3 text-primary-500">Filters</span>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="cursor-pointer text-neutral-400 hover:text-neutral-600"
|
||||
>
|
||||
<CloseOutlined className="text-[12px]" />
|
||||
</button>
|
||||
</div>
|
||||
<hr className="border-primary-200" />
|
||||
<span className="font-semibold text-primary-500">Status</span>
|
||||
<div className="flex flex-col gap-[10px]">
|
||||
<Radio
|
||||
id="option1"
|
||||
name="status"
|
||||
value="undelivered"
|
||||
label="Undelivered"
|
||||
checked={selectedStatus === 'undelivered'}
|
||||
onChange={handleStatusChange}
|
||||
/>
|
||||
<Radio
|
||||
id="option2"
|
||||
name="status"
|
||||
value="delivered"
|
||||
label="Delivered"
|
||||
checked={selectedStatus === 'delivered'}
|
||||
onChange={handleStatusChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Filter;
|
||||
@@ -0,0 +1 @@
|
||||
export * from './filter';
|
||||
@@ -3,3 +3,4 @@ export * from "./modals-gacha";
|
||||
export * from "./auth-banner";
|
||||
export * from './backoffice-sidebar'
|
||||
export * from './datatable'
|
||||
export * from './filter'
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './modal-backoffice';
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ReactElement, ReactNode } from 'react';
|
||||
|
||||
interface ModalBackofficeProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ModalBackoffice = ({
|
||||
children,
|
||||
className,
|
||||
...rest
|
||||
}: ModalBackofficeProps): ReactElement => {
|
||||
return (
|
||||
<div
|
||||
className={`w-[400px] bg-primary-50 rounded-lg p-[40px] gap-[32px] ${
|
||||
className || ''
|
||||
}`}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalBackoffice;
|
||||
@@ -0,0 +1,373 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { ModalBackoffice } from './modal-backoffice';
|
||||
import { InputForm } from '../../molecules';
|
||||
import { Button } from '../../atoms';
|
||||
|
||||
const meta: Meta<typeof ModalBackoffice> = {
|
||||
title: 'Organisms/Modal Backoffice',
|
||||
component: ModalBackoffice,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies Meta<typeof ModalBackoffice>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ModalBackoffice>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// isOpen: true,
|
||||
// onClose: () => console.log('Modal closed'),
|
||||
// title: 'Sample Modal',
|
||||
children: (
|
||||
<>
|
||||
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||
Modal Title
|
||||
</h2>
|
||||
<p className="text-p3 text-neutral-400">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repellat
|
||||
rerum doloremque dolorem fugit architecto eos blanditiis ratione
|
||||
facere? Esse dolores inventore deleniti. Dicta voluptatem dolore vel
|
||||
quia amet dolorem?
|
||||
</p>
|
||||
<div className="flex flex-col gap-4"></div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const TambahItemGacha: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div>
|
||||
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||
Tambah Item Gacha
|
||||
</h2>
|
||||
<p className="text-p3 text-neutral-400">
|
||||
Lengkapi detail di bawah ini untuk menambahkan item gacha
|
||||
</p>
|
||||
</div>
|
||||
<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="text"
|
||||
placeholder=".jpg, .jpeg, atau .png"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Tambahkan Item
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const TambahItem: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8 text-center">
|
||||
<div>
|
||||
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||
Tambah Item
|
||||
</h2>
|
||||
<p className="text-p3 text-neutral-400">
|
||||
Apakah kamu yakin ingin
|
||||
<br /> menambahkan item ini?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="bordered" size="lg" className="w-full">
|
||||
Batal
|
||||
</Button>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Tambahkan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const EditItemGacha: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<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="text"
|
||||
placeholder=".jpg, .jpeg, atau .png"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Perbarui Item
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const UpdateItem: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8 text-center">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="bordered" size="lg" className="w-full">
|
||||
Batal
|
||||
</Button>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const DeleteItem: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8 text-center">
|
||||
<img
|
||||
src="/chibi-delete.webp"
|
||||
alt="Delete item?"
|
||||
width={148}
|
||||
className="self-center"
|
||||
/>
|
||||
<div>
|
||||
<h2 className="text-p1 font-semibold text-danger-500 mb-3">
|
||||
Delete Item
|
||||
</h2>
|
||||
<p className="text-p3 text-neutral-400">
|
||||
Apakah kamu yakin untuk menghapus item ini?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="secondary" size="lg" className="w-full">
|
||||
Batal Hapus
|
||||
</Button>
|
||||
<Button variant="danger" size="lg" className="w-full">
|
||||
Hapus Item
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const EditDataAkun: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8">
|
||||
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||
Edit Data Akun
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<InputForm
|
||||
label="Nama Lengkap"
|
||||
type="text"
|
||||
placeholder="Masukkan Nama Lengkap"
|
||||
value="Ahmad Wiyana"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Email"
|
||||
type="text"
|
||||
placeholder="Masukkan Email"
|
||||
value="fullname23@gmail.com"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Nomor Telepon"
|
||||
type="text"
|
||||
placeholder="Masukkan Nomor Telepon"
|
||||
value="081904423804"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Alamat"
|
||||
type="text"
|
||||
placeholder="Masukkan Alamat"
|
||||
value="Jl. Pantai Cibaduyut Indah"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Perbarui Data
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const UpdateDataAkun: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8 text-center">
|
||||
<div>
|
||||
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||
Update Data
|
||||
</h2>
|
||||
<p className="text-p3 text-neutral-400">
|
||||
Apakah kamu yakin dengan
|
||||
<br /> perubahan yang dilakukan?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="bordered" size="lg" className="w-full">
|
||||
Batal
|
||||
</Button>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const ValidasiTransaksi: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8">
|
||||
<h2 className="text-p1 font-semibold text-primary-500 ">
|
||||
Validasi Transaksi
|
||||
</h2>
|
||||
|
||||
<InputForm
|
||||
label="Nomor Transaksi"
|
||||
type="text"
|
||||
placeholder="Masukkan Nomor Transaksi"
|
||||
value="2502133Y9AFVBO"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
variant="bordered"
|
||||
size="lg"
|
||||
className="w-full border-danger-500 text-danger-500 hover:border-danger-700 hover:text-danger-700"
|
||||
>
|
||||
Tidak Valid
|
||||
</Button>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Valid
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const ProsesDelivery: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div>
|
||||
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||
Delivery Process
|
||||
</h2>
|
||||
|
||||
<p className="text-p3 text-neutral-400">
|
||||
Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
|
||||
sudah ubah status menjadi “Delivered”.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<InputForm
|
||||
label="Nama Lengkap"
|
||||
type="text"
|
||||
placeholder="Masukkan Nama Lengkap"
|
||||
value="Ahmad Wiyana"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Item yang didapatkan"
|
||||
type="text"
|
||||
placeholder="Masukkan Nama Item"
|
||||
value="Lanyard + ID Card"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Alamat Pengiriman"
|
||||
type="text"
|
||||
placeholder="Masukkan Alamat Pengiriman"
|
||||
value="Jl. Pantai Cibaduyut Indah"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
<InputForm
|
||||
label="Status"
|
||||
type="text"
|
||||
placeholder="Isi Status Pengiriman"
|
||||
value="Lanyard + ID Card"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Tambahkan Item
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
@@ -40,6 +40,14 @@ export const Navbar: FC = (): ReactElement => {
|
||||
<Link to="#">Merch Gacha</Link>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
size="md"
|
||||
className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
|
||||
>
|
||||
<Link to="/login">Login</Link>
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
className={`md:hidden duration-200 ${
|
||||
@@ -69,6 +77,14 @@ export const Navbar: FC = (): ReactElement => {
|
||||
Merch Gacha
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="#"
|
||||
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user