FoodSurf/frontend
1
0
Fork 1
Code Pull Requests Actions Packages Releases 31 Activity

Payment app

Browse Source
This commit is contained in:
Thanh Quy - wolf
2026-03-24 07:51:53 +07:00
parent 9765a270e9
commit 354e89c8d1
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/payment/page.tsx
+17 -5
View File
@@ -1,5 +1,6 @@
"use client";
import Link from 'next/link';
import { useCart } from "@/lib/cart-context";
const formatPrice = (value: number) =>
@@ -30,7 +31,7 @@ export default function PaymentPage() {
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full min-w-[760px] text-sm">
<table className="w-full min-w-190 text-sm">
<thead>
<tr className="bg-(--color-border-light)/40 text-left">
<th className="px-4 py-3 font-semibold">Tên sản phẩm</th>
@@ -47,7 +48,7 @@ export default function PaymentPage() {
<td className="px-4 py-3 text-(--color-primary) font-semibold">
{formatPrice(item.price)}
</td>
<td className="px-4 py-3 text-(--color-text-muted) max-w-[280px]">
<td className="px-4 py-3 text-(--color-text-muted) max-w-70">
<p className="line-clamp-2">{item.description}</p>
</td>
<td className="px-4 py-3">
@@ -65,6 +66,7 @@ export default function PaymentPage() {
value={item.quantity}
onChange={(e) => setQuantity(item.id, Number(e.target.value))}
className="w-16 h-8 text-center rounded-lg border border-(--color-border) bg-transparent"
title='Nhập số lượng'
/>
<button
onClick={() => increaseQty(item.id)}
@@ -93,7 +95,7 @@ export default function PaymentPage() {
</div>
</section>
<aside className="xl:w-[340px] shrink-0">
<aside className="xl:w-85 shrink-0">
<div className="sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) bg-card p-4 md:p-5">
<h2 className="text-lg font-bold mb-4">Hóa đơn</h2>
@@ -104,7 +106,7 @@ export default function PaymentPage() {
<div className="mt-4 grid grid-cols-2 gap-3">
<button
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 bg-(--color-primary) text-white hover:bg-(--color-primary-dark) transition-colors"
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 bg-(--color-primary) text-white hover:bg-(--color-primary-dark) transition-colors cursor-pointer"
type="button"
>
<i className="fa-solid fa-money-bill-wave"></i>
@@ -112,12 +114,22 @@ export default function PaymentPage() {
</button>
<button
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors"
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors cursor-pointer"
type="button"
>
<i className="fa-solid fa-qrcode"></i>
<span className="hidden lg:inline">QR Code</span>
</button>
<Link href="/">
<button
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors cursor-pointer"
type="button"
>
<i className="fa-solid fa-arrow-rotate-left"></i>
<span className="hidden lg:inline">Quay về</span>
</button>
</Link>
</div>
</div>
</aside>