{children}
+ card
)
+}
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
new file mode 100644
index 0000000..a7497bd
--- /dev/null
+++ b/src/components/layout/index.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+type PageLayoutProps = {
+ children: ReactNode
+ contentClassName?: string
+}
+
+function PageLayout({ children, contentClassName = 'w-[90%] lg:w-[60%] h-full mx-auto flex flex-col' }: PageLayoutProps) {
+ return (
+
+
+
+
+ )
+}
+
+export default Modal
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
new file mode 100644
index 0000000..2c3e74a
--- /dev/null
+++ b/src/components/table/index.tsx
@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react'
+
+export type TableColumn
+
+
+
+
+ {title}
+ {onClose ? (
+
+ ) : null}
+
+
+ {children}
+ {footer ? (
+
+ {footer}
+
+ ) : null}
+
+
+
+
+
+ )
+}
+
+export default BorderlessTable
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..2f8bef8
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,95 @@
+@import "tailwindcss";
+
+
+.button-play {
+ align-items: center;
+ appearance: none;
+ background-image: radial-gradient(100% 100% at 100% 0, #ffbe5c 0, #fe9c00 45%, #fa6d02 100%);
+ border: 0;
+ border-radius: 6px;
+ box-shadow:
+ rgba(254, 156, 0, .45) 0 0 18px,
+ rgba(123, 54, 16, .35) 0 2px 4px,
+ rgba(123, 54, 16, .28) 0 7px 13px -3px,
+ #c2460e 0 -3px 0 inset;
+ box-sizing: border-box;
+ color: #fff;
+ cursor: pointer;
+ display: inline-flex;
+ font-family: "JetBrains Mono",monospace;
+ justify-content: center;
+ line-height: 1;
+ list-style: none;
+ overflow: hidden;
+ padding-left: 16px;
+ padding-right: 16px;
+ position: relative;
+ text-align: left;
+ text-decoration: none;
+ transition: box-shadow .15s,transform .15s;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ white-space: nowrap;
+ will-change: box-shadow,transform;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.button-play:focus {
+ box-shadow:
+ #c2460e 0 0 0 1.5px inset,
+ rgba(254, 156, 0, .55) 0 0 22px,
+ rgba(123, 54, 16, .35) 0 2px 4px,
+ rgba(123, 54, 16, .28) 0 7px 13px -3px,
+ #c2460e 0 -3px 0 inset;
+}
+
+.button-play:hover {
+ box-shadow:
+ rgba(254, 156, 0, .6) 0 0 24px,
+ rgba(123, 54, 16, .35) 0 4px 8px,
+ rgba(123, 54, 16, .28) 0 7px 13px -3px,
+ #c2460e 0 -3px 0 inset;
+ transform: translateY(-2px);
+}
+
+.button-play:active {
+ box-shadow: #c2460e 0 3px 7px inset, rgba(254, 156, 0, .28) 0 0 12px;
+ transform: translateY(2px);
+}
+
+.liquid-glass-bg {
+ position: relative;
+ overflow: hidden;
+ background: rgba(255, 255, 255, 0.25);
+ backdrop-filter: blur(2px) saturate(180%) contrast(100%) brightness(100%);
+ -webkit-backdrop-filter: blur(2px) saturate(180%) contrast(100%) brightness(100%);
+ border-radius: 10px;
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-sizing: border-box;
+ font-weight: normal;
+}
+
+.progress-bar {
+ width: 100%;
+ height: 10px;
+ margin: 10px 0 8px;
+ overflow: hidden;
+ border-radius: 999px;
+ background: linear-gradient(180deg, rgba(18, 14, 10, 0.92) 0%, rgba(34, 22, 14, 0.96) 100%);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
+}
+
+.progress-bar__fill {
+ height: 100%;
+ border-radius: inherit;
+ background: linear-gradient(90deg, #fe9c00 0%, #fa6d02 100%);
+ box-shadow:
+ inset 0 0 0 1px rgba(255, 220, 160, 0.35),
+ 0 0 8px rgba(254, 156, 0, 0.55),
+ 0 0 16px rgba(250, 109, 2, 0.4),
+ 0 0 24px rgba(250, 109, 2, 0.22);
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..f7d0208
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1,5 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+ | + {column.label} + | + ))} +
|---|
| + {column.render ? column.render(value, record, index) : value} + | + ) + })} +
{value}
+ },
+ {
+ label: 'Phone / Mobile',
+ key: 'phone',
+ render: (value: string) => {value}
+ },
+ {
+ label: 'Address',
+ key: 'address',
+ render: (value: string) => {value}
+ },
+ {
+ label: 'Postal Code',
+ key: 'code',
+ render: (value: string) => {value}
+ },
+ {
+ label: 'Action',
+ key: 'action',
+ render: (value: string) => {value}
+ },
+ {
+ label: 'Default Setting',
+ key: 'setting',
+ render: (value: string) => {value}
+ }
+ ]
+
+ const dataSource: AccountTableRow[] = [
+ {
+ name: 'Jia Jun',
+ phone: '+86 138 0000 1288',
+ address: 'No. 88 Century Avenue, Pudong New Area, Shanghai',
+ code: '200120',
+ action: 'Edit',
+ setting: 'Default',
+ },
+ {
+ name: 'Alicia Tan',
+ phone: '+65 9123 4567',
+ address: '18 Robinson Road, Singapore',
+ code: '048547',
+ action: 'Edit',
+ setting: 'Optional',
+ },
+ {
+ name: 'Marcus Lee',
+ phone: '+60 12 778 9911',
+ address: '27 Jalan Bukit Bintang, Kuala Lumpur',
+ code: '55100',
+ action: 'Edit',
+ setting: 'Optional',
+ },
+ ]
+
+ return (
+ <
+ Account
+
+
+
+
+
+
+
+
+
+
+ My Shipping Address
+ Add Address
+
+
+
+ 
+
+ {label}
+ >
+
+ )
+}
+
+const productCategories: ProductCategory[] = [
+ {
+ id: 'transfer-to-platform',
+ name: 'Transfer to Platform',
+ items: [
+ {
+ id: 'transfer-100',
+ title: 'Transfer 100',
+ subtitle: '1 x Turnover',
+ points: '1000 Points',
+ ctaLabel: 'Transfer Now',
+ imageClassName: 'bg-[linear-gradient(135deg,_#5B1D00_0%,_#FA6A00_55%,_#FFBC6D_100%)]',
+ },
+ {
+ id: 'transfer-300',
+ title: 'Transfer 300',
+ subtitle: '2 x Turnover',
+ points: '2800 Points',
+ ctaLabel: 'Transfer Now',
+ imageClassName: 'bg-[linear-gradient(135deg,_#1C1A48_0%,_#5050D8_55%,_#8AB6FF_100%)]',
+ },
+ {
+ id: 'transfer-500',
+ title: 'Transfer 500',
+ subtitle: '3 x Turnover',
+ points: '4200 Points',
+ ctaLabel: 'Transfer Now',
+ imageClassName: 'bg-[linear-gradient(135deg,_#153A35_0%,_#1F9D8B_55%,_#8BF3D8_100%)]',
+ },
+ {
+ id: 'transfer-1000',
+ title: 'Transfer 1000',
+ subtitle: '5 x Turnover',
+ points: '7800 Points',
+ ctaLabel: 'Transfer Now',
+ imageClassName: 'bg-[linear-gradient(135deg,_#421515_0%,_#C93D3D_52%,_#FF9B9B_100%)]',
+ },
+ ],
+ },
+ {
+ id: 'game-bonus',
+ name: 'Game Bonus',
+ items: [
+ {
+ id: 'bonus-spin',
+ title: 'Lucky Spin Pack',
+ subtitle: 'Bonus Voucher',
+ points: '850 Points',
+ ctaLabel: 'Redeem Bonus',
+ imageClassName: 'bg-[linear-gradient(135deg,_#28103D_0%,_#8E3DD1_50%,_#F1A8FF_100%)]',
+ },
+ {
+ id: 'bonus-chip',
+ title: 'Chip Booster',
+ subtitle: 'Casino Special',
+ points: '1600 Points',
+ ctaLabel: 'Redeem Bonus',
+ imageClassName: 'bg-[linear-gradient(135deg,_#2D2407_0%,_#C79200_52%,_#FFE58A_100%)]',
+ },
+ {
+ id: 'bonus-cashback',
+ title: 'Cashback Card',
+ subtitle: 'Weekly Reward',
+ points: '2400 Points',
+ ctaLabel: 'Redeem Bonus',
+ imageClassName: 'bg-[linear-gradient(135deg,_#062A2F_0%,_#1296A5_52%,_#6DE2F0_100%)]',
+ },
+ {
+ id: 'bonus-vip',
+ title: 'VIP Match Bonus',
+ subtitle: 'Limited Access',
+ points: '5000 Points',
+ ctaLabel: 'Redeem Bonus',
+ imageClassName: 'bg-[linear-gradient(135deg,_#35120A_0%,_#DD6C2F_52%,_#FFC09A_100%)]',
+ },
+ ],
+ },
+ {
+ id: 'physical-prizes',
+ name: 'Physical Prizes',
+ items: [
+ {
+ id: 'prize-headset',
+ title: 'Gaming Headset',
+ subtitle: 'Physical Delivery',
+ points: '6800 Points',
+ ctaLabel: 'Claim Prize',
+ imageClassName: 'bg-[linear-gradient(135deg,_#111827_0%,_#374151_50%,_#A3AAB8_100%)]',
+ },
+ {
+ id: 'prize-mouse',
+ title: 'Wireless Mouse',
+ subtitle: 'Physical Delivery',
+ points: '4200 Points',
+ ctaLabel: 'Claim Prize',
+ imageClassName: 'bg-[linear-gradient(135deg,_#19212F_0%,_#3A5B84_50%,_#98B8E3_100%)]',
+ },
+ {
+ id: 'prize-speaker',
+ title: 'Bluetooth Speaker',
+ subtitle: 'Physical Delivery',
+ points: '7300 Points',
+ ctaLabel: 'Claim Prize',
+ imageClassName: 'bg-[linear-gradient(135deg,_#32120F_0%,_#A73F2F_50%,_#F0A28D_100%)]',
+ },
+ {
+ id: 'prize-keyboard',
+ title: 'Mechanical Keyboard',
+ subtitle: 'Physical Delivery',
+ points: '9500 Points',
+ ctaLabel: 'Claim Prize',
+ imageClassName: 'bg-[linear-gradient(135deg,_#142C17_0%,_#2B7A38_52%,_#8DE69B_100%)]',
+ },
+ ],
+ },
+]
+
+const addressOptions: AddressOption[] = [
+ {
+ id: 'address-shanghai',
+ name: 'Jia Jun',
+ phone: '+86 138 0000 1288',
+ address: 'No. 88 Century Avenue, Pudong New Area, Shanghai',
+ postalCode: '200120',
+ isDefault: true,
+ },
+ {
+ id: 'address-singapore',
+ name: 'Alicia Tan',
+ phone: '+65 9123 4567',
+ address: '18 Robinson Road, Singapore',
+ postalCode: '048547',
+ },
+ {
+ id: 'address-kuala-lumpur',
+ name: 'Marcus Lee',
+ phone: '+60 12 778 9911',
+ address: '27 Jalan Bukit Bintang, Kuala Lumpur',
+ postalCode: '55100',
+ },
+]
+
+function HomePage() {
+ const [selectedProduct, setSelectedProduct] = useState
+
+
+
+
+
+
+
+
+
+ Claimable Points
+ 2,880
+ Yesterday's losses
+ have been converted
+ to points.Claim to use.
+
+
+
+
+ Daily Claim Limit
+ 1,500
+
+
+
+ Claimed: 800 / 1500
+
+
+
+
+ Available for Withdrawal (Cash)
+ 152 CNY
+
+
+
+
+
+ {
+ productCategories.map((category) => (
+
+
+
))
+ }
+
+
+ {category.name}
+ more
+
+
+ {
+ category.items.map((product) => (
+
+
+
+
+ ))
+ }
+
+
+ {product.title}
+ {product.subtitle}
+ {product.points}
+
+
+
+
+
+
+
+
+
+ {selectedProduct.title}
+ {selectedProduct.subtitle}
+ {selectedProduct.points}
+
+
+
+ ) : null}
+ Select Shipping Address
+
+ {addressOptions.map((address) => {
+ const isSelected = selectedAddressId === address.id
+
+ return (
+
+ )
+ })}
+
+ <
+ Record
+
+
+
+
+
+
+
+
+
+ setBtnType('order')}
+ >My Orders
+
+ setBtnType('record')}
+ >Points Record
+
+ +
+ {
+ mockData.map((item, index) => (
+
+
+
+ ))
+ }
+ {item.date} - {item.name}
+
+
+
+
+ {item.content}
+ Check the Detail
+
+
+ {item.status}
+ {item.points}
+