145 lines
6.8 KiB
JavaScript
145 lines
6.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import Sidebar from '../../partials/Sidebar';
|
|
import Header from '../../partials/Header';
|
|
import CartItems from '../../partials/ecommerce/CartItems';
|
|
|
|
function Cart2() {
|
|
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
|
|
{/* Sidebar */}
|
|
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
{/* Content area */}
|
|
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
|
|
|
{/* Site header */}
|
|
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
<main>
|
|
<div className="lg:relative lg:flex">
|
|
|
|
{/* Content */}
|
|
<div className="px-4 sm:px-6 lg:px-8 py-8 lg:grow lg:pr-8 xl:pr-16 2xl:ml-[80px]">
|
|
<div className="lg:max-w-[640px] lg:mx-auto">
|
|
|
|
{/* Cart items */}
|
|
<div className="mb-6 lg:mb-0">
|
|
<div className="mb-3">
|
|
<div className="flex text-sm font-medium text-slate-400 space-x-2">
|
|
<span className="text-slate-500">Review</span>
|
|
<span>-></span>
|
|
<span className="text-indigo-500">Payment</span>
|
|
<span>-></span>
|
|
<span className="text-slate-500">Confirm</span>
|
|
</div>
|
|
</div>
|
|
<header className="mb-2">
|
|
{/* Title */}
|
|
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Shopping Cart (3) ✨</h1>
|
|
</header>
|
|
<CartItems />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div>
|
|
<div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[320px] xl:w-[352px] 2xl:w-[calc(352px+80px)] lg:h-[calc(100vh-64px)]">
|
|
<div className="py-8 px-4 lg:px-8 2xl:px-12">
|
|
<div className="max-w-sm mx-auto lg:max-w-none">
|
|
<h2 className="text-2xl text-slate-800 font-bold mb-6">Review & Pay</h2>
|
|
<div className="space-y-6">
|
|
|
|
{/* Order summary */}
|
|
<div>
|
|
<div className="text-slate-800 font-semibold mb-2">Order Summary</div>
|
|
<ul className="mb-4">
|
|
<li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
|
|
<div>Subtotal</div>
|
|
<div className="font-medium text-slate-800">$205</div>
|
|
</li>
|
|
<li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
|
|
<div>Total due (including taxes)</div>
|
|
<div className="font-medium text-emerald-600">$253</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Payment Details */}
|
|
<div>
|
|
<div className="text-slate-800 font-semibold mb-4">Payment Details</div>
|
|
<div className="space-y-4">
|
|
{/* Card Number */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-nr">Card Number <span className="text-rose-500">*</span></label>
|
|
<input id="card-nr" className="form-input w-full" type="text" placeholder="1234 1234 1234 1234" />
|
|
</div>
|
|
{/* Expiry and CVC */}
|
|
<div className="flex space-x-4">
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-expiry">Expiry Date <span className="text-rose-500">*</span></label>
|
|
<input id="card-expiry" className="form-input w-full" type="text" placeholder="MM/YY" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-cvc">CVC <span className="text-rose-500">*</span></label>
|
|
<input id="card-cvc" className="form-input w-full" type="text" placeholder="CVC" />
|
|
</div>
|
|
</div>
|
|
{/* Name on Card */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-name">Name on Card <span className="text-rose-500">*</span></label>
|
|
<input id="card-name" className="form-input w-full" type="text" placeholder="John Doe" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Details */}
|
|
<div>
|
|
<div className="text-slate-800 font-semibold mb-4">Additional Details</div>
|
|
<div className="space-y-4">
|
|
{/* Email */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-email">Email <span className="text-rose-500">*</span></label>
|
|
<input id="card-email" className="form-input w-full" type="email" placeholder="john@company.com" />
|
|
</div>
|
|
{/* Country */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-country">Country <span className="text-rose-500">*</span></label>
|
|
<select id="card-country" className="form-select w-full">
|
|
<option>Italy</option>
|
|
<option>USA</option>
|
|
<option>United Kingdom</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<div className="mb-4">
|
|
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Pay $253.00</button>
|
|
</div>
|
|
<div className="text-xs text-slate-500 italic text-center">You'll be charged $253, including $48 for VAT in Italy</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Cart2; |