Skip to content

Commit 0d3005a

Browse files
Josephat-SJosephat-S
authored
Merge pull request #61 from Ebyte-Lab/feat/ecommerce-template
Implement full design for eCommerce platform
2 parents 64b13e5 + efea417 commit 0d3005a

8 files changed

Lines changed: 1203 additions & 79 deletions

File tree

‎templates/ecommerce/nextjs-monolith/app/cart/page.tsx‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import Link from 'next/link';
2+
3+
export default function CartPage() {
4+
const cartItems = [
5+
{ name: 'Classic White Sneakers', price: 89.99, quantity: 1, color: 'White', size: '10', imageColor: '#f1f5f9' },
6+
{ name: 'Leather Crossbody Bag', price: 129.99, quantity: 1, color: 'Tan', size: 'One Size', imageColor: '#d4a574' },
7+
{ name: 'Oversized Wool Coat', price: 249.99, quantity: 1, color: 'Charcoal', size: 'M', imageColor: '#1e293b' },
8+
];
9+
10+
const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
11+
const tax = subtotal * 0.08;
12+
const total = subtotal + tax;
13+
14+
return (
15+
<div className="min-h-screen bg-background">
16+
<div className="max-w-7xl mx-auto px-6 py-10">
17+
<h1 className="text-3xl font-bold text-foreground mb-2">Shopping Cart</h1>
18+
<p className="text-text-secondary mb-8">{cartItems.length} items in your cart</p>
19+
20+
<div className="flex flex-col lg:flex-row gap-8">
21+
{/* Cart Items */}
22+
<div className="flex-1">
23+
<div className="border border-border rounded-theme bg-card p-6">
24+
{cartItems.map((item, index) => (
25+
<div key={index} className={`flex gap-4 py-6 ${index !== 0 ? 'border-t border-border' : ''}`}>
26+
{/* Image */}
27+
<div
28+
className="w-24 h-24 rounded-theme flex-shrink-0"
29+
style=\{{ backgroundColor: item.imageColor }}
30+
/>
31+
32+
{/* Info */}
33+
<div className="flex-1 min-w-0">
34+
<div className="flex items-start justify-between gap-4">
35+
<div>
36+
<h3 className="font-medium text-foreground">{item.name}</h3>
37+
<p className="text-sm text-text-secondary mt-1">
38+
{item.color} &middot; Size {item.size}
39+
</p>
40+
</div>
41+
{/* Remove Button */}
42+
<button className="text-text-secondary hover:text-red-500 transition p-1" aria-label="Remove item">
43+
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
44+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
45+
</svg>
46+
</button>
47+
</div>
48+
49+
{/* Quantity & Price */}
50+
<div className="flex items-center justify-between mt-4">
51+
<div className="flex items-center border border-border rounded-theme">
52+
<button className="px-3 py-1.5 text-text-secondary hover:text-foreground transition" aria-label="Decrease quantity">
53+
&minus;
54+
</button>
55+
<span className="px-4 py-1.5 text-sm font-medium text-foreground border-x border-border">
56+
{item.quantity}
57+
</span>
58+
<button className="px-3 py-1.5 text-text-secondary hover:text-foreground transition" aria-label="Increase quantity">
59+
&#43;
60+
</button>
61+
</div>
62+
<span className="font-semibold text-foreground text-lg">
63+
${(item.price * item.quantity).toFixed(2)}
64+
</span>
65+
</div>
66+
</div>
67+
</div>
68+
))}
69+
</div>
70+
71+
{/* Continue Shopping */}
72+
<Link
73+
href="/products"
74+
className="inline-flex items-center gap-2 mt-6 text-sm font-medium text-primary hover:text-primary-hover transition"
75+
>
76+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
77+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
78+
</svg>
79+
Continue Shopping
80+
</Link>
81+
</div>
82+
83+
{/* Order Summary */}
84+
<div className="w-full lg:w-96">
85+
<div className="border border-border rounded-theme bg-card p-6 lg:sticky lg:top-6">
86+
<h2 className="text-lg font-semibold text-foreground mb-5">Order Summary</h2>
87+
88+
<div className="space-y-3 text-sm">
89+
<div className="flex justify-between">
90+
<span className="text-text-secondary">Subtotal</span>
91+
<span className="font-medium text-foreground">${subtotal.toFixed(2)}</span>
92+
</div>
93+
<div className="flex justify-between">
94+
<span className="text-text-secondary">Shipping</span>
95+
<span className="text-text-secondary">Calculated at checkout</span>
96+
</div>
97+
<div className="flex justify-between">
98+
<span className="text-text-secondary">Estimated Tax</span>
99+
<span className="font-medium text-foreground">${tax.toFixed(2)}</span>
100+
</div>
101+
</div>
102+
103+
<div className="border-t border-border mt-5 pt-5">
104+
<div className="flex justify-between items-center">
105+
<span className="text-lg font-semibold text-foreground">Total</span>
106+
<span className="text-2xl font-bold text-foreground">${total.toFixed(2)}</span>
107+
</div>
108+
</div>
109+
110+
<Link
111+
href="/checkout"
112+
className="mt-6 block w-full py-3.5 rounded-theme bg-primary text-white font-semibold text-center hover:bg-primary-hover transition shadow-lg shadow-primary/25"
113+
>
114+
Proceed to Checkout
115+
</Link>
116+
117+
<Link
118+
href="/products"
119+
className="mt-3 block w-full py-3 rounded-theme border border-border text-foreground font-medium text-center hover:bg-bg-secondary transition"
120+
>
121+
Continue Shopping
122+
</Link>
123+
124+
{/* Payment Methods */}
125+
<div className="mt-6 pt-5 border-t border-border">
126+
<p className="text-xs text-text-secondary mb-3">Accepted Payment Methods</p>
127+
<div className="flex flex-wrap gap-2">
128+
{['Visa', 'Mastercard', 'Amex', 'PayPal'].map((method) => (
129+
<span
130+
key={method}
131+
className="px-3 py-1.5 text-xs font-medium border border-border rounded-theme bg-bg-secondary text-text-secondary"
132+
>
133+
{method}
134+
</span>
135+
))}
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
);
144+
}

0 commit comments

Comments
 (0)