kleap
/
app-dreamy-armadillo-flit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update app/checkout/page.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:29:32 +00:00
parent e16046758c
commit 7b2b77d79b
1 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/checkout/page.tsx Normal file
View File

@ -0,0 +1,113 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Footer } from "@/components/footer";
import { CheckCircle2 } from "lucide-react";
import { useState } from "react";
import Link from "next/link";
export default function CheckoutPage() {
const [isOrdered, setIsOrdered] = useState(false);
if (isOrdered) {
return (
<main className="min-h-screen bg-neutral-50">
<Container className="py-20 text-center">
<div className="bg-white p-12 rounded-3xl shadow-sm max-w-md mx-auto">
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
<CheckCircle2 className="w-10 h-10 text-green-600" />
</div>
<Heading level={2} className="text-2xl mb-4">Order Placed Successfully!</Heading>
<p className="text-neutral-500 mb-8">Thank you for shopping with BharatStore. Your order #BS-12345 is being processed.</p>
<Button asChild className="rounded-full px-8">
<Link href="/">Back to Home</Link>
</Button>
</div>
</Container>
<Footer />
</main>
);
}
return (
<main className="min-h-screen bg-neutral-50">
<Container className="py-12">
<Heading className="mb-8">Checkout</Heading>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2 space-y-6">
<div className="bg-white p-8 rounded-3xl shadow-sm">
<h3 className="font-bold text-xl mb-6">Shipping Address</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="name">Full Name</Label>
<Input id="name" placeholder="John Doe" />
</div>
<div className="space-y-2">
<Label htmlFor="phone">Phone Number</Label>
<Input id="phone" placeholder="+91 98765 43210" />
</div>
<div className="md:col-span-2 space-y-2">
<Label htmlFor="address">Address</Label>
<Input id="address" placeholder="House No, Street, Area" />
</div>
<div className="space-y-2">
<Label htmlFor="city">City</Label>
<Input id="city" placeholder="Mumbai" />
</div>
<div className="space-y-2">
<Label htmlFor="pincode">Pincode</Label>
<Input id="pincode" placeholder="400001" />
</div>
</div>
</div>
<div className="bg-white p-8 rounded-3xl shadow-sm">
<h3 className="font-bold text-xl mb-6">Payment Method</h3>
<div className="space-y-4">
<div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
<input type="radio" name="payment" id="upi" className="mr-3" defaultChecked />
<Label htmlFor="upi" className="flex-1 cursor-pointer font-medium">UPI (Google Pay, PhonePe, Paytm)</Label>
</div>
<div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
<input type="radio" name="payment" id="card" className="mr-3" />
<Label htmlFor="card" className="flex-1 cursor-pointer font-medium">Credit / Debit Card</Label>
</div>
<div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
<input type="radio" name="payment" id="cod" className="mr-3" />
<Label htmlFor="cod" className="flex-1 cursor-pointer font-medium">Cash on Delivery</Label>
</div>
</div>
</div>
</div>
<div className="lg:col-span-1">
<div className="bg-white p-6 rounded-3xl shadow-sm sticky top-24">
<h3 className="font-bold text-lg mb-6">Order Summary</h3>
<div className="space-y-4 mb-6">
<div className="flex justify-between text-neutral-600">
<span>Items Total</span>
<span>₹2,499</span>
</div>
<div className="flex justify-between text-neutral-600">
<span>Delivery</span>
<span className="text-green-600 font-medium">FREE</span>
</div>
<div className="pt-4 border-t flex justify-between font-bold text-xl text-neutral-900">
<span>Total Payable</span>
<span>₹2,499</span>
</div>
</div>
<Button onClick={() => setIsOrdered(true)} className="w-full rounded-full py-6 text-lg">
Place Order
</Button>
</div>
</div>
</div>
</Container>
<Footer />
</main>
);
}