first commit
This commit is contained in:
kandrusyak
282
src/pages/ecommerce/Cart3.jsx
Normal file
282
src/pages/ecommerce/Cart3.jsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
import ProductImage01 from '../../images/related-product-01.jpg';
|
||||
import ProductImage02 from '../../images/related-product-02.jpg';
|
||||
import ProductImage03 from '../../images/related-product-03.jpg';
|
||||
|
||||
function Cart3() {
|
||||
|
||||
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-slate-500">Payment</span>
|
||||
<span>-></span>
|
||||
<span className="text-indigo-500">Confirm</span>
|
||||
</div>
|
||||
</div>
|
||||
<header className="mb-6">
|
||||
{/* Title */}
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-2">Thank you for your order ✨</h1>
|
||||
<p>You will soon receive a confirmation email with details of your order and a link to download the files.</p>
|
||||
</header>
|
||||
{/* Billing Information */}
|
||||
<div>
|
||||
<div className="text-slate-800 font-semibold mb-4">Billing Information</div>
|
||||
<form>
|
||||
<div className="space-y-4">
|
||||
{/* 1st row */}
|
||||
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-name">
|
||||
Name
|
||||
</label>
|
||||
<input id="card-name" className="form-input w-full" type="text" defaultValue="Patrick" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-surname">
|
||||
Surname
|
||||
</label>
|
||||
<input id="card-surname" className="form-input w-full" type="text" defaultValue="Sullivan" />
|
||||
</div>
|
||||
</div>
|
||||
{/* 2nd row */}
|
||||
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-address">
|
||||
Address
|
||||
</label>
|
||||
<input id="card-address" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-city">
|
||||
Town/City
|
||||
</label>
|
||||
<input id="card-city" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
{/* 3rd row */}
|
||||
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-state">
|
||||
State/Country
|
||||
</label>
|
||||
<input id="card-state" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<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>
|
||||
{/* 4th row */}
|
||||
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-postcode">
|
||||
Postcode
|
||||
</label>
|
||||
<input id="card-postcode" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="card-vat">
|
||||
VAT ID
|
||||
</label>
|
||||
<input id="card-vat" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<button type="submit" className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500">
|
||||
Download Invoice
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<hr className="my-6 border-t border-slate-200" />
|
||||
{/* Billing footer */}
|
||||
<div className="bg-white rounded border border-slate-200 p-4">
|
||||
<div className="text-center md:text-left md:flex md:items-center md:justify-between space-y-2 md:space-y-0 md:space-x-2">
|
||||
<div className="text-sm">
|
||||
Enjoy a <span className="font-medium text-slate-800">20% OFF</span> discount on your next order 🎉
|
||||
</div>
|
||||
<div className="relative inline-flex text-center px-3 py-1 rounded bg-emerald-500">
|
||||
<div
|
||||
className="absolute w-3 h-3 rounded-full bg-white left-0 -translate-x-1/2 top-1/2 -translate-y-1/2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
className="absolute w-3 h-3 rounded-full bg-white right-0 translate-x-1/2 top-1/2 -translate-y-1/2"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="text-sm text-emerald-50 font-medium uppercase">XMAS22</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Order Summary</h2>
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Order Details */}
|
||||
<div>
|
||||
<div className="text-slate-800 font-semibold mb-2">Order Details</div>
|
||||
{/* Cart items */}
|
||||
<ul>
|
||||
{/* Cart item */}
|
||||
<li className="flex items-center py-3 border-b border-slate-200">
|
||||
<a className="block mr-2 xl:mr-4 shrink-0" href="#0">
|
||||
<img className="w-16 xl:w-20" src={ProductImage01} width="200" height="142" alt="Product 01" />
|
||||
</a>
|
||||
<div className="grow">
|
||||
<a href="#0">
|
||||
<h4 className="text-sm font-medium text-slate-800 leading-tight">The Complete Front-End Development Course!</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">$69</div>
|
||||
</li>
|
||||
{/* Cart item */}
|
||||
<li className="flex items-center py-3 border-b border-slate-200">
|
||||
<a className="block mr-2 xl:mr-4 shrink-0" href="#0">
|
||||
<img className="w-16 xl:w-20" src={ProductImage02} width="200" height="142" alt="Product 02" />
|
||||
</a>
|
||||
<div className="grow">
|
||||
<a href="#0">
|
||||
<h4 className="text-sm font-medium text-slate-800 leading-tight">Web Development Ultimate Course 2021</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">$69</div>
|
||||
</li>
|
||||
{/* Cart item */}
|
||||
<li className="flex items-center py-3 border-b border-slate-200">
|
||||
<a className="block mr-2 xl:mr-4 shrink-0" href="#0">
|
||||
<img className="w-16 xl:w-20" src={ProductImage03} width="200" height="142" alt="Product 03" />
|
||||
</a>
|
||||
<div className="grow">
|
||||
<a href="#0">
|
||||
<h4 className="text-sm font-medium text-slate-800 leading-tight">Full-Stack JavaScript Course!</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">$69</div>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Fees, discount and total */}
|
||||
<ul>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Subtotal</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">$205</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Taxes</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">$48</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="flex items-center">
|
||||
<span className="text-sm mr-2">Discount</span>
|
||||
<span className="text-xs inline-flex whitespace-nowrap font-medium uppercase bg-slate-200 text-slate-500 rounded-full text-center px-2.5 py-1">
|
||||
XMAS22
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">-$25</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Total</div>
|
||||
<div className="text-sm font-medium text-emerald-600 ml-2">$205</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Payment Details */}
|
||||
<div>
|
||||
<div className="text-slate-800 font-semibold mb-4">Payment Details</div>
|
||||
<div className="text-sm rounded border border-slate-200 p-3">
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
{/* CC details */}
|
||||
<div className="flex items-center">
|
||||
{/* Mastercard icon */}
|
||||
<svg className="shrink-0 mr-3" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#1E293B" width="32" height="24" rx="3" />
|
||||
<ellipse fill="#E61C24" cx="12.522" cy="12" rx="5.565" ry="5.647" />
|
||||
<ellipse fill="#F99F1B" cx="19.432" cy="12" rx="5.565" ry="5.647" />
|
||||
<path
|
||||
d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
|
||||
fill="#F26622"
|
||||
/>
|
||||
</svg>
|
||||
<div>
|
||||
Ending with <span className="text-slate-800">2478</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Expiry */}
|
||||
<div className="italic ml-2">Expires 12/23</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="mb-4">
|
||||
<Link to="/ecommerce/pay" className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
View Your Order
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 italic text-center">
|
||||
Should you ever change your mind, we offer a 14-day, no-questions-asked refund policy.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cart3;
|
||||
Reference in New Issue
Block a user