100 lines
4.3 KiB
JavaScript
100 lines
4.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import Sidebar from '../../partials/Sidebar';
|
|
import Header from '../../partials/Header';
|
|
import CartItems from '../../partials/ecommerce/CartItems';
|
|
|
|
function Cart() {
|
|
|
|
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="px-4 sm:px-6 lg:px-8 py-8 w-full">
|
|
|
|
{/* Page content */}
|
|
<div className="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
|
|
|
|
{/* 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-indigo-500">Review</span>
|
|
<span>-></span>
|
|
<span className="text-slate-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>
|
|
|
|
{/* Cart items */}
|
|
<CartItems />
|
|
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div>
|
|
<div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
|
|
<div className="text-slate-800 font-semibold mb-2">Order Summary</div>
|
|
{/* Order details */}
|
|
<ul className="mb-4">
|
|
<li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
|
|
<div>Products & Subscriptions</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>Shipping</div>
|
|
<div className="font-medium text-slate-800">-</div>
|
|
</li>
|
|
<li className="text-sm w-full flex justify-between py-3 border-b border-slate-200">
|
|
<div>Taxes</div>
|
|
<div className="font-medium text-slate-800">$48</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>
|
|
{/* Promo box */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center justify-between">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="promo">Promo Code</label>
|
|
<div className="text-sm text-slate-400 italic">optional</div>
|
|
</div>
|
|
<input id="promo" className="form-input w-full mb-2" type="text" />
|
|
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed shadow-none" disabled>Apply Code</button>
|
|
</div>
|
|
<div className="mb-4">
|
|
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white" href="#0">Buy Now - $253.00</button>
|
|
</div>
|
|
<div className="text-xs text-slate-500 italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a className="underline hover:no-underline" href="#0">Terms</a>.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Cart; |