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"; "use client";
import Link from 'next/link';
import { useCart } from "@/lib/cart-context"; import { useCart } from "@/lib/cart-context";
const formatPrice = (value: number) => const formatPrice = (value: number) =>
@@ -30,7 +31,7 @@ export default function PaymentPage() {
</div> </div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full min-w-[760px] text-sm"> <table className="w-full min-w-190 text-sm">
<thead> <thead>
<tr className="bg-(--color-border-light)/40 text-left"> <tr className="bg-(--color-border-light)/40 text-left">
<th className="px-4 py-3 font-semibold">Tên sản phẩm</th> <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"> <td className="px-4 py-3 text-(--color-primary) font-semibold">
{formatPrice(item.price)} {formatPrice(item.price)}
</td> </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> <p className="line-clamp-2">{item.description}</p>
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3">
@@ -65,6 +66,7 @@ export default function PaymentPage() {
value={item.quantity} value={item.quantity}
onChange={(e) => setQuantity(item.id, Number(e.target.value))} onChange={(e) => setQuantity(item.id, Number(e.target.value))}
className="w-16 h-8 text-center rounded-lg border border-(--color-border) bg-transparent" className="w-16 h-8 text-center rounded-lg border border-(--color-border) bg-transparent"
title='Nhập số lượng'
/> />
<button <button
onClick={() => increaseQty(item.id)} onClick={() => increaseQty(item.id)}
@@ -93,7 +95,7 @@ export default function PaymentPage() {
</div> </div>
</section> </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"> <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> <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"> <div className="mt-4 grid grid-cols-2 gap-3">
<button <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" type="button"
> >
<i className="fa-solid fa-money-bill-wave"></i> <i className="fa-solid fa-money-bill-wave"></i>
@@ -112,12 +114,22 @@ export default function PaymentPage() {
</button> </button>
<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" type="button"
> >
<i className="fa-solid fa-qrcode"></i> <i className="fa-solid fa-qrcode"></i>
<span className="hidden lg:inline">QR Code</span> <span className="hidden lg:inline">QR Code</span>
</button> </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>
</div> </div>
</aside> </aside>
components/CartFab.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function CartFab() {
<Link <Link
href="/payment" href="/payment"
aria-label="Đi đến trang thanh toán" aria-label="Đi đến trang thanh toán"
className="fixed right-5 bottom-6 z-[70] w-14 h-14 rounded-full className="fixed right-5 bottom-6 z-70 w-14 h-14 rounded-full
bg-(--color-primary) text-white shadow-xl bg-(--color-primary) text-white shadow-xl
flex items-center justify-center flex items-center justify-center
hover:bg-(--color-primary-dark) hover:bg-(--color-primary-dark)