From 5e6250b2a43eda1f01ca03497e37928d9be9100a Mon Sep 17 00:00:00 2001 From: jyswee Date: Thu, 23 Jul 2026 22:55:39 +0000 Subject: [PATCH] Seed: ecommerce template (24 files) --- src/pages/Checkout.tsx | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/pages/Checkout.tsx b/src/pages/Checkout.tsx index d42b0fe..44ecaa8 100644 --- a/src/pages/Checkout.tsx +++ b/src/pages/Checkout.tsx @@ -92,8 +92,8 @@ export default function CheckoutPage() {
{steps.map((s, i) => (
-
= s.num ? "text-stone-900" : "text-stone-400"}`} onClick={() => s.num < step && setStep(s.num)}> -
= s.num ? "text-stone-900" : "text-stone-400"}`} onClick={() => s.num < step && setStep(s.num)}> +
s.num ? "bg-green-500/80 text-white" : step === s.num ? "bg-stone-900/80 text-white" : "bg-white/80 dark:bg-slate-900/80 text-stone-500" }`}> {step > s.num ? : s.num} @@ -101,7 +101,7 @@ export default function CheckoutPage() { {s.label}
{i < steps.length - 1 && ( -
s.num ? "bg-green-500" : "bg-stone-200"}`} /> +
s.num ? "bg-green-500" : "bg-stone-200"}`} /> )}
))} @@ -122,7 +122,7 @@ export default function CheckoutPage() {
- updateShipping("firstName", e.target.value)} placeholder="John" className={`\${errors.firstName ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updateShipping("firstName", e.target.value)} placeholder="John" className={`${errors.firstName ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.firstName && shipping.firstName.trim() && }
{errors.firstName &&

{errors.firstName}

} @@ -130,7 +130,7 @@ export default function CheckoutPage() {
- updateShipping("lastName", e.target.value)} placeholder="Doe" className={`\${errors.lastName ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updateShipping("lastName", e.target.value)} placeholder="Doe" className={`${errors.lastName ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.lastName && shipping.lastName.trim() && }
{errors.lastName &&

{errors.lastName}

} @@ -138,7 +138,7 @@ export default function CheckoutPage() {
- updateShipping("email", e.target.value)} placeholder="john@example.com" className={`\${errors.email ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updateShipping("email", e.target.value)} placeholder="john@example.com" className={`${errors.email ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.email && shipping.email?.includes("@") && }
{errors.email &&

{errors.email}

} @@ -146,7 +146,7 @@ export default function CheckoutPage() {
- updateShipping("address", e.target.value)} placeholder="123 Main Street" className={`\${errors.address ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updateShipping("address", e.target.value)} placeholder="123 Main Street" className={`${errors.address ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.address && shipping.address.trim() && }
{errors.address &&

{errors.address}

} @@ -154,7 +154,7 @@ export default function CheckoutPage() {
- updateShipping("city", e.target.value)} placeholder="New York" className={`\${errors.city ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updateShipping("city", e.target.value)} placeholder="New York" className={`${errors.city ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.city && shipping.city.trim() && }
{errors.city &&

{errors.city}

} @@ -167,7 +167,7 @@ export default function CheckoutPage() {
- updateShipping("zip", e.target.value)} placeholder="10001" className={`\${errors.zip ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updateShipping("zip", e.target.value)} placeholder="10001" className={`${errors.zip ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.zip && shipping.zip.trim() && }
{errors.zip &&

{errors.zip}

} @@ -203,7 +203,7 @@ export default function CheckoutPage() {
- updatePayment("cardNumber", e.target.value)} placeholder="4242 4242 4242 4242" className={`\${errors.cardNumber ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updatePayment("cardNumber", e.target.value)} placeholder="4242 4242 4242 4242" className={`${errors.cardNumber ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.cardNumber && payment.cardNumber.replace(/\s/g, "").length >= 16 && }
{errors.cardNumber &&

{errors.cardNumber}

} @@ -212,7 +212,7 @@ export default function CheckoutPage() {
- updatePayment("expiry", e.target.value)} placeholder="MM/YY" className={`\${errors.expiry ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updatePayment("expiry", e.target.value)} placeholder="MM/YY" className={`${errors.expiry ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.expiry && payment.expiry.trim() && }
{errors.expiry &&

{errors.expiry}

} @@ -220,7 +220,7 @@ export default function CheckoutPage() {
- updatePayment("cvv", e.target.value)} placeholder="123" className={`\${errors.cvv ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> + updatePayment("cvv", e.target.value)} placeholder="123" className={`${errors.cvv ? "border-red-500 focus-visible:ring-red-500" : ""}`} /> {!errors.cvv && payment.cvv.length >= 3 && }
{errors.cvv &&

{errors.cvv}

} @@ -260,7 +260,7 @@ export default function CheckoutPage() {

{item.name}

Qty: {item.quantity} | {item.size} | {item.color}

- \${(item.price * item.quantity).toFixed(2)} + ${(item.price * item.quantity).toFixed(2)}
))}
@@ -308,7 +308,7 @@ export default function CheckoutPage() { {items.map((item) => (
{item.name} x{item.quantity} - \${(item.price * item.quantity).toFixed(2)} + ${(item.price * item.quantity).toFixed(2)}
))}
@@ -316,23 +316,23 @@ export default function CheckoutPage() {
Subtotal - \${total.toFixed(2)} + ${total.toFixed(2)}
Shipping - {shippingCost === 0 ? "Free" : `\$\${shippingCost.toFixed(2)}`} + {shippingCost === 0 ? "Free" : `$${shippingCost.toFixed(2)}`}
Tax - \${tax.toFixed(2)} + ${tax.toFixed(2)}
Total - \${grandTotal.toFixed(2)} + ${grandTotal.toFixed(2)}