39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import { Button } from '../components/ui/button'
|
|
import { usePaymentNavigation } from '../features/payments/lib/navigation'
|
|
|
|
export function DemoStorePage() {
|
|
const nav = usePaymentNavigation()
|
|
const [busy, setBusy] = React.useState(false)
|
|
return (
|
|
<div className="space-y-4">
|
|
<h1 className="text-xl font-semibold">Demo Store</h1>
|
|
<div className="card p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-sm font-medium">Produk: T-Shirt Hitam</div>
|
|
<div className="text-xs text-black/60 dark:text-white/60">Ukuran: M • Bahan: Cotton</div>
|
|
<div className="mt-2 text-lg font-semibold">Rp 3.500.000</div>
|
|
</div>
|
|
<div className="w-24 h-24 rounded bg-black/10 dark:bg-white/10" aria-hidden />
|
|
</div>
|
|
<div className="mt-4">
|
|
<Button
|
|
variant="primary"
|
|
className="w-full"
|
|
aria-busy={busy}
|
|
disabled={busy}
|
|
onClick={() => { setBusy(true); setTimeout(() => { nav.toCheckout() }, 200) }}
|
|
>
|
|
{busy ? (
|
|
<span className="inline-flex items-center gap-2">
|
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/70 border-t-transparent" aria-hidden />
|
|
Memuat…
|
|
</span>
|
|
) : 'Buy Now'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |