Initial commit
This commit is contained in:
dahoud
146
app/(main)/ecommerce/checkout-form/page.tsx
Normal file
146
app/(main)/ecommerce/checkout-form/page.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
'use client';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Checkbox } from 'primereact/checkbox';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function CheckoutForm() {
|
||||
const [value, setValue] = useState('');
|
||||
const [quantities] = useState([1, 1, 1]);
|
||||
const [checked, setChecked] = useState(true);
|
||||
const [checked2, setChecked2] = useState(true);
|
||||
const [selectedCity, setSelectedCity] = useState(null);
|
||||
const [cities] = useState([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="grid grid-nogutter">
|
||||
<div className="col-12 px-4 mt-4 md:mt-6 md:px-6">
|
||||
<span className="text-900 block font-bold text-xl">Checkout</span>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 h-full px-4 py-4 md:px-6">
|
||||
<ul className="flex list-none flex-wrap p-0 mb-6">
|
||||
<li className="flex align-items-center text-primary mr-2">
|
||||
Cart <i className="pi pi-chevron-right text-500 text-xs ml-2"></i>
|
||||
</li>
|
||||
<li className="flex align-items-center text-500 mr-2">
|
||||
Information
|
||||
<i className="pi pi-chevron-right text-500 text-xs ml-2"></i>
|
||||
</li>
|
||||
<li className="flex align-items-center text-500 mr-2">
|
||||
Shipping
|
||||
<i className="pi pi-chevron-right text-500 text-xs ml-2"></i>
|
||||
</li>
|
||||
<li className="flex align-items-center text-500 mr-2">Payment</li>
|
||||
</ul>
|
||||
<div className="grid formgrid">
|
||||
<div className="col-12 field mb-6">
|
||||
<span className="text-900 text-2xl block font-medium mb-5">Contact Information</span>
|
||||
<input id="email" placeholder="Email" type="text" className="p-inputtext w-full mb-4" />
|
||||
<div className="field-checkbox">
|
||||
<Checkbox name="checkbox-1" onChange={(e) => setChecked(e.checked ?? false)} checked={checked} inputId="checkbox-1"></Checkbox>
|
||||
<label htmlFor="checkbox-1">Email me with news and offers</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 field mb-4">
|
||||
<span className="text-900 text-2xl block font-medium mb-5">Shipping</span>
|
||||
<Dropdown options={cities} value={selectedCity} onChange={(e) => setSelectedCity(e.value)} placeholder="Country / Region" optionLabel="name" showClear className="w-full"></Dropdown>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 field mb-4">
|
||||
<input id="name" placeholder="Name" type="text" className="p-inputtext w-full" />
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 field mb-4">
|
||||
<input id="lastname" placeholder="Last Name" type="text" className="p-inputtext w-full" />
|
||||
</div>
|
||||
<div className="col-12 field mb-4">
|
||||
<input id="address" placeholder="Address" type="text" className="p-inputtext w-full" />
|
||||
</div>
|
||||
<div className="col-12 field mb-4">
|
||||
<input id="address2" placeholder="Apartment, suite, etc" type="text" className="p-inputtext w-full" />
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 field mb-4">
|
||||
<input id="pc" placeholder="Postal Code" type="text" className="p-inputtext w-full" />
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 field mb-4">
|
||||
<input id="city" placeholder="City" type="text" className="p-inputtext w-full" />
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 field mb-4">
|
||||
<div className="field-checkbox">
|
||||
<Checkbox name="checkbox-2" onChange={(e) => setChecked2(e.checked ?? false)} checked={checked2} inputId="checkbox-2"></Checkbox>
|
||||
<label htmlFor="checkbox-2">Save for next purchase</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 flex flex-column lg:flex-row justify-content-center align-items-center lg:justify-content-end my-6">
|
||||
<Button className="mt-3 lg:mt-0 w-full lg:w-auto flex-order-2 lg:flex-order-1 lg:mr-4" severity="secondary" outlined label="Return to Cart" icon="pi pi-fw pi-arrow-left"></Button>
|
||||
<Button className="w-full lg:w-auto flex-order-1 lg:flex-order-2" label="Continue to Shipping" icon="pi pi-fw pi-check"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6 px-4 py-4 md:px-6">
|
||||
<div className="pb-3 surface-border">
|
||||
<span className="text-900 font-medium text-xl">Your Cart</span>
|
||||
</div>
|
||||
<div className="flex flex-column lg:flex-row flex-wrap lg:align-items-center py-2 mt-3 surface-border">
|
||||
<img src="/demo/images/ecommerce/shop/shop-1.png" className="w-8rem h-8rem flex-shrink-0 mb-3" alt="product" />
|
||||
<div className="flex-auto lg:ml-3">
|
||||
<div className="flex align-items-center justify-content-between mb-3">
|
||||
<span className="text-900 font-bold">Product Name</span>
|
||||
<span className="text-900 font-bold">$123.00</span>
|
||||
</div>
|
||||
<div className="text-600 text-sm mb-3">Black | Large</div>
|
||||
<div className="flex flex-auto justify-content-between align-items-center">
|
||||
<InputNumber
|
||||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
min={0}
|
||||
inputClassName="w-2rem text-center py-2 px-1 border-transparent outline-none shadow-none"
|
||||
value={quantities[0]}
|
||||
className="border-1 surface-border border-round"
|
||||
decrementButtonClassName="p-button-text text-600 hover:text-primary py-1 px-1"
|
||||
incrementButtonClassName="p-button-text text-600 hover:text-primary py-1 px-1"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
></InputNumber>
|
||||
<Button icon="pi pi-trash" text rounded></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2 mt-3 surface-border">
|
||||
<div className="p-inputgroup mb-3">
|
||||
<InputText type="text" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Promo code" className="w-full" />
|
||||
<Button type="button" label="Apply" disabled={!value}></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2 mt-3">
|
||||
<div className="flex justify-content-between align-items-center mb-3">
|
||||
<span className="text-900 font-medium">Subtotal</span>
|
||||
<span className="text-900">$123.00</span>
|
||||
</div>
|
||||
<div className="flex justify-content-between align-items-center mb-3">
|
||||
<span className="text-900 font-medium">Shipping</span>
|
||||
<span className="text-primary font-bold">Free</span>
|
||||
</div>
|
||||
<div className="flex justify-content-between align-items-center mb-3">
|
||||
<span className="text-900 font-bold">Total</span>
|
||||
<span className="text-900 font-medium text-xl">$123.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2 mt-3 bg-yellow-100 flex align-items-center justify-content-center border-round">
|
||||
<img src="/demo/images/ecommerce/shop/flag.png" className="mr-2" alt="Country Flag" />
|
||||
<span className="text-black-alpha-90 font-medium">No additional duties or taxes.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CheckoutForm;
|
||||
Reference in New Issue
Block a user