fix: Remove all demo/uikit pages for production
This commit is contained in:
dahoud
@@ -1,146 +0,0 @@
|
|||||||
'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;
|
|
||||||
@@ -1,291 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Chip } from 'primereact/chip';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { Editor } from 'primereact/editor';
|
|
||||||
import { FileUpload, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from 'primereact/fileupload';
|
|
||||||
import { InputSwitch } from 'primereact/inputswitch';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { classNames } from 'primereact/utils';
|
|
||||||
import React, { useRef, useState } from 'react';
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
|
|
||||||
function NewProduct() {
|
|
||||||
const colorOptions = [
|
|
||||||
{ name: 'Black', background: 'bg-gray-900' },
|
|
||||||
{ name: 'Orange', background: 'bg-orange-500' },
|
|
||||||
{ name: 'Navy', background: 'bg-blue-500' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const [product, setProduct] = useState<Demo.Product>({
|
|
||||||
name: '',
|
|
||||||
price: '',
|
|
||||||
code: '',
|
|
||||||
sku: '',
|
|
||||||
status: 'Draft',
|
|
||||||
tags: ['Nike', 'Sneaker'],
|
|
||||||
category: 'Sneakers',
|
|
||||||
colors: [],
|
|
||||||
stock: 'Sneakers',
|
|
||||||
inStock: true,
|
|
||||||
description: '',
|
|
||||||
images: []
|
|
||||||
});
|
|
||||||
|
|
||||||
const [selectedCategory, setSelectedCategory] = useState(product.category);
|
|
||||||
const [selectedStock, setSelectedStock] = useState(product.category);
|
|
||||||
const categoryOptions = ['Sneakers', 'Apparel', 'Socks'];
|
|
||||||
|
|
||||||
const fileUploader = useRef<FileUpload>(null);
|
|
||||||
|
|
||||||
const chipTemplate = (tag: string) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<span className="mr-3">{tag}</span>
|
|
||||||
<span className="chip-remove-icon flex align-items-center justify-content-center border-1 surface-border bg-gray-100 border-circle cursor-pointer" onClick={() => onChipRemove(tag)}>
|
|
||||||
<i className="pi pi-fw pi-times text-black-alpha-60"></i>
|
|
||||||
</span>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onImageMouseOver = (ref: React.RefObject<Button>, fileName: string) => {
|
|
||||||
if ((ref.current as any).id === fileName) (ref.current as any).style.display = 'flex';
|
|
||||||
};
|
|
||||||
|
|
||||||
const onImageMouseLeave = (ref: React.RefObject<Button>, fileName: string) => {
|
|
||||||
if ((ref.current as any).id === fileName) {
|
|
||||||
(ref.current as any).style.display = 'none';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onChipRemove = (item: string) => {
|
|
||||||
const newTags = (product.tags as string[])?.filter((i) => i !== item);
|
|
||||||
setProduct((prevState) => ({ ...prevState, tags: newTags }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const onColorSelect = (colorName: string, i: number) => {
|
|
||||||
if ((product.colors as string[])?.indexOf(colorName) !== -1) {
|
|
||||||
(product.colors as string[]).splice((product.colors as string[]).indexOf(colorName), 1);
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
colors: (prevState.colors as string[]).filter((color) => color !== colorName)
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
colors: [...(prevState.colors as string[]), colorName]
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onUpload = (event: FileUploadUploadEvent | FileUploadSelectEvent) => {
|
|
||||||
setProduct((prevState) => ({ ...prevState, images: event.files }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const onFileUploadClick = () => {
|
|
||||||
const inputEl = fileUploader.current?.getInput();
|
|
||||||
inputEl?.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const emptyTemplate = () => {
|
|
||||||
return (
|
|
||||||
<div className="h-15rem overflow-y-auto py-3 border-round" style={{ cursor: 'copy' }}>
|
|
||||||
<div className="flex flex-column w-full h-full justify-content-center align-items-center" onClick={onFileUploadClick}>
|
|
||||||
<i className="pi pi-file text-4xl text-primary"></i>
|
|
||||||
<span className="block font-semibold text-900 text-lg mt-3">Drop or select images</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemTemplate = (file: object, props: ItemTemplateOptions) => {
|
|
||||||
const item = file as Demo.Base;
|
|
||||||
const buttonEl = React.createRef<Button>();
|
|
||||||
return (
|
|
||||||
<div className="flex h-15rem overflow-y-auto py-3 border-round" style={{ cursor: 'copy' }} onClick={onFileUploadClick}>
|
|
||||||
<div className="flex flex-row flex-wrap gap-3 border-round">
|
|
||||||
<div
|
|
||||||
className="h-full relative w-7rem h-7rem border-3 border-transparent border-round hover:bg-primary transition-duration-100 cursor-auto"
|
|
||||||
onMouseEnter={() => onImageMouseOver(buttonEl, item.name)}
|
|
||||||
onMouseLeave={() => onImageMouseLeave(buttonEl, item.name)}
|
|
||||||
style={{ padding: '1px' }}
|
|
||||||
>
|
|
||||||
<img src={item.objectURL} className="w-full h-full border-round shadow-2" alt={item.name} />
|
|
||||||
<Button
|
|
||||||
ref={buttonEl}
|
|
||||||
id={item.name}
|
|
||||||
type="button"
|
|
||||||
icon="pi pi-times"
|
|
||||||
className="hover:flex text-sm absolute justify-content-center align-items-center cursor-pointer w-2rem h-2rem"
|
|
||||||
rounded
|
|
||||||
style={{ top: '-10px', right: '-10px', display: 'none' }}
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
props.onRemove(event);
|
|
||||||
}}
|
|
||||||
></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<span className="block text-900 font-bold text-xl mb-4">Create Product</span>
|
|
||||||
<div className="grid grid-nogutter flex-wrap gap-3 p-fluid">
|
|
||||||
<div className="col-12 lg:col-8">
|
|
||||||
<div className="grid formgrid">
|
|
||||||
<div className="col-12 field">
|
|
||||||
<InputText
|
|
||||||
type="text"
|
|
||||||
value={product.name}
|
|
||||||
onChange={(e) =>
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
name: e.target.value
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
placeholder="Product Name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-4 field">
|
|
||||||
<InputText
|
|
||||||
type="text"
|
|
||||||
placeholder="Price"
|
|
||||||
value={product.price?.toString()}
|
|
||||||
onChange={(e) =>
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
price: parseFloat(e.target.value) || undefined
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-4 field">
|
|
||||||
<InputText
|
|
||||||
type="text"
|
|
||||||
placeholder="Product Code"
|
|
||||||
value={product.code}
|
|
||||||
onChange={(e) =>
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
code: e.target.value
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-4 field">
|
|
||||||
<InputText
|
|
||||||
type="text"
|
|
||||||
placeholder="Product SKU"
|
|
||||||
value={product.sku as string}
|
|
||||||
onChange={(e) =>
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
sku: e.target.value
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 field">
|
|
||||||
<Editor value={product.description} style={{ height: '250px' }}></Editor>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 field">
|
|
||||||
<FileUpload
|
|
||||||
ref={fileUploader}
|
|
||||||
name="demo[]"
|
|
||||||
url="./upload.php"
|
|
||||||
itemTemplate={itemTemplate}
|
|
||||||
emptyTemplate={emptyTemplate}
|
|
||||||
onUpload={onUpload}
|
|
||||||
customUpload={true}
|
|
||||||
multiple
|
|
||||||
onSelect={onUpload}
|
|
||||||
accept="image/*"
|
|
||||||
auto
|
|
||||||
className={'upload-button-hidden border-1 surface-border surface-card border-round'}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 w-full lg:w-3 xl:w-4 flex flex-column row-gap-3">
|
|
||||||
<div className="border-1 surface-border border-round">
|
|
||||||
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Publish</span>
|
|
||||||
<div className="p-3">
|
|
||||||
<div className="bg-gray-100 py-2 px-3 flex align-items-center border-round">
|
|
||||||
<span className="text-black-alpha-90 font-bold mr-3">Status:</span>
|
|
||||||
<span className="text-black-alpha-60 font-semibold">{product.status as string}</span>
|
|
||||||
<Button type="button" icon="pi pi-fw pi-pencil" className="text-black-alpha-60 ml-auto" text rounded></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-1 surface-border border-round">
|
|
||||||
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Tags</span>
|
|
||||||
<div className="p-3 flex flex-wrap gap-1">
|
|
||||||
{(product.tags as string[])?.map((tag, i) => {
|
|
||||||
return <Chip key={i} className="mr-2 py-2 px-3 text-900 font-bold surface-card border-1 surface-border" style={{ borderRadius: '20px' }} template={() => chipTemplate(tag)} />;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-1 surface-border border-round">
|
|
||||||
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Category</span>
|
|
||||||
<div className="p-3">
|
|
||||||
<Dropdown options={categoryOptions} value={selectedCategory} onChange={(e) => setSelectedCategory(e.value)} placeholder="Select a category"></Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-1 surface-border border-round">
|
|
||||||
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Colors</span>
|
|
||||||
<div className="p-3 flex">
|
|
||||||
{colorOptions.map((color, i) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={classNames('w-2rem h-2rem mr-2 border-1 surface-border border-circle cursor-pointer flex justify-content-center align-items-center', color.background)}
|
|
||||||
onClick={() => {
|
|
||||||
onColorSelect(color.name, i);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(product.colors as string[]).includes(color.name) ? <i key={i} className="pi pi-check text-sm text-white z-5"></i> : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-1 surface-border border-round">
|
|
||||||
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Stock</span>
|
|
||||||
<div className="p-3">
|
|
||||||
<Dropdown options={categoryOptions} value={selectedStock} onChange={(e) => setSelectedStock(e.value)} placeholder="Select stock"></Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-1 surface-border flex justify-content-between align-items-center py-2 px-3 border-round">
|
|
||||||
<span className="text-900 font-bold p-3">In stock</span>
|
|
||||||
<InputSwitch
|
|
||||||
checked={product.inStock as boolean}
|
|
||||||
onChange={(e) =>
|
|
||||||
setProduct((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
inStock: e.value as boolean
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
></InputSwitch>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-column sm:flex-row justify-content-between align-items-center gap-3 py-2">
|
|
||||||
<Button className="flex-1 " security="danger" outlined label="Discard" icon="pi pi-fw pi-trash"></Button>
|
|
||||||
<Button className="flex-1 border-round" label="Save" icon="pi pi-fw pi-check"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NewProduct;
|
|
||||||
@@ -1,166 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Divider } from 'primereact/divider';
|
|
||||||
import { Ripple } from 'primereact/ripple';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
function OrderHistory() {
|
|
||||||
const orders = [
|
|
||||||
{
|
|
||||||
orderNumber: '45123',
|
|
||||||
orderDate: '7 February 2023',
|
|
||||||
amount: '$123.00',
|
|
||||||
products: [
|
|
||||||
{
|
|
||||||
name: 'Product Name Placeholder A Little Bit Long One',
|
|
||||||
color: 'White',
|
|
||||||
size: 'Small',
|
|
||||||
price: '$50',
|
|
||||||
deliveryDate: 'Delivered on 7 February 2023',
|
|
||||||
image: '/demo/images/ecommerce/order-history/orderhistory-1.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Product Name Placeholder A Little Bit Long One',
|
|
||||||
color: 'White',
|
|
||||||
size: 'Small',
|
|
||||||
price: '$50',
|
|
||||||
deliveryDate: 'Delivered on 7 February 2023',
|
|
||||||
image: '/demo/images/ecommerce/order-history/orderhistory-2.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Product Name Placeholder A Little Bit Long One',
|
|
||||||
color: 'White',
|
|
||||||
size: 'Small',
|
|
||||||
price: '$63',
|
|
||||||
deliveryDate: 'Delivered on 7 February 2023',
|
|
||||||
image: '/demo/images/ecommerce/order-history/orderhistory-3.png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderNumber: '45126',
|
|
||||||
orderDate: '9 February 2023',
|
|
||||||
amount: '$250.00',
|
|
||||||
products: [
|
|
||||||
{
|
|
||||||
name: 'Product Name Placeholder A Little Bit Long One',
|
|
||||||
color: 'White',
|
|
||||||
size: 'Small',
|
|
||||||
price: '$80',
|
|
||||||
deliveryDate: 'Delivered on 9 February 2023',
|
|
||||||
image: '/demo/images/ecommerce/order-history/orderhistory-4.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Product Name Placeholder A Little Bit Long One',
|
|
||||||
color: 'White',
|
|
||||||
size: 'Small',
|
|
||||||
price: '$20',
|
|
||||||
deliveryDate: 'Delivered on 9 February 2023',
|
|
||||||
image: '/demo/images/ecommerce/order-history/orderhistory-5.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Product Name Placeholder A Little Bit Long One',
|
|
||||||
color: 'White',
|
|
||||||
size: 'Small',
|
|
||||||
price: '$150',
|
|
||||||
deliveryDate: 'Delivered on 9 February 2023',
|
|
||||||
image: '/demo/images/ecommerce/order-history/orderhistory-6.png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<div className="flex flex-column md:flex-row justify-content-between align-items-center mb-4">
|
|
||||||
<div className="flex flex-column text-center md:text-left">
|
|
||||||
<span className="text-900 text-3xl mb-2">My Orders</span>
|
|
||||||
<span className="text-600 text-xl">Dignissim diam quis enim lobortis.</span>
|
|
||||||
</div>
|
|
||||||
<span className="p-input-icon-right mt-5 mb-2 md:mt-0 md:mb-0 w-full lg:w-25rem">
|
|
||||||
<i className="pi pi-search text-gray-400"></i>
|
|
||||||
<input type="text" className="p-inputtext w-full lg:w-25rem surface-50" placeholder="Search" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{orders.map((order, i) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="surface-card grid grid-nogutter border-round shadow-2 mb-6">
|
|
||||||
<div className="col-12 flex p-2 surface-100 border-round-top">
|
|
||||||
<div className="p-2 flex-auto text-center md:text-left">
|
|
||||||
<span className="text-700 block">Order Number</span>
|
|
||||||
<span className="text-900 font-medium block mt-2">{order.orderNumber}</span>
|
|
||||||
</div>
|
|
||||||
<Divider align="center" layout="vertical" className="h-full mx-0 lg:mx-3 surface-border"></Divider>
|
|
||||||
<div className="p-2 flex-auto text-center md:text-left">
|
|
||||||
<span className="text-700 block">Order Date</span>
|
|
||||||
<span className="text-900 font-medium block mt-2">{order.orderDate}</span>
|
|
||||||
</div>
|
|
||||||
<Divider align="center" layout="vertical" className="h-full mx-0 lg:mx-3 surface-border"></Divider>
|
|
||||||
<div className="p-2 flex-auto text-center md:text-left">
|
|
||||||
<span className="text-700 block">Total Amount</span>
|
|
||||||
<span className="text-900 font-medium block mt-2">{order.amount}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
{order.products.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="p-2 my-4 flex flex-column lg:flex-row justify-content-between align-items-center">
|
|
||||||
<div className="flex flex-column lg:flex-row justify-content-center align-items-center px-2">
|
|
||||||
<img src={product.image} alt="product" className="w-8rem h-8rem mr-3 flex-shrink-0" />
|
|
||||||
<div className="flex flex-column my-auto text-center md:text-left">
|
|
||||||
<span className="text-900 font-medium mb-3 mt-3 lg:mt-0">{product.name}</span>
|
|
||||||
<span className="text-700 text-sm mb-3">
|
|
||||||
{product.color} | {product.size}
|
|
||||||
</span>
|
|
||||||
<a tabIndex={0} className="p-ripple p-2 select-none cursor-pointer w-10rem mx-auto lg:mx-0 border-round font-medium text-center border-1 border-primary text-primary transition-duration-150">
|
|
||||||
Buy Again <span className="font-light">| {product.price}</span>
|
|
||||||
<Ripple />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="mr-0 lg:mr-3 mt-4 lg:mt-0 p-2 flex align-items-center"
|
|
||||||
style={{
|
|
||||||
borderRadius: '2.5rem',
|
|
||||||
backgroundColor: 'rgba(76, 175, 80,.1)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="bg-green-500 text-white flex align-items-center justify-content-center border-circle mr-2" style={{ minWidth: '2rem', minHeight: '2rem' }}>
|
|
||||||
<i className="pi pi-check"></i>
|
|
||||||
</span>
|
|
||||||
<span className="text-green-500">{product.deliveryDate}</span>
|
|
||||||
</div>
|
|
||||||
{i !== order.products.length - 1 && <Divider className="w-full block lg:hidden surface-border"></Divider>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 p-0 flex border-top-1 surface-border">
|
|
||||||
<a
|
|
||||||
tabIndex={0}
|
|
||||||
className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full"
|
|
||||||
style={{ borderBottomLeftRadius: '6px' }}
|
|
||||||
>
|
|
||||||
<i className="pi pi-folder mr-2 mb-2 md:mb-1"></i>Archive Order
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full">
|
|
||||||
<i className="pi pi-refresh mr-2 mb-2 md:mb-1"></i>Return
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full">
|
|
||||||
<i className="pi pi-file mr-2 mb-2 md:mb-1"></i>View Invoice
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
tabIndex={0}
|
|
||||||
className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full"
|
|
||||||
style={{ borderBottomRightRadius: '6px' }}
|
|
||||||
>
|
|
||||||
<i className="pi pi-comment mr-2 mb-2 md:mb-1"></i>Write a Review
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OrderHistory;
|
|
||||||
@@ -1,171 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { classNames } from 'primereact/utils';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
function OrderSummary() {
|
|
||||||
const products = [
|
|
||||||
{
|
|
||||||
name: 'Cotton Sweatshirt',
|
|
||||||
size: 'Medium',
|
|
||||||
color: 'White',
|
|
||||||
price: '$12',
|
|
||||||
quantity: '1',
|
|
||||||
image: '/demo/images/ecommerce/ordersummary/order-summary-1-1.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Regular Jeans',
|
|
||||||
size: 'Large',
|
|
||||||
color: 'Black',
|
|
||||||
price: '$24',
|
|
||||||
quantity: '1',
|
|
||||||
image: '/demo/images/ecommerce/ordersummary/order-summary-1-2.png'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="card">
|
|
||||||
<span className="text-700 text-xl">Thanks!</span>
|
|
||||||
<div className="text-900 font-bold text-4xl my-2">Successful Order 🚀</div>
|
|
||||||
<p className="text-700 text-xl mt-0 mb-4 p-0">Your order is on the way. It‘ll be shipped today. We‘ll inform you.</p>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '3px',
|
|
||||||
background: 'linear-gradient(90deg, var(--primary-color) 0%, rgba(33, 150, 243, 0) 50%)'
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<div className="flex flex-column sm:flex-row sm:align-items-center sm:justify-content-between py-5">
|
|
||||||
<div className="mb-3 sm:mb-0">
|
|
||||||
<span className="font-medium text-xl text-900 mr-2">Order number:</span>
|
|
||||||
<span className="font-medium text-xl text-blue-500">451234</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button label="Details" icon="pi pi-list" className="mr-2" outlined></Button>
|
|
||||||
<Button label="Print" icon="pi pi-print" outlined></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="border-round surface-border border-1">
|
|
||||||
<ul className="list-none p-0 m-0">
|
|
||||||
{products.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<li key={i} className={classNames('p-3 surface-border flex align-items-start sm:align-items-center', { 'border-bottom-1': i !== products.length - 1 })}>
|
|
||||||
<img src={product.image} className="w-3rem sm:w-8rem flex-shrink-0 mr-3 shadow-2" alt={product.name} />
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<span className="text-900 font-semibold text-xl mb-2">{product.name}</span>
|
|
||||||
<span className="text-700 font-medium mb-3">
|
|
||||||
{product.color} | {product.size}
|
|
||||||
</span>
|
|
||||||
<span className="text-900 font-medium">Quantity: {product.quantity}</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-900 font-medium text-lg ml-auto">{product.price}</span>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap mt-5 pb-3">
|
|
||||||
<div className="w-full lg:w-6 pl-3">
|
|
||||||
<span className="font-medium text-900">Shipping Address</span>
|
|
||||||
<div className="flex flex-column text-900 mt-3 mb-5">
|
|
||||||
<span className="mb-1">Celeste Slater</span>
|
|
||||||
<span className="mb-1">606-3727 Ullamcorper. Roseville NH 11523</span>
|
|
||||||
<span>(786) 713-8616</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span className="font-medium text-900">Payment</span>
|
|
||||||
<div className="flex align-items-center mt-3">
|
|
||||||
<img src="/demo/images/ecommerce/ordersummary/visa.png" className="w-4rem mr-3" alt="visa" />
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<span className="text-900 mb-1">Visa Debit Card</span>
|
|
||||||
<span className="text-900 font-medium">**** **** **** 1234</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full lg:w-6 pl-3 lg:pl-0 lg:pr-3 flex align-items-end mt-5 lg:mt-0">
|
|
||||||
<ul className="list-none p-0 m-0 w-full">
|
|
||||||
<li className="mb-3">
|
|
||||||
<span className="font-medium text-900">Summary</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between mb-3">
|
|
||||||
<span className="text-900">Subtotal</span>
|
|
||||||
<span className="text-900 font-medium text-lg">$36.00</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between mb-3">
|
|
||||||
<span className="text-900">Shipping</span>
|
|
||||||
<span className="text-900 font-medium text-lg">$5.00</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between mb-3">
|
|
||||||
<span className="text-900">Tax</span>
|
|
||||||
<span className="text-900 font-medium text-lg">$4.00</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between border-top-1 surface-border py-3">
|
|
||||||
<span className="text-900 font-medium">Total</span>
|
|
||||||
<span className="text-900 font-bold text-lg">$41.00</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<div className="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
|
|
||||||
<span className="text-2xl font-medium text-900">Thanks for your order!</span>
|
|
||||||
<div className="flex mt-3 sm:mt-0">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="text-900 font-medium mb-2">Order ID</span>
|
|
||||||
<span className="text-700">451234</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column align-items-center ml-6 md:ml-8">
|
|
||||||
<span className="text-900 font-medium mb-2">Order Date</span>
|
|
||||||
<span className="text-700">7 Feb 2023</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column md:flex-row md:align-items-center border-bottom-1 surface-border py-5">
|
|
||||||
<img src="/demo/images/ecommerce/ordersummary/order-summary-2-1.png" className="w-15rem flex-shrink-0 md:mr-6" alt="summary-1-2" />
|
|
||||||
<div className="flex-auto mt-3 md:mt-0">
|
|
||||||
<span className="text-xl text-900">Product Name</span>
|
|
||||||
<div className="font-medium text-2xl text-900 mt-3 mb-5">Order Processing</div>
|
|
||||||
<div className="border-round overflow-hidden surface-300 mb-3" style={{ height: '7px' }}>
|
|
||||||
<div className="bg-primary border-round w-4 h-full"></div>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full justify-content-between">
|
|
||||||
<span className="text-900 text-xs sm:text-base">Ordered</span>
|
|
||||||
<span className="text-900 font-medium text-xs sm:text-base">Processing</span>
|
|
||||||
<span className="text-500 text-xs sm:text-base">Shipping</span>
|
|
||||||
<span className="text-500 text-xs sm:text-base">Delivered</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="py-5 flex justify-content-between flex-wrap">
|
|
||||||
<div className="flex sm:mr-5 mb-5">
|
|
||||||
<span className="font-medium text-900 text-xl mr-8">Product Name</span>
|
|
||||||
<span className="text-900 text-xl">$21.00</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column sm:mr-5 mb-5">
|
|
||||||
<span className="font-medium text-900 text-xl">Shipping Address</span>
|
|
||||||
<div className="flex flex-column text-900 mt-3">
|
|
||||||
<span className="mb-1">Celeste Slater</span>
|
|
||||||
<span className="mb-1">606-3727 Ullamcorper. Roseville NH 11523</span>
|
|
||||||
<span>(786) 713-8616</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<span className="font-medium text-900 text-xl">Payment</span>
|
|
||||||
<div className="flex align-items-center mt-3">
|
|
||||||
<img src="/demo/images/ecommerce/ordersummary/visa.png" className="w-4rem mr-3" alt="visa-2" />
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<span className="text-900 mb-1">Visa Debit Card</span>
|
|
||||||
<span className="text-900 font-medium">**** **** **** 1234</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OrderSummary;
|
|
||||||
@@ -1,171 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
function ProductList() {
|
|
||||||
const [products] = useState([
|
|
||||||
{
|
|
||||||
price: '$140.00',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-4-1.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: '$82.00',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-4-2.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: '$54.00',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-4-3.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: '$72.00',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-4-4.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: '$99.00',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-4-5.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
price: '$89.00',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-4-6.png'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const [products2, setProducts2] = useState([
|
|
||||||
{
|
|
||||||
color: 'Bluegray',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-2-1.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: 'Indigo',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-2-2.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: 'Green',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-2-3.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: 'Blue',
|
|
||||||
image: 'demo/images/ecommerce/product-list/product-list-2-4.png'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const onColorChange = (color: string, productIndex: number) => {
|
|
||||||
const _products2 = [...products2];
|
|
||||||
_products2[productIndex]['color'] = color;
|
|
||||||
setProducts2(_products2);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="card">
|
|
||||||
<div className="text-900 font-medium text-4xl mb-4">Popular Products</div>
|
|
||||||
<p className="mt-0 p-0 mb-5 text-700 text-2xl">Exclusive Selection</p>
|
|
||||||
<div className="grid -mt-3 -ml-3 -mr-3">
|
|
||||||
{products.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="col-12 md:col-6 lg:col-4">
|
|
||||||
<div className="p-2">
|
|
||||||
<div className="shadow-2 p-4 surface-card border-round">
|
|
||||||
<div className="relative mb-3">
|
|
||||||
<span
|
|
||||||
className="surface-card text-900 shadow-2 px-3 py-2 absolute"
|
|
||||||
style={{
|
|
||||||
borderRadius: '1.5rem',
|
|
||||||
left: '1rem',
|
|
||||||
top: '1rem'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Category
|
|
||||||
</span>
|
|
||||||
<img src={'/' + product.image} className="w-full" alt={i.toString()} />
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content-between align-items-center mb-3">
|
|
||||||
<span className="text-900 font-medium text-xl">Product Name</span>
|
|
||||||
<span>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<span className="font-medium">5.0</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="mt-0 mb-3 text-700 line-height-3">Enim nec dui nunc mattis enim ut tellus. Tincidunt arcu.</p>
|
|
||||||
<span className="text-primary text-xl font-medium">{product.price}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<div className="grid -mt-3 -ml-3 -mr-3">
|
|
||||||
{products2.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="col-12 md:col-6 lg:col-3 mb-5 lg:mb-0">
|
|
||||||
<div className="mb-3 relative">
|
|
||||||
<img src={'/' + product.image} className="w-full" alt={i.toString()} />
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
className="border-1 border-white border-round py-2 px-3 absolute bg-black-alpha-30 text-white inline-flex align-items-center justify-content-center hover:bg-black-alpha-40 transition-colors transition-duration-300 cursor-pointer"
|
|
||||||
style={{
|
|
||||||
bottom: '1rem',
|
|
||||||
left: '1rem',
|
|
||||||
width: 'calc(100% - 2rem)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<i className="pi pi-shopping-cart mr-3 text-base"></i>
|
|
||||||
<span className="text-base">Add to Cart</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="text-xl text-900 font-medium mb-3">Product Name</span>
|
|
||||||
<span className="text-xl text-900 mb-3">$150.00</span>
|
|
||||||
<div className="flex align-items-center mb-3">
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-bluegray-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
width: '1.2rem',
|
|
||||||
height: '1.2rem',
|
|
||||||
boxShadow: product.color === 'Bluegray' ? '0 0 0 0.2rem var(--bluegray-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => onColorChange('Bluegray', i)}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-indigo-500 hover:border-indigo-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
width: '1.2rem',
|
|
||||||
height: '1.2rem',
|
|
||||||
boxShadow: product.color === 'Indigo' ? '0 0 0 0.2rem var(--indigo-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => onColorChange('Indigo', i)}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-purple-500 hover:border-purple-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
width: '1.2rem',
|
|
||||||
height: '1.2rem',
|
|
||||||
boxShadow: product.color === 'Green' ? '0 0 0 0.2rem var(--purple-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => onColorChange('Green', i)}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-cyan-500 hover:border-cyan-500 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
width: '1.2rem',
|
|
||||||
height: '1.2rem',
|
|
||||||
boxShadow: product.color === 'Blue' ? '0 0 0 0.2rem var(--cyan-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => onColorChange('Blue', i)}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span className="text-700">{product.color}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProductList;
|
|
||||||
@@ -1,284 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
|
||||||
import { TabPanel, TabView } from 'primereact/tabview';
|
|
||||||
import { classNames } from 'primereact/utils';
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
function ProductOverview() {
|
|
||||||
const [images, setImages] = useState<string[]>([]);
|
|
||||||
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
|
|
||||||
const [liked, setLiked] = useState(false);
|
|
||||||
const [quantity, setQuantity] = useState(1);
|
|
||||||
const [color, setColor] = useState('bluegray');
|
|
||||||
const [size, setSize] = useState('M');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setImages(['product-overview-3-1.png', 'product-overview-3-2.png', 'product-overview-3-3.png', 'product-overview-3-4.png']);
|
|
||||||
}, [selectedImageIndex]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<div className="grid mb-7">
|
|
||||||
<div className="col-12 lg:col-7">
|
|
||||||
<div className="flex">
|
|
||||||
<div className="flex flex-column w-2 justify-content-between" style={{ rowGap: '1rem' }}>
|
|
||||||
{images.map((image, i) => {
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
alt={i.toString()}
|
|
||||||
key={i}
|
|
||||||
src={`/demo/images/ecommerce/productoverview/${image}`}
|
|
||||||
className={classNames('w-full cursor-pointer border-2 border-transparent transition-colors transition-duration-150 border-round', { 'border-primary': selectedImageIndex === i })}
|
|
||||||
onClick={() => setSelectedImageIndex(i)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="pl-3 w-10 flex">
|
|
||||||
<img alt={images[selectedImageIndex]} src={`/demo/images/ecommerce/productoverview/${images[selectedImageIndex]}`} className="w-full border-2 border-transparent border-round" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-4 py-3 lg:pl-6">
|
|
||||||
<div className="flex align-items-center text-xl font-medium text-900 mb-4">Product Title Placeholder</div>
|
|
||||||
<div className="flex align-items-center justify-content-between mb-5">
|
|
||||||
<span className="text-900 font-medium text-3xl block">$120</span>
|
|
||||||
<div className="flex align-items-center">
|
|
||||||
<span className="mr-3">
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star text-600 mr-1"></i>
|
|
||||||
</span>
|
|
||||||
<span className="text-sm">
|
|
||||||
<b className="text-900 mr-1">24</b> <span className="text-500"></span>reviews
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="font-bold text-900 mb-3">Color</div>
|
|
||||||
<div className="flex align-items-center mb-5">
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-bluegray-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
boxShadow: color === 'bluegray' ? '0 0 0 0.2rem var(--bluegray-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => setColor('bluegray')}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-green-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
boxShadow: color === 'green' ? '0 0 0 0.2rem var(--green-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => setColor('green')}
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
className="w-2rem h-2rem flex-shrink-0 border-circle bg-blue-500 cursor-pointer border-2 surface-border transition-all transition-duration-300"
|
|
||||||
style={{
|
|
||||||
boxShadow: color === 'blue' ? '0 0 0 0.2rem var(--blue-500)' : undefined
|
|
||||||
}}
|
|
||||||
onClick={() => setColor('blue')}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3 flex align-items-center justify-content-between">
|
|
||||||
<span className="font-bold text-900">Size</span>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-600 text-sm flex align-items-center">
|
|
||||||
Size Guide <i className="ml-1 pi pi-angle-right"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-nogutter align-items-center mb-5">
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
|
|
||||||
{ 'border-primary border-2 text-primary': size === 'XS' }
|
|
||||||
)}
|
|
||||||
onClick={() => setSize('XS')}
|
|
||||||
>
|
|
||||||
XS
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
|
|
||||||
{ 'border-primary border-2 text-primary': size === 'S' }
|
|
||||||
)}
|
|
||||||
onClick={() => setSize('S')}
|
|
||||||
>
|
|
||||||
S
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
|
|
||||||
{ 'border-primary border-2 text-primary': size === 'M' }
|
|
||||||
)}
|
|
||||||
onClick={() => setSize('M')}
|
|
||||||
>
|
|
||||||
M
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
|
|
||||||
{ 'border-primary border-2 text-primary': size === 'L' }
|
|
||||||
)}
|
|
||||||
onClick={() => setSize('L')}
|
|
||||||
>
|
|
||||||
L
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classNames('col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round cursor-pointer hover:surface-100 transition-duration-150 transition-colors', {
|
|
||||||
'border-primary border-2 text-primary': size === 'XL'
|
|
||||||
})}
|
|
||||||
onClick={() => setSize('XL')}
|
|
||||||
>
|
|
||||||
XL
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="font-bold text-900 mb-3">Quantity</div>
|
|
||||||
<div className="flex flex-column sm:flex-row sm:align-items-center sm:justify-content-between">
|
|
||||||
<InputNumber
|
|
||||||
showButtons
|
|
||||||
buttonLayout="horizontal"
|
|
||||||
min={0}
|
|
||||||
inputClassName="w-3rem text-center"
|
|
||||||
value={quantity}
|
|
||||||
onChange={(e) => setQuantity(e.value ?? 0)}
|
|
||||||
decrementButtonClassName="p-button-text"
|
|
||||||
incrementButtonClassName="p-button-text"
|
|
||||||
incrementButtonIcon="pi pi-plus"
|
|
||||||
decrementButtonIcon="pi pi-minus"
|
|
||||||
></InputNumber>
|
|
||||||
<div className="flex align-items-center flex-1 mt-3 sm:mt-0 ml-0 sm:ml-5">
|
|
||||||
<Button label="Add to Cart" className="flex-1 mr-5"></Button>
|
|
||||||
<i
|
|
||||||
className={classNames('pi text-2xl cursor-pointer', {
|
|
||||||
'pi-heart text-600': !liked,
|
|
||||||
'pi-heart-fill text-orange-500': liked
|
|
||||||
})}
|
|
||||||
onClick={() => setLiked(!liked)}
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabView>
|
|
||||||
<TabPanel header="Details">
|
|
||||||
<div className="text-900 font-bold text-3xl mb-4 mt-2">Product Details</div>
|
|
||||||
<p className="line-height-3 text-600 p-0 mx-0 mt-0 mb-4">
|
|
||||||
Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Duis ultricies lacus sed turpis tincidunt id. Sed tempus urna et pharetra. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Venenatis
|
|
||||||
urna cursus eget nunc scelerisque viverra mauris in. Viverra justo nec ultrices dui sapien eget mi proin. Laoreet suspendisse interdum consectetur libero id faucibus.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 lg:col-4">
|
|
||||||
<span className="text-900 block font-medium mb-3 font-bold">Highlights</span>
|
|
||||||
<ul className="py-0 pl-3 m-0 text-600 mb-3">
|
|
||||||
<li className="mb-2">Vulputate sapien nec.</li>
|
|
||||||
<li className="mb-2">Purus gravida quis blandit.</li>
|
|
||||||
<li className="mb-2">Nisi quis eleifend quam adipiscing.</li>
|
|
||||||
<li>Imperdiet proin fermentum.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-4">
|
|
||||||
<span className="text-900 block mb-3 font-bold">Size and Fit</span>
|
|
||||||
<ul className="list-none p-0 m-0 text-600 mb-4 text-600">
|
|
||||||
<li className="mb-3">
|
|
||||||
<span className="font-semibold">Leo vel:</span> Egestas congue.
|
|
||||||
</li>
|
|
||||||
<li className="mb-3">
|
|
||||||
<span className="font-semibold">Sociis natoque:</span> Parturient montes nascetur.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span className="font-semibold">Suspendisse in:</span> Purus sit amet volutpat.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-4">
|
|
||||||
<span className="text-900 block mb-3 font-bold">Material & Care</span>
|
|
||||||
<ul className="p-0 m-0 flex flex-wrap flex-column xl:flex-row text-600">
|
|
||||||
<li className="flex align-items-center white-space-nowrap w-10rem block mr-2 mb-3">
|
|
||||||
<i className="pi pi-sun mr-2 text-900"></i>
|
|
||||||
<span>Not dryer safe</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex align-items-center white-space-nowrap w-10rem block mb-3">
|
|
||||||
<i className="pi pi-times-circle mr-2 text-900"></i>
|
|
||||||
<span>No chemical wash</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex align-items-center white-space-nowrap w-10rem block mb-3 mr-2">
|
|
||||||
<i className="pi pi-sliders-h mr-2 text-900"></i>
|
|
||||||
<span>Iron medium heat</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex align-items-center white-space-nowrap w-10rem block mb-3">
|
|
||||||
<i className="pi pi-minus-circle mr-2 text-900"></i>
|
|
||||||
<span>Dry flat</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel header="Reviews">
|
|
||||||
<div className="text-900 font-bold text-3xl mb-4 mt-2">Customer Reviews</div>
|
|
||||||
<ul className="list-none p-0 m-0">
|
|
||||||
<li className="pb-5 border-bottom-1 surface-border">
|
|
||||||
<span>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-gray-500"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-900 font-bold text-xl my-3">Absolute Perfection!</div>
|
|
||||||
<p className="mx-0 mt-0 mb-3 text-600 line-height-3">
|
|
||||||
Blandit libero volutpat sed cras ornare arcu dui vivamus. Arcu dictum varius duis at consectetur lorem donec massa. Imperdiet proin fermentum leo vel orci porta non. Porttitor rhoncus dolor purus non.
|
|
||||||
</p>
|
|
||||||
<span className="font-medium">Darlene Robertson, 2 days ago</span>
|
|
||||||
</li>
|
|
||||||
<li className="py-5 border-bottom-1 surface-border">
|
|
||||||
<span>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
|
|
||||||
<i className="pi pi-star-fill text-yellow-500"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-900 font-bold text-xl my-3">Classy</div>
|
|
||||||
<p className="mx-0 mt-0 mb-3 text-600 line-height-3">Venenatis cras sed felis eget. Proin nibh nisl condimentum id venenatis a condimentum.</p>
|
|
||||||
<span className="font-medium">Kristin Watson, 2 days ago</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel header="Shipping and Returns">
|
|
||||||
<div className="text-900 font-bold text-3xl mb-4 mt-2">Shipping Placeholder</div>
|
|
||||||
<p className="line-height-3 text-600 p-0 mx-0 mt-0 mb-4">
|
|
||||||
Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Justo donec enim diam vulputate ut pharetra. Tempus egestas sed sed risus. Feugiat sed lectus vestibulum mattis. Tristique nulla aliquet enim tortor at auctor
|
|
||||||
urna nunc. Habitant morbi tristique senectus et. Facilisi nullam vehicula ipsum.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<span className="text-900 block font-bold mb-3 font-bold">Shipping Costs</span>
|
|
||||||
<ul className="py-0 pl-3 m-0 text-600 mb-3">
|
|
||||||
<li className="mb-2">Japan - JPY 2,500.</li>
|
|
||||||
<li className="mb-2">Europe - EUR 10</li>
|
|
||||||
<li className="mb-2">Switzerland - CHF 10</li>
|
|
||||||
<li className="mb-2">Canada - CAD 25</li>
|
|
||||||
<li className="mb-2">USA - USD 20</li>
|
|
||||||
<li className="mb-2">Australia - AUD 30</li>
|
|
||||||
<li className="mb-2">United Kingdom - GBP 10</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<span className="text-900 block font-bold mb-3">Return Policy</span>
|
|
||||||
<p className="line-height-3 text-600 p-0 m-0">Pharetra et ultrices neque ornare aenean euismod elementum nisi. Diam phasellus vestibulum lorem sed. Mattis molestie a iaculis at. </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProductOverview;
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
function ShoppingCart() {
|
|
||||||
const quantityOptions = [
|
|
||||||
{ label: '1', value: 1 },
|
|
||||||
{ label: '2', value: 2 },
|
|
||||||
{ label: '3', value: 3 },
|
|
||||||
{ label: '4', value: 4 }
|
|
||||||
];
|
|
||||||
const [selectedQuantity, setselectedQuantity] = useState(1);
|
|
||||||
const [selectedQuantity2, setselectedQuantity2] = useState(1);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<div className="flex flex-column align-items-center mb-6">
|
|
||||||
<div className="text-900 text-4xl mb-4 font-medium">Your cart total is $82.00</div>
|
|
||||||
<p className="text-700 font-medium text-xl mt-0 mb-4">FREE SHIPPING AND RETURN</p>
|
|
||||||
<Button label="Check Out" />
|
|
||||||
</div>
|
|
||||||
<ul className="list-none p-0 m-0">
|
|
||||||
<li className="flex flex-column md:flex-row py-6 border-top-1 border-bottom-1 surface-border md:align-items-center">
|
|
||||||
<img src="/demo/images/ecommerce/shopping-cart/shopping-cart-2-1.png" className="w-12rem flex-shrink-0 mx-auto md:mx-0" alt="shopping-cart-2-1" />
|
|
||||||
<div className="flex-auto py-5 md:pl-5">
|
|
||||||
<div className="flex flex-wrap align-items-start sm:align-items-center sm:flex-row sm:justify-content-between surface-border pb-6">
|
|
||||||
<div className="w-full sm:w-6 flex flex-column">
|
|
||||||
<span className="text-900 text-xl font-medium mb-3">Product Name</span>
|
|
||||||
<span className="text-700">Medium</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full sm:w-6 flex align-items-start justify-content-between mt-3 sm:mt-0">
|
|
||||||
<div>
|
|
||||||
<Dropdown options={quantityOptions} value={selectedQuantity} onChange={(e) => setselectedQuantity(e.value)}></Dropdown>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column sm:align-items-end">
|
|
||||||
<span className="text-900 text-xl font-medium mb-2 sm:mb-3">$20.00</span>
|
|
||||||
<a className="cursor-pointer text-pink-500 font-medium text-sm hover:text-pink-600 transition-colors transition-duration-300" tabIndex={0}>
|
|
||||||
Remove
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<span className="inline-flex align-items-center mb-3">
|
|
||||||
<i className="pi pi-envelope text-700 mr-2"></i>
|
|
||||||
<span className="text-700 mr-2">Order today.</span>
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex align-items-center mb-3">
|
|
||||||
<i className="pi pi-send text-700 mr-2"></i>
|
|
||||||
<span className="text-700 mr-2">
|
|
||||||
Delivery by <span className="font-bold">Dec 23.</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="flex align-items-center">
|
|
||||||
<i className="pi pi-exclamation-triangle text-700 mr-2"></i>
|
|
||||||
<span className="text-700">Only 8 Available.</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="flex flex-column md:flex-row py-6 border-top-1 border-bottom-1 surface-border md:align-items-center">
|
|
||||||
<img src="/demo/images/ecommerce/shopping-cart/shopping-cart-2-2.png" className="w-12rem flex-shrink-0 mx-auto md:mx-0" alt="shopping-cart-2-2" />
|
|
||||||
<div className="flex-auto py-5 md:pl-5">
|
|
||||||
<div className="flex flex-wrap align-items-start sm:align-items-center sm:flex-row sm:justify-content-between surface-border pb-6">
|
|
||||||
<div className="w-full sm:w-6 flex flex-column">
|
|
||||||
<span className="text-900 text-xl font-medium mb-3">Product Name</span>
|
|
||||||
<span className="text-700">Medium</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full sm:w-6 flex align-items-start justify-content-between mt-3 sm:mt-0">
|
|
||||||
<div>
|
|
||||||
<Dropdown options={quantityOptions} value={selectedQuantity2} onChange={(e) => setselectedQuantity2(e.value)}></Dropdown>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column sm:align-items-end">
|
|
||||||
<span className="text-900 text-xl font-medium mb-2 sm:mb-3">$62.00</span>
|
|
||||||
<a className="cursor-pointer text-pink-500 font-medium text-sm hover:text-pink-600 transition-colors transition-duration-300" tabIndex={0}>
|
|
||||||
Remove
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<span className="inline-flex align-items-center mb-3">
|
|
||||||
<i className="pi pi-envelope text-700 mr-2"></i>
|
|
||||||
<span className="text-700 mr-2">Order today.</span>
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex align-items-center mb-3">
|
|
||||||
<i className="pi pi-send text-700 mr-2"></i>
|
|
||||||
<span className="text-700 mr-2">
|
|
||||||
Delivery by <span className="font-bold">Dec 23.</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="flex align-items-center">
|
|
||||||
<i className="pi pi-exclamation-triangle text-700 mr-2"></i>
|
|
||||||
<span className="text-700">Only 2 Available.</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div className="flex">
|
|
||||||
<div className="w-12rem hidden md:block"></div>
|
|
||||||
<ul className="list-none py-0 pr-0 pl-0 md:pl-5 mt-6 mx-0 mb-0 flex-auto">
|
|
||||||
<li className="flex justify-content-between mb-4">
|
|
||||||
<span className="text-xl text-900 font-semibold">Subtotal</span>
|
|
||||||
<span className="text-xl text-900">$82.00</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between mb-4">
|
|
||||||
<span className="text-xl text-900 font-semibold">Shipping</span>
|
|
||||||
<span className="text-xl text-900">Free</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between mb-4">
|
|
||||||
<span className="text-xl text-900 font-semibold">VAT</span>
|
|
||||||
<span className="text-xl text-900">$8.00</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-between border-top-1 surface-border mb-4 pt-4">
|
|
||||||
<span className="text-xl text-900 font-bold text-3xl">Total</span>
|
|
||||||
<span className="text-xl text-900 font-bold text-3xl">$90.00</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex justify-content-end">
|
|
||||||
<Button label="Check Out"></Button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ShoppingCart;
|
|
||||||
@@ -1,140 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
function AboutUs() {
|
|
||||||
const [visibleMember, setVisibleMember] = useState(null);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="card px-4 py-8 md:px-6 lg:px-8">
|
|
||||||
<div className="flex flex-wrap mb-4">
|
|
||||||
<div className="w-full lg:w-6 pl-0 lg:pr-4">
|
|
||||||
<img src={`/demo/images/blocks/about/about-1.png`} alt="Image" className="w-full border-round" />
|
|
||||||
</div>
|
|
||||||
<div className="w-full lg:w-6 pr-0 lg:pl-4 mt-3 lg:mt-0">
|
|
||||||
<div className="font-bold text-4xl mb-4 text-900">About us</div>
|
|
||||||
<p className="line-height-3 mt-0 mb-3 p-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
||||||
laborum.
|
|
||||||
</p>
|
|
||||||
<p className="line-height-3 mt-0 mb-3 p-0">
|
|
||||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
|
||||||
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
|
|
||||||
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
|
||||||
</p>
|
|
||||||
<p className="line-height-3 my-0 p-0">
|
|
||||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
|
|
||||||
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 md:mt-8">
|
|
||||||
<span className="block text-900 font-bold text-3xl mb-3 text-center">Our Team</span>
|
|
||||||
<div className="text-center text-lg line-height-3 mb-6">Faucibus ornare suspendisse sed nisi. Nisl rhoncus mattis rhoncus urna neque viverra justo nec.</div>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-6 lg:col-3 p-3">
|
|
||||||
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(0)} onMouseLeave={() => setVisibleMember(-1)}>
|
|
||||||
<img src={`/demo/images/blocks/team/team-1.png`} className="w-full block" alt="Team 1" />
|
|
||||||
{visibleMember === 0 && (
|
|
||||||
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
|
|
||||||
<div className="flex flex-column p-5 h-full">
|
|
||||||
<span className="block font-medium text-white text-xl mb-3">Jeff Davies</span>
|
|
||||||
<span className="font-medium text-400">Software Developer</span>
|
|
||||||
<div className="mt-auto">
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-github text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-facebook text-600 text-xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6 lg:col-3 p-3">
|
|
||||||
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(1)} onMouseLeave={() => setVisibleMember(-1)}>
|
|
||||||
<img src={`/demo/images/blocks/team/team-2.png`} className="w-full block" alt="Team 2" />
|
|
||||||
{visibleMember === 1 && (
|
|
||||||
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
|
|
||||||
<div className="flex flex-column p-5 h-full">
|
|
||||||
<span className="block font-medium text-white text-xl mb-3">Kristin Watson</span>
|
|
||||||
<span className="font-medium text-400">UI/UX Designer</span>
|
|
||||||
<div className="mt-auto">
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-github text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-facebook text-600 text-xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6 lg:col-3 p-3">
|
|
||||||
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(2)} onMouseLeave={() => setVisibleMember(-1)}>
|
|
||||||
<img src={`/demo/images/blocks/team/team-3.png`} className="w-full block" alt="Team 3" />
|
|
||||||
{visibleMember === 2 && (
|
|
||||||
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
|
|
||||||
<div className="flex flex-column p-5 h-full">
|
|
||||||
<span className="block font-medium text-white text-xl mb-3">Jenna Williams</span>
|
|
||||||
<span className="font-medium text-400">Marketing Specialist</span>
|
|
||||||
<div className="mt-auto">
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-github text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-facebook text-600 text-xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6 lg:col-3 p-3">
|
|
||||||
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(3)} onMouseLeave={() => setVisibleMember(-1)}>
|
|
||||||
<img src={`/demo/images/blocks/team/team-4.png`} className="w-full block" alt="Team 4" />
|
|
||||||
{visibleMember === 3 && (
|
|
||||||
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
|
|
||||||
<div className="flex flex-column p-5 h-full">
|
|
||||||
<span className="block font-medium text-white text-xl mb-3">Joe Clifford</span>
|
|
||||||
<span className="font-medium text-400">Customer Relations</span>
|
|
||||||
<div className="mt-auto">
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-github text-600 text-xl mr-3"></i>
|
|
||||||
</a>
|
|
||||||
<a tabIndex={0} className="cursor-pointer text-white">
|
|
||||||
<i className="pi pi-facebook text-600 text-xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AboutUs;
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
function Access() {
|
|
||||||
return (
|
|
||||||
<div className="exception-body access">
|
|
||||||
<img src={`/images/logo-white.svg`} alt="diamond-layout" className="logo" />
|
|
||||||
|
|
||||||
<div className="exception-content">
|
|
||||||
<div className="exception-title">ACCESS DENIED</div>
|
|
||||||
<div className="exception-detail">You do not have the necessary permissions.</div>
|
|
||||||
<Link href="/">Go to Dashboard</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Access;
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState, useContext } from 'react';
|
|
||||||
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { classNames } from 'primereact/utils';
|
|
||||||
import { LayoutContext } from '../../../../layout/context/layoutcontext';
|
|
||||||
|
|
||||||
function Contact() {
|
|
||||||
const [name, setName] = useState('');
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [message, setMessage] = useState('');
|
|
||||||
const [content] = useState([
|
|
||||||
{ icon: 'pi pi-fw pi-phone', title: 'Phone', info: '1 (833) 597-7538' },
|
|
||||||
{
|
|
||||||
icon: 'pi pi-fw pi-map-marker',
|
|
||||||
title: 'Our Head Office',
|
|
||||||
info: 'Churchill-laan 16 II, 1052 CD, Amsterdam'
|
|
||||||
},
|
|
||||||
{ icon: 'pi pi-fw pi-print', title: 'Fax', info: '3 (833) 297-1548' }
|
|
||||||
]);
|
|
||||||
|
|
||||||
const { layoutConfig } = useContext(LayoutContext);
|
|
||||||
return (
|
|
||||||
<div className="grid card grid-nogutter" style={{ columnGap: '2rem', rowGap: '2rem' }}>
|
|
||||||
<div className="col-12">
|
|
||||||
<p className="text-900 font-bold">Contact Us</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-12 mt-3 h-20rem border-1 surface-border p-0 w-full bg-cover border-round"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url('/demo/images/contact/map-${layoutConfig.colorScheme === 'light' ? 'light' : 'dark'}.svg')`
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
<div className="col-12 mt-5">
|
|
||||||
<div className="grid grid-nogutter px-2 flex-column md:flex-row" style={{ columnGap: '2rem', rowGap: '2rem' }}>
|
|
||||||
{content.map((item, i) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="col flex flex-column justify-content-center text-center align-items-center border-1 surface-border py-5 px-4 border-round">
|
|
||||||
<i className={classNames('pi pi-fw text-2xl text-primary', item.icon)}></i>
|
|
||||||
<span className="text-900 font-bold mt-4 mb-1">{item.title}</span>
|
|
||||||
<span className="text-500">{item.info}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 mt-5">
|
|
||||||
<p className="text-900 font-bold">Send Us Email</p>
|
|
||||||
<div className="grid flex-column md:flex-row formgrid grid-nogutter mt-6" style={{ rowGap: '2rem', columnGap: '2rem' }}>
|
|
||||||
<div className="field col">
|
|
||||||
<label htmlFor="name" className="block text-indigo-300 font-bold">
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<span className="p-input-icon-left w-full" style={{ height: '3.5rem' }}>
|
|
||||||
<i className="pi pi-user" style={{ left: '1.5rem' }}></i>
|
|
||||||
<InputText id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" className="w-full px-7 text-900 font-semibold" style={{ height: '3.5rem' }} />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field col">
|
|
||||||
<label htmlFor="email" className="block text-indigo-300 font-bold">
|
|
||||||
Email Address
|
|
||||||
</label>
|
|
||||||
<span className="p-input-icon-left w-full" style={{ height: '3.5rem' }}>
|
|
||||||
<i className="pi pi-envelope" style={{ left: '1.5rem' }}></i>
|
|
||||||
<InputText type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" className="w-full px-7 text-900 font-semibold" style={{ height: '3.5rem' }} />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field col-12 flex flex-column">
|
|
||||||
<label htmlFor="message" className="block text-indigo-300 font-bold">
|
|
||||||
Message
|
|
||||||
</label>
|
|
||||||
<InputTextarea className="w-full surface-border p-4 text-900 font-semibold border-round" id="message" rows={5} cols={30} value={message} onChange={(event) => setMessage(event.target.value)} />
|
|
||||||
<Button className=" ml-auto mt-3 border-round" label="Send Message"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Contact;
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
const EmptyPage = () => {
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h4>Empty Page</h4>
|
|
||||||
<p>Use this page to start from scratch and place your custom content.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmptyPage;
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { Accordion, AccordionTab } from 'primereact/accordion';
|
|
||||||
|
|
||||||
function Faq() {
|
|
||||||
const [activeIndex, setActiveIndex] = useState(0);
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
label: 'General',
|
|
||||||
icon: 'pi pi-fw pi-info-circle',
|
|
||||||
questions: ['Is there a trial period?', 'Do I need to sign up with credit card?', 'Is the subscription monthly or annual?', 'How many tiers are there?']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Mailing',
|
|
||||||
icon: 'pi pi-fw pi-envelope',
|
|
||||||
questions: ['How do I setup my account?', 'Is there a limit on mails to send?', 'What is my inbox size?', 'How can I add attachements?']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Support',
|
|
||||||
icon: 'pi pi-fw pi-question-circle',
|
|
||||||
questions: ['How can I get support?', 'What is the response time?', 'Is there a community forum?', 'Is live chat available?']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Billing',
|
|
||||||
icon: 'pi pi-fw pi-credit-card',
|
|
||||||
questions: ['Will I receive an invoice?', 'How to provide my billing information?', 'Is VAT included?', 'Can I receive PDF invoices?']
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const changeItem = (i) => {
|
|
||||||
setActiveIndex(i);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="text-900 font-bold text-xl mb-3">Frequently Asked Questions</div>
|
|
||||||
<p className="text-600 line-height-3">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-column md:flex-row gap-5">
|
|
||||||
<div className="card mb-0 md:w-20rem">
|
|
||||||
<div className="text-900 block font-bold mb-3">Categories</div>
|
|
||||||
<ul className="list-none m-0 p-0">
|
|
||||||
{items.map((item, i) => (
|
|
||||||
<li key={i} onClick={() => changeItem(i)} className="mb-2 ">
|
|
||||||
<a className={`flex align-items-center cursor-pointer select-none p-3 transition-colors transition-duration-150 border-round ${activeIndex === i ? 'bg-primary' : 'hover:surface-hover'}`}>
|
|
||||||
<i className={item.icon + ' mr-2 text-lg'}></i>
|
|
||||||
<span>{item.label}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="card flex-1">
|
|
||||||
<Accordion activeIndex={0}>
|
|
||||||
{items[activeIndex].questions.map((question, i) => (
|
|
||||||
<AccordionTab key={i} header={question}>
|
|
||||||
<p className="line-height-3 m-0 p-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
||||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
||||||
anim id est laborum.
|
|
||||||
</p>
|
|
||||||
</AccordionTab>
|
|
||||||
))}
|
|
||||||
</Accordion>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Faq;
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
|
|
||||||
function Help() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="relative overflow-hidden h-20rem bg-primary flex flex-column align-items-center justify-content-center border-round mb-8">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="absolute w-full top-0 left-0">
|
|
||||||
<path
|
|
||||||
fill="var(--primary-600)"
|
|
||||||
fillOpacity="1"
|
|
||||||
d="M0,64L48,90.7C96,117,192,171,288,208C384,245,480,267,576,256C672,245,768,203,864,165.3C960,128,1056,96,1152,74.7C1248,53,1344,43,1392,37.3L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
<div className="font-bold mb-5 text-4xl z-1">How can we help?</div>
|
|
||||||
<span className="p-input-icon-left w-9 md:w-6">
|
|
||||||
<i className="pi pi-search"></i>
|
|
||||||
<InputText id="name" type="text" placeholder="Search" style={{ borderRadius: '2rem' }} className={'w-full'} />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid mb-5">
|
|
||||||
<div className="col-12 md:col-4 mb-5">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
||||||
<i className="pi pi-power-off text-4xl text-primary-700"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-2xl mb-3 font-medium">Getting Started</div>
|
|
||||||
<ul className="list-none m-0 p-0 text-center">
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-3">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4 mb-5">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
||||||
<i className="pi pi-arrows-h text-4xl text-primary-700"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-2xl mb-3 font-medium">Transactions</div>
|
|
||||||
<ul className="list-none m-0 p-0 text-center">
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-3">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4 mb-5">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
||||||
<i className="pi pi-user text-4xl text-primary-700"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-2xl mb-3 font-medium">Profile</div>
|
|
||||||
<ul className="list-none m-0 p-0 text-center">
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-3">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4 mb-5">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
||||||
<i className="pi pi-money-bill text-4xl text-primary-700"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-2xl mb-3 font-medium">Billing</div>
|
|
||||||
<ul className="list-none m-0 p-0 text-center">
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-3">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4 mb-5">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
||||||
<i className="pi pi-database text-4xl text-primary-700"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-2xl mb-3 font-medium">Integrations</div>
|
|
||||||
<ul className="list-none m-0 p-0 text-center">
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-3">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4 mb-5">
|
|
||||||
<div className="flex flex-column align-items-center">
|
|
||||||
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
|
|
||||||
<i className="pi pi-lock text-4xl text-primary-700"></i>
|
|
||||||
</span>
|
|
||||||
<div className="text-2xl mb-3 font-medium">Security</div>
|
|
||||||
<ul className="list-none m-0 p-0 text-center">
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-1">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
|
|
||||||
</li>
|
|
||||||
<li className="line-height-3 mb-3">
|
|
||||||
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Help;
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
function Invoice() {
|
|
||||||
return (
|
|
||||||
<div className="card py-8 px-6 md:px-8 overflow-auto">
|
|
||||||
<div className="flex flex-column align-items-start md:flex-row md:align-items-center md:justify-content-between border-bottom-1 surface-border pb-5 min-w-max">
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M33.1548 9.65956L23.9913 4.86169L5.54723 14.5106L0.924465 12.0851L23.9913 0L37.801 7.23403L33.1548 9.65956ZM23.9931 19.3085L42.4255 9.65955L47.0717 12.0851L23.9931 24.1595L10.1952 16.9361L14.8297 14.5106L23.9931 19.3085ZM4.6345 25.8937L0 23.4681V37.9149L23.0669 50V45.1489L4.6345 35.4894V25.8937ZM18.4324 28.2658L0 18.6169V13.7658L23.0669 25.8403V40.2977L18.4324 37.8615V28.2658ZM38.7301 23.468V18.6169L24.9205 25.8403V49.9999L29.555 47.5743V28.2659L38.7301 23.468ZM43.3546 35.4892V16.1914L48.0008 13.7659V37.9148L34.1912 45.1488V40.2977L43.3546 35.4892Z"
|
|
||||||
fill="var(--primary-color)"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div className="my-3 text-4xl font-bold text-900">YOUR COMPANY</div>
|
|
||||||
<span className="mb-2">9137 3rd Lane California City</span>
|
|
||||||
<span>CA 93504, U.S.A.</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column mt-5 md:mt-0">
|
|
||||||
<div className="text-2xl font-semibold text-left md:text-right mb-3">INVOICE</div>
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<div className="flex justify-content-between align-items-center mb-2">
|
|
||||||
<span className="font-semibold mr-6">DATE</span>
|
|
||||||
<span>30/08/2019</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content-between align-items-center mb-2">
|
|
||||||
<span className="font-semibold mr-6">INVOICE #</span>
|
|
||||||
<span>8523</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content-between align-items-center">
|
|
||||||
<span className="font-semibold mr-6">CUSTOMER ID</span>
|
|
||||||
<span>C1613</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-5 mb-8 flex flex-column">
|
|
||||||
<div className="mb-3 text-2xl font-medium">BILL TO</div>
|
|
||||||
<span className="mb-2">Claire Williams, 148 Hope Lane</span>
|
|
||||||
<span>Palo Alto, CA 94304.</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full" style={{ borderCollapse: 'collapse', tableLayout: 'auto' }}>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th className="text-left font-semibold py-3 border-bottom-1 surface-border white-space-nowrap">Description</th>
|
|
||||||
<th className="text-right font-semibold py-3 border-bottom-1 surface-border white-space-nowrap px-3">Quantity</th>
|
|
||||||
<th className="text-right font-semibold py-3 border-bottom-1 surface-border white-space-nowrap px-3">Unit Price</th>
|
|
||||||
<th className="text-right font-semibold py-3 border-bottom-1 surface-border white-space-nowrap">Line Total</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="text-left py-3 border-bottom-1 surface-border white-space-nowrap">Green T-Shirt</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border px-3">1</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border px-3">$49.00</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border">$49.00</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="text-left py-3 border-bottom-1 surface-border white-space-nowrap">Game Controller</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border px-3">2</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border px-3">$99.00</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border">$198.00</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="text-left py-3 border-bottom-1 surface-border white-space-nowrap">Mini Speakers</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border px-3">1</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border px-3">$85.00</td>
|
|
||||||
<td className="text-right py-3 border-bottom-1 surface-border">$85.00</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-column md:flex-row md:align-items-start md:justify-content-between mt-8">
|
|
||||||
<div className="font-semibold mb-3 md:mb-0">NOTES</div>
|
|
||||||
<div className="flex flex-column">
|
|
||||||
<div className="flex justify-content-between align-items-center mb-2">
|
|
||||||
<span className="font-semibold mr-6">SUBTOTAL</span>
|
|
||||||
<span>$332.00</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content-between align-items-center mb-2">
|
|
||||||
<span className="font-semibold mr-6">VAT #</span>
|
|
||||||
<span>0</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content-between align-items-center">
|
|
||||||
<span className="font-semibold mr-6">TOTAL</span>
|
|
||||||
<span>$332.00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Invoice;
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Card } from 'primereact/card';
|
|
||||||
import { Timeline } from 'primereact/timeline';
|
|
||||||
import React from 'react';
|
|
||||||
import type { CustomEvent } from '@/types';
|
|
||||||
|
|
||||||
const TimelineDemo = () => {
|
|
||||||
const customEvents: CustomEvent[] = [
|
|
||||||
{
|
|
||||||
status: 'Ordered',
|
|
||||||
date: '15/09/2022 10:30',
|
|
||||||
icon: 'pi pi-shopping-cart',
|
|
||||||
color: '#9C27B0',
|
|
||||||
image: 'game-controller.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'Processing',
|
|
||||||
date: '15/09/2022 14:00',
|
|
||||||
icon: 'pi pi-cog',
|
|
||||||
color: '#673AB7'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'Shipped',
|
|
||||||
date: '15/09/2022 16:15',
|
|
||||||
icon: 'pi pi-envelope',
|
|
||||||
color: '#FF9800'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: 'Delivered',
|
|
||||||
date: '16/09/2022 10:00',
|
|
||||||
icon: 'pi pi-check',
|
|
||||||
color: '#607D8B'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const horizontalEvents = ['2023', '2024', '2025', '2026'];
|
|
||||||
|
|
||||||
const customizedContent = (item: CustomEvent) => {
|
|
||||||
return (
|
|
||||||
<Card title={item.status} subTitle={item.date}>
|
|
||||||
{item.image && (
|
|
||||||
<img src={`/demo/images/product/${item.image}`} onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={item.name} width={200} className="shadow-2" />
|
|
||||||
)}
|
|
||||||
<p className="line-height-3 my-3">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
|
|
||||||
quas!
|
|
||||||
</p>
|
|
||||||
<Button label="Read more" className="mb-5" outlined></Button>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const customizedMarker = (item: CustomEvent) => {
|
|
||||||
return (
|
|
||||||
<span className="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" style={{ backgroundColor: item.color }}>
|
|
||||||
<i className={item.icon}></i>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Left Align</h5>
|
|
||||||
<Timeline value={customEvents} content={(item) => item.status} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Right Align</h5>
|
|
||||||
<Timeline value={customEvents} align="right" content={(item) => item.status} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Alternate Align</h5>
|
|
||||||
<Timeline value={customEvents} align="alternate" content={(item) => item.status} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Opposite Content</h5>
|
|
||||||
<Timeline value={customEvents} opposite={(item) => item.status} content={(item) => <small className="p-text-secondary">{item.date}</small>} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card timeline-demo">
|
|
||||||
<h5>Customized</h5>
|
|
||||||
<Timeline value={customEvents} align="alternate" className="customized-timeline" marker={customizedMarker} content={customizedContent} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Horizontal</h5>
|
|
||||||
<h6>Top Align</h6>
|
|
||||||
<Timeline value={horizontalEvents} layout="horizontal" align="top" content={(item) => item} />
|
|
||||||
|
|
||||||
<h6>Bottom Align</h6>
|
|
||||||
<Timeline value={horizontalEvents} layout="horizontal" align="bottom" content={(item) => item} />
|
|
||||||
|
|
||||||
<h6>Alternate Align</h6>
|
|
||||||
<Timeline value={horizontalEvents} layout="horizontal" align="alternate" content={(item) => item} opposite={<span> </span>} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TimelineDemo;
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
.p-button{
|
|
||||||
padding: 0%;
|
|
||||||
&.google {
|
|
||||||
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
border-color: var(--purple-700);
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
|
|
||||||
&:enabled:hover {
|
|
||||||
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: left bottom;
|
|
||||||
border-color: var(--purple-700);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--purple-400);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.twitter {
|
|
||||||
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
border-color: var(--blue-500);
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
&:enabled:hover {
|
|
||||||
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: left bottom;
|
|
||||||
border-color: var(--blue-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--blue-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.discord {
|
|
||||||
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
border-color: var(--bluegray-800);
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
&:enabled:hover {
|
|
||||||
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: left bottom;
|
|
||||||
border-color: var(--bluegray-800);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--purple-500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.template-button .p-button.twitter {
|
|
||||||
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
color: #fff;
|
|
||||||
border-color: var(--blue-500);
|
|
||||||
}
|
|
||||||
.template-button .p-button.twitter:hover {
|
|
||||||
background-position: left bottom;
|
|
||||||
}
|
|
||||||
.template-button .p-button.twitter i {
|
|
||||||
background-color: var(--blue-500);
|
|
||||||
}
|
|
||||||
.template-button .p-button.twitter:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--blue-200);
|
|
||||||
}
|
|
||||||
.template-button .p-button.slack {
|
|
||||||
background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
color: #fff;
|
|
||||||
border-color: var(--orange-500);
|
|
||||||
}
|
|
||||||
.template-button .p-button.slack:hover {
|
|
||||||
background-position: left bottom;
|
|
||||||
}
|
|
||||||
.template-button .p-button.slack i {
|
|
||||||
background-color: var(--orange-500);
|
|
||||||
}
|
|
||||||
.template-button .p-button.slack:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--orange-200);
|
|
||||||
}
|
|
||||||
.template-button .p-button.amazon {
|
|
||||||
background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
color: #000;
|
|
||||||
border-color: var(--yellow-500);
|
|
||||||
}
|
|
||||||
.template-button .p-button.amazon:hover {
|
|
||||||
background-position: left bottom;
|
|
||||||
}
|
|
||||||
.template-button .p-button.amazon i {
|
|
||||||
background-color: var(--yellow-500);
|
|
||||||
}
|
|
||||||
.template-button .p-button.amazon:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--yellow-200);
|
|
||||||
}
|
|
||||||
.template-button .p-button.discord {
|
|
||||||
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
background-position: right bottom;
|
|
||||||
transition: background-position 0.5s ease-out;
|
|
||||||
color: #fff;
|
|
||||||
border-color: var(--bluegray-800);
|
|
||||||
}
|
|
||||||
.template-button .p-button.discord:hover {
|
|
||||||
background-position: left bottom;
|
|
||||||
}
|
|
||||||
.template-button .p-button.discord i {
|
|
||||||
background-color: var(--bluegray-800);
|
|
||||||
}
|
|
||||||
.template-button .p-button.discord:focus {
|
|
||||||
box-shadow: 0 0 0 1px var(--bluegray-500);
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 960px) {
|
|
||||||
-button .p-button {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
-button .p-button:not(.p-button-icon-only) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
}
|
|
||||||
-button .p-buttonset .p-button {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,248 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { SplitButton } from 'primereact/splitbutton';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import styles from './index.module.scss';
|
|
||||||
import { classNames } from 'primereact/utils';
|
|
||||||
|
|
||||||
const ButtonDemo = () => {
|
|
||||||
const [loading1, setLoading1] = useState(false);
|
|
||||||
const [loading2, setLoading2] = useState(false);
|
|
||||||
const [loading3, setLoading3] = useState(false);
|
|
||||||
const [loading4, setLoading4] = useState(false);
|
|
||||||
|
|
||||||
const onLoadingClick1 = () => {
|
|
||||||
setLoading1(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoading1(false);
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onLoadingClick2 = () => {
|
|
||||||
setLoading2(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoading2(false);
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onLoadingClick3 = () => {
|
|
||||||
setLoading3(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoading3(false);
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onLoadingClick4 = () => {
|
|
||||||
setLoading4(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLoading4(false);
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
label: 'Update',
|
|
||||||
icon: 'pi pi-refresh'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Delete',
|
|
||||||
icon: 'pi pi-times'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Home',
|
|
||||||
icon: 'pi pi-home'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Default</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Submit"></Button>
|
|
||||||
<Button label="Disabled" disabled></Button>
|
|
||||||
<Button label="Link" link></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Severities</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Primary" />
|
|
||||||
<Button label="Secondary" severity="secondary" />
|
|
||||||
<Button label="Success" severity="success" />
|
|
||||||
<Button label="Info" severity="info" />
|
|
||||||
<Button label="Warning" severity="warning" />
|
|
||||||
<Button label="Help" severity="help" />
|
|
||||||
<Button label="Danger" severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Text</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Primary" text />
|
|
||||||
<Button label="Secondary" text severity="secondary" />
|
|
||||||
<Button label="Success" text severity="success" />
|
|
||||||
<Button label="Info" text severity="info" />
|
|
||||||
<Button label="Warning" text severity="warning" />
|
|
||||||
<Button label="Help" text severity="help" />
|
|
||||||
<Button label="Danger" text severity="danger" />
|
|
||||||
<Button label="Plain" text className="p-button-plain" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Outlined</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Primary" outlined />
|
|
||||||
<Button label="Secondary" outlined severity="secondary" />
|
|
||||||
<Button label="Success" outlined severity="success" />
|
|
||||||
<Button label="Info" outlined severity="info" />
|
|
||||||
<Button label="Warning" outlined severity="warning" />
|
|
||||||
<Button label="Help" outlined severity="help" />
|
|
||||||
<Button label="Danger" outlined severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Button Group</h5>
|
|
||||||
<span className="p-buttonset flex">
|
|
||||||
<Button label="Save" icon="pi pi-check" />
|
|
||||||
<Button label="Delete" icon="pi pi-trash" />
|
|
||||||
<Button label="Cancel" icon="pi pi-times" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>SplitButton</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="secondary"></SplitButton>
|
|
||||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="success"></SplitButton>
|
|
||||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="info"></SplitButton>
|
|
||||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="warning"></SplitButton>
|
|
||||||
<SplitButton label="Save" icon="pi pi-check" model={items} severity="danger"></SplitButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Template</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button className={classNames(styles['p-button'], styles['google'])} aria-label="Google">
|
|
||||||
<span className="flex align-items-center px-2 bg-purple-700 text-white">
|
|
||||||
<i className="pi pi-google"></i>
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-2 flex align-items-center text-white">Google</span>
|
|
||||||
</Button>
|
|
||||||
<Button className={classNames(styles['p-button'], styles['twitter'])} aria-label="Twitter">
|
|
||||||
<span className="flex align-items-center px-2 bg-blue-500 text-white">
|
|
||||||
<i className="pi pi-twitter"></i>
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
|
|
||||||
</Button>
|
|
||||||
<Button className={classNames(styles['p-button'], styles['discord'])} aria-label="Discord">
|
|
||||||
<span className="flex align-items-center px-2 bg-bluegray-800 text-white">
|
|
||||||
<i className="pi pi-discord"></i>
|
|
||||||
</span>
|
|
||||||
<span className="px-3 py-2 flex align-items-center text-white">Discord</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Icons</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button icon="pi pi-star-fill"></Button>
|
|
||||||
<Button label="Bookmark" icon="pi pi-bookmark"></Button>
|
|
||||||
<Button label="Bookmark" icon="pi pi-bookmark" iconPos="right"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Raised</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Primary" raised />
|
|
||||||
<Button label="Secondary" raised severity="secondary" />
|
|
||||||
<Button label="Success" raised severity="success" />
|
|
||||||
<Button label="Info" raised severity="info" />
|
|
||||||
<Button label="Warning" raised severity="warning" />
|
|
||||||
<Button label="Help" raised severity="help" />
|
|
||||||
<Button label="Danger" raised severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Rounded</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Primary" rounded />
|
|
||||||
<Button label="Secondary" rounded severity="secondary" />
|
|
||||||
<Button label="Success" rounded severity="success" />
|
|
||||||
<Button label="Info" rounded severity="info" />
|
|
||||||
<Button label="Warning" rounded severity="warning" />
|
|
||||||
<Button label="Help" rounded severity="help" />
|
|
||||||
<Button label="Danger" rounded severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Rounded Icons</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button icon="pi pi-check" rounded />
|
|
||||||
<Button icon="pi pi-bookmark" rounded severity="secondary" />
|
|
||||||
<Button icon="pi pi-search" rounded severity="success" />
|
|
||||||
<Button icon="pi pi-user" rounded severity="info" />
|
|
||||||
<Button icon="pi pi-bell" rounded severity="warning" />
|
|
||||||
<Button icon="pi pi-heart" rounded severity="help" />
|
|
||||||
<Button icon="pi pi-times" rounded severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Rounded Text</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button icon="pi pi-check" rounded text />
|
|
||||||
<Button icon="pi pi-bookmark" rounded text severity="secondary" />
|
|
||||||
<Button icon="pi pi-search" rounded text severity="success" />
|
|
||||||
<Button icon="pi pi-user" rounded text severity="info" />
|
|
||||||
<Button icon="pi pi-bell" rounded text severity="warning" />
|
|
||||||
<Button icon="pi pi-heart" rounded text severity="help" />
|
|
||||||
<Button icon="pi pi-times" rounded text severity="danger" />
|
|
||||||
<Button icon="pi pi-filter" rounded text className="p-button-plain" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Rounded Outlined</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button icon="pi pi-check" rounded outlined />
|
|
||||||
<Button icon="pi pi-bookmark" rounded outlined severity="secondary" />
|
|
||||||
<Button icon="pi pi-search" rounded outlined severity="success" />
|
|
||||||
<Button icon="pi pi-user" rounded outlined severity="info" />
|
|
||||||
<Button icon="pi pi-bell" rounded outlined severity="warning" />
|
|
||||||
<Button icon="pi pi-heart" rounded outlined severity="help" />
|
|
||||||
<Button icon="pi pi-times" rounded outlined severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Loading</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Search" icon="pi pi-search" loading={loading1} onClick={onLoadingClick1} />
|
|
||||||
<Button label="Search" icon="pi pi-search" iconPos="right" loading={loading2} onClick={onLoadingClick2} />
|
|
||||||
<Button icon="pi pi-search" loading={loading3} onClick={onLoadingClick3} />
|
|
||||||
<Button label="Search" loading={loading4} onClick={onLoadingClick4} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ButtonDemo;
|
|
||||||
@@ -1,283 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { ChartData, ChartOptions } from 'chart.js';
|
|
||||||
import { Chart } from 'primereact/chart';
|
|
||||||
import React, { useContext, useEffect, useState } from 'react';
|
|
||||||
import { LayoutContext } from '../../../../layout/context/layoutcontext';
|
|
||||||
import type { ChartDataState, ChartOptionsState } from '@/types';
|
|
||||||
|
|
||||||
const ChartDemo = () => {
|
|
||||||
const [options, setOptions] = useState<ChartOptionsState>({});
|
|
||||||
const [data, setChartData] = useState<ChartDataState>({});
|
|
||||||
const { layoutConfig } = useContext(LayoutContext);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const documentStyle = getComputedStyle(document.documentElement);
|
|
||||||
const textColor = documentStyle.getPropertyValue('--text-color') || '#495057';
|
|
||||||
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary') || '#6c757d';
|
|
||||||
const surfaceBorder = documentStyle.getPropertyValue('--surface-border') || '#dee2e6';
|
|
||||||
const barData: ChartData = {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'My First dataset',
|
|
||||||
backgroundColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
|
||||||
borderColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Second dataset',
|
|
||||||
backgroundColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
|
||||||
borderColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const barOptions: ChartOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: textColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
ticks: {
|
|
||||||
color: textColorSecondary,
|
|
||||||
font: {
|
|
||||||
weight: '500'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
ticks: {
|
|
||||||
color: textColorSecondary
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: surfaceBorder
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const pieData: ChartData = {
|
|
||||||
labels: ['A', 'B', 'C'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [540, 325, 702],
|
|
||||||
backgroundColor: [documentStyle.getPropertyValue('--indigo-500') || '#3f51b5', documentStyle.getPropertyValue('--purple-500') || '#9c27b0', documentStyle.getPropertyValue('--teal-500') || '#009688'],
|
|
||||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--indigo-400') || '#6372c3', documentStyle.getPropertyValue('--purple-400') || '#af50bf', documentStyle.getPropertyValue('--teal-400') || '#30aa9f']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const pieOptions: ChartOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
usePointStyle: true,
|
|
||||||
color: textColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const lineData: ChartData = {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'First Dataset',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
|
||||||
fill: false,
|
|
||||||
backgroundColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
|
||||||
borderColor: documentStyle.getPropertyValue('--primary-500') || '#2196f3',
|
|
||||||
tension: 0.4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Second Dataset',
|
|
||||||
data: [28, 48, 40, 19, 86, 27, 90],
|
|
||||||
fill: false,
|
|
||||||
backgroundColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
|
||||||
borderColor: documentStyle.getPropertyValue('--primary-200') || '#a0d2fa',
|
|
||||||
tension: 0.4
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const lineOptions: ChartOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: textColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
ticks: {
|
|
||||||
color: textColorSecondary
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: surfaceBorder
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
ticks: {
|
|
||||||
color: textColorSecondary
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: surfaceBorder
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const polarData: ChartData = {
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [11, 16, 7, 3],
|
|
||||||
backgroundColor: [
|
|
||||||
documentStyle.getPropertyValue('--indigo-500') || '#3f51b5',
|
|
||||||
documentStyle.getPropertyValue('--purple-500') || '#9c27b0',
|
|
||||||
documentStyle.getPropertyValue('--teal-500') || '#009688',
|
|
||||||
documentStyle.getPropertyValue('--orange-500') || '#f57c00'
|
|
||||||
],
|
|
||||||
label: 'My dataset'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
|
|
||||||
};
|
|
||||||
|
|
||||||
const polarOptions: ChartOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: textColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
r: {
|
|
||||||
grid: {
|
|
||||||
color: surfaceBorder
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const radarData: ChartData = {
|
|
||||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'My First dataset',
|
|
||||||
borderColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
|
||||||
pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
|
||||||
pointBorderColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
|
||||||
pointHoverBackgroundColor: textColor,
|
|
||||||
pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400') || '#6372c3',
|
|
||||||
data: [65, 59, 90, 81, 56, 55, 40]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Second dataset',
|
|
||||||
borderColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
|
||||||
pointBackgroundColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
|
||||||
pointBorderColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
|
||||||
pointHoverBackgroundColor: textColor,
|
|
||||||
pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400') || '#af50bf',
|
|
||||||
data: [28, 48, 40, 19, 96, 27, 100]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const radarOptions: ChartOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: textColor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
r: {
|
|
||||||
grid: {
|
|
||||||
color: textColorSecondary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
setOptions({
|
|
||||||
barOptions,
|
|
||||||
pieOptions,
|
|
||||||
lineOptions,
|
|
||||||
polarOptions,
|
|
||||||
radarOptions
|
|
||||||
});
|
|
||||||
setChartData({
|
|
||||||
barData,
|
|
||||||
pieData,
|
|
||||||
lineData,
|
|
||||||
polarData,
|
|
||||||
radarData
|
|
||||||
});
|
|
||||||
}, [layoutConfig]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid p-fluid">
|
|
||||||
<div className="col-12 xl:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Linear Chart</h5>
|
|
||||||
<Chart type="line" data={data.lineData} options={options.lineOptions}></Chart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 xl:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Bar Chart</h5>
|
|
||||||
<Chart type="bar" data={data.barData} options={options.barOptions}></Chart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 xl:col-6">
|
|
||||||
<div className="card flex flex-column align-items-center">
|
|
||||||
<h5 className="text-left w-full">Pie Chart</h5>
|
|
||||||
<Chart type="pie" data={data.pieData} options={options.pieOptions}></Chart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 xl:col-6">
|
|
||||||
<div className="card flex flex-column align-items-center">
|
|
||||||
<h5 className="text-left w-full">Doughnut Chart</h5>
|
|
||||||
<Chart type="doughnut" data={data.pieData} options={options.pieOptions}></Chart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 xl:col-6">
|
|
||||||
<div className="card flex flex-column align-items-center">
|
|
||||||
<h5 className="text-left w-full">Polar Area Chart</h5>
|
|
||||||
<Chart type="polarArea" data={data.polarData} options={options.polarOptions}></Chart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 xl:col-6">
|
|
||||||
<div className="card flex flex-column align-items-center">
|
|
||||||
<h5 className="text-left w-full">Radar Chart</h5>
|
|
||||||
<Chart type="radar" data={data.radarData} options={options.radarOptions}></Chart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChartDemo;
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useRef } from 'react';
|
|
||||||
import { FileUpload } from 'primereact/fileupload';
|
|
||||||
import { Toast } from 'primereact/toast';
|
|
||||||
|
|
||||||
const FileDemo = () => {
|
|
||||||
const toast = useRef<Toast | null>(null);
|
|
||||||
|
|
||||||
const onUpload = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'info',
|
|
||||||
summary: 'Success',
|
|
||||||
detail: 'File Uploaded',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<Toast ref={toast}></Toast>
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Advanced</h5>
|
|
||||||
<FileUpload name="demo[]" url="/api/upload" onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} />
|
|
||||||
|
|
||||||
<h5>Basic</h5>
|
|
||||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FileDemo;
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
|
|
||||||
import { Calendar } from 'primereact/calendar';
|
|
||||||
import { Chips } from 'primereact/chips';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { InputMask } from 'primereact/inputmask';
|
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
|
||||||
import { MultiSelect } from 'primereact/multiselect';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { CountryService } from '../../../../demo/service/CountryService';
|
|
||||||
|
|
||||||
const FloatLabelDemo = () => {
|
|
||||||
const [countries, setCountries] = useState<Demo.Country[]>([]);
|
|
||||||
const [filteredCountries, setFilteredCountries] = useState<Demo.Country[]>([]);
|
|
||||||
const [value1, setValue1] = useState('');
|
|
||||||
const [value2, setValue2] = useState(null);
|
|
||||||
const [value3, setValue3] = useState('');
|
|
||||||
const [value4, setValue4] = useState('');
|
|
||||||
const [value5, setValue5] = useState<any>(null);
|
|
||||||
const [value6, setValue6] = useState<any[]>([]);
|
|
||||||
const [value7, setValue7] = useState('');
|
|
||||||
const [value8, setValue8] = useState<number | null>(null);
|
|
||||||
const [value9, setValue9] = useState('');
|
|
||||||
const [value10, setValue10] = useState(null);
|
|
||||||
const [value11, setValue11] = useState(null);
|
|
||||||
const [value12, setValue12] = useState('');
|
|
||||||
|
|
||||||
const cities = [
|
|
||||||
{ name: 'New York', code: 'NY' },
|
|
||||||
{ name: 'Rome', code: 'RM' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Istanbul', code: 'IST' },
|
|
||||||
{ name: 'Paris', code: 'PRS' }
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
CountryService.getCountries().then((countries) => {
|
|
||||||
setCountries(countries);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const searchCountry = (event: AutoCompleteCompleteEvent) => {
|
|
||||||
const filtered = [];
|
|
||||||
const query = event.query;
|
|
||||||
for (let i = 0; i < countries.length; i++) {
|
|
||||||
const country = countries[i];
|
|
||||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {
|
|
||||||
filtered.push(country);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setFilteredCountries(filtered);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h5>Float Label</h5>
|
|
||||||
<p>
|
|
||||||
All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.
|
|
||||||
</p>
|
|
||||||
<div className="grid p-fluid mt-3">
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<InputText type="text" id="inputtext" value={value1} onChange={(e) => setValue1(e.target.value)} />
|
|
||||||
<label htmlFor="inputtext">InputText</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<AutoComplete id="autocomplete" value={value2} onChange={(e) => setValue2(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name"></AutoComplete>
|
|
||||||
<label htmlFor="autocomplete">AutoComplete</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label p-input-icon-left">
|
|
||||||
<i className="pi pi-search" />
|
|
||||||
<InputText id="lefticon" value={value3} onChange={(e) => setValue3(e.target.value)} />
|
|
||||||
<label htmlFor="lefticon">Left Icon</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label p-input-icon-right">
|
|
||||||
<i className="pi pi-spin pi-spinner" />
|
|
||||||
<InputText id="righticon" value={value4} onChange={(e) => setValue4(e.target.value)} />
|
|
||||||
<label htmlFor="righticon">Right Icon</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<Calendar inputId="calendar" value={value5} onChange={(e) => setValue5(e.value ?? '')}></Calendar>
|
|
||||||
<label htmlFor="calendar">Calendar</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<Chips inputId="chips" value={value6} onChange={(e) => setValue6(e.value ?? [])}></Chips>
|
|
||||||
<label htmlFor="chips">Chips</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<InputMask id="inputmask" mask="99/99/9999" value={value7} onChange={(e) => setValue7(e.value ?? '')}></InputMask>
|
|
||||||
<label htmlFor="inputmask">InputMask</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<InputNumber id="inputnumber" value={value8} onValueChange={(e) => setValue8(e.target.value ?? null)}></InputNumber>
|
|
||||||
<label htmlFor="inputnumber">InputNumber</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<div className="p-inputgroup">
|
|
||||||
<span className="p-inputgroup-addon">
|
|
||||||
<i className="pi pi-user"></i>
|
|
||||||
</span>
|
|
||||||
<span className="p-float-label">
|
|
||||||
<InputText type="text" id="inputgroup" value={value9} onChange={(e) => setValue9(e.target.value)} />
|
|
||||||
<label htmlFor="inputgroup">InputGroup</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<Dropdown id="dropdown" options={cities} value={value10} onChange={(e) => setValue10(e.value)} optionLabel="name"></Dropdown>
|
|
||||||
<label htmlFor="dropdown">Dropdown</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<MultiSelect id="multiselect" options={cities} value={value11} onChange={(e) => setValue11(e.value)} optionLabel="name"></MultiSelect>
|
|
||||||
<label htmlFor="multiselect">MultiSelect</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-4">
|
|
||||||
<span className="p-float-label">
|
|
||||||
<InputTextarea id="textarea" rows={3} value={value12} onChange={(e) => setValue12(e.target.value)}></InputTextarea>
|
|
||||||
<label htmlFor="textarea">Textarea</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FloatLabelDemo;
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState, useEffect, useMemo } from 'react';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
|
|
||||||
interface DropdownItem {
|
|
||||||
name: string;
|
|
||||||
code: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const FormLayoutDemo = () => {
|
|
||||||
const [dropdownItem, setDropdownItem] = useState<DropdownItem | null>(null);
|
|
||||||
const dropdownItems: DropdownItem[] = useMemo(
|
|
||||||
() => [
|
|
||||||
{ name: 'Option 1', code: 'Option 1' },
|
|
||||||
{ name: 'Option 2', code: 'Option 2' },
|
|
||||||
{ name: 'Option 3', code: 'Option 3' }
|
|
||||||
],
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setDropdownItem(dropdownItems[0]);
|
|
||||||
}, [dropdownItems]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card p-fluid">
|
|
||||||
<h5>Vertical</h5>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="name1">Name</label>
|
|
||||||
<InputText id="name1" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="email1">Email</label>
|
|
||||||
<InputText id="email1" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="age1">Age</label>
|
|
||||||
<InputText id="age1" type="text" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card p-fluid">
|
|
||||||
<h5>Vertical Grid</h5>
|
|
||||||
<div className="formgrid grid">
|
|
||||||
<div className="field col">
|
|
||||||
<label htmlFor="name2">Name</label>
|
|
||||||
<InputText id="name2" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field col">
|
|
||||||
<label htmlFor="email2">Email</label>
|
|
||||||
<InputText id="email2" type="text" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card p-fluid">
|
|
||||||
<h5>Horizontal</h5>
|
|
||||||
<div className="field grid">
|
|
||||||
<label htmlFor="name3" className="col-12 mb-2 md:col-2 md:mb-0">
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<div className="col-12 md:col-10">
|
|
||||||
<InputText id="name3" type="text" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="field grid">
|
|
||||||
<label htmlFor="email3" className="col-12 mb-2 md:col-2 md:mb-0">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<div className="col-12 md:col-10">
|
|
||||||
<InputText id="email3" type="text" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Inline</h5>
|
|
||||||
<div className="formgroup-inline">
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="firstname1" className="p-sr-only">
|
|
||||||
Firstname
|
|
||||||
</label>
|
|
||||||
<InputText id="firstname1" type="text" placeholder="Firstname" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="lastname1" className="p-sr-only">
|
|
||||||
Lastname
|
|
||||||
</label>
|
|
||||||
<InputText id="lastname1" type="text" placeholder="Lastname" />
|
|
||||||
</div>
|
|
||||||
<Button label="Submit"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Help Text</h5>
|
|
||||||
<div className="field p-fluid">
|
|
||||||
<label htmlFor="username">Username</label>
|
|
||||||
<InputText id="username" type="text" />
|
|
||||||
<small>Enter your username to reset your password.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Advanced</h5>
|
|
||||||
<div className="p-fluid formgrid grid">
|
|
||||||
<div className="field col-12 md:col-6">
|
|
||||||
<label htmlFor="firstname2">Firstname</label>
|
|
||||||
<InputText id="firstname2" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-6">
|
|
||||||
<label htmlFor="lastname2">Lastname</label>
|
|
||||||
<InputText id="lastname2" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field col-12">
|
|
||||||
<label htmlFor="address">Address</label>
|
|
||||||
<InputTextarea id="address" rows={4} />
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-6">
|
|
||||||
<label htmlFor="city">City</label>
|
|
||||||
<InputText id="city" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-3">
|
|
||||||
<label htmlFor="state">State</label>
|
|
||||||
<Dropdown id="state" value={dropdownItem} onChange={(e) => setDropdownItem(e.value)} options={dropdownItems} optionLabel="name" placeholder="Select One"></Dropdown>
|
|
||||||
</div>
|
|
||||||
<div className="field col-12 md:col-3">
|
|
||||||
<label htmlFor="zip">Zip</label>
|
|
||||||
<InputText id="zip" type="text" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FormLayoutDemo;
|
|
||||||
@@ -1,352 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import type { Demo, Page } from '@/types';
|
|
||||||
import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Calendar } from 'primereact/calendar';
|
|
||||||
import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
|
|
||||||
import { Chips } from 'primereact/chips';
|
|
||||||
import { ColorPicker, ColorPickerHSBType, ColorPickerRGBType } from 'primereact/colorpicker';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
|
||||||
import { InputSwitch } from 'primereact/inputswitch';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
|
||||||
import { Knob } from 'primereact/knob';
|
|
||||||
import { ListBox } from 'primereact/listbox';
|
|
||||||
import { MultiSelect } from 'primereact/multiselect';
|
|
||||||
import { RadioButton } from 'primereact/radiobutton';
|
|
||||||
import { Rating } from 'primereact/rating';
|
|
||||||
import { SelectButton } from 'primereact/selectbutton';
|
|
||||||
import { Slider } from 'primereact/slider';
|
|
||||||
import { ToggleButton } from 'primereact/togglebutton';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { CountryService } from '../../../../demo/service/CountryService';
|
|
||||||
|
|
||||||
interface InputValue {
|
|
||||||
name: string;
|
|
||||||
code: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const InputDemo: Page = () => {
|
|
||||||
const [floatValue, setFloatValue] = useState('');
|
|
||||||
const [autoValue, setAutoValue] = useState<Demo.Country[]>([]);
|
|
||||||
const [selectedAutoValue, setSelectedAutoValue] = useState(null);
|
|
||||||
const [autoFilteredValue, setAutoFilteredValue] = useState<Demo.Country[]>([]);
|
|
||||||
const [calendarValue, setCalendarValue] = useState<any>(null);
|
|
||||||
const [inputNumberValue, setInputNumberValue] = useState<number | null>(null);
|
|
||||||
const [chipsValue, setChipsValue] = useState<any[]>([]);
|
|
||||||
const [sliderValue, setSliderValue] = useState<number | string>('');
|
|
||||||
const [ratingValue, setRatingValue] = useState<number | null>(null);
|
|
||||||
const [colorValue, setColorValue] = useState<string | ColorPickerRGBType | ColorPickerHSBType>('1976D2');
|
|
||||||
const [knobValue, setKnobValue] = useState(20);
|
|
||||||
const [radioValue, setRadioValue] = useState(null);
|
|
||||||
const [checkboxValue, setCheckboxValue] = useState<string[]>([]);
|
|
||||||
const [switchValue, setSwitchValue] = useState(false);
|
|
||||||
const [listboxValue, setListboxValue] = useState(null);
|
|
||||||
const [dropdownValue, setDropdownValue] = useState(null);
|
|
||||||
const [multiselectValue, setMultiselectValue] = useState(null);
|
|
||||||
const [toggleValue, setToggleValue] = useState(false);
|
|
||||||
const [selectButtonValue1, setSelectButtonValue1] = useState(null);
|
|
||||||
const [selectButtonValue2, setSelectButtonValue2] = useState(null);
|
|
||||||
const [inputGroupValue, setInputGroupValue] = useState(false);
|
|
||||||
|
|
||||||
const listboxValues: InputValue[] = [
|
|
||||||
{ name: 'New York', code: 'NY' },
|
|
||||||
{ name: 'Rome', code: 'RM' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Istanbul', code: 'IST' },
|
|
||||||
{ name: 'Paris', code: 'PRS' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const dropdownValues: InputValue[] = [
|
|
||||||
{ name: 'New York', code: 'NY' },
|
|
||||||
{ name: 'Rome', code: 'RM' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Istanbul', code: 'IST' },
|
|
||||||
{ name: 'Paris', code: 'PRS' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const multiselectValues: InputValue[] = [
|
|
||||||
{ name: 'Australia', code: 'AU' },
|
|
||||||
{ name: 'Brazil', code: 'BR' },
|
|
||||||
{ name: 'China', code: 'CN' },
|
|
||||||
{ name: 'Egypt', code: 'EG' },
|
|
||||||
{ name: 'France', code: 'FR' },
|
|
||||||
{ name: 'Germany', code: 'DE' },
|
|
||||||
{ name: 'India', code: 'IN' },
|
|
||||||
{ name: 'Japan', code: 'JP' },
|
|
||||||
{ name: 'Spain', code: 'ES' },
|
|
||||||
{ name: 'United States', code: 'US' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const selectButtonValues1: InputValue[] = [
|
|
||||||
{ name: 'Option 1', code: 'O1' },
|
|
||||||
{ name: 'Option 2', code: 'O2' },
|
|
||||||
{ name: 'Option 3', code: 'O3' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const selectButtonValues2: InputValue[] = [
|
|
||||||
{ name: 'Option 1', code: 'O1' },
|
|
||||||
{ name: 'Option 2', code: 'O2' },
|
|
||||||
{ name: 'Option 3', code: 'O3' }
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
CountryService.getCountries().then((data) => setAutoValue(data));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const searchCountry = (event: AutoCompleteCompleteEvent) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!event.query.trim().length) {
|
|
||||||
setAutoFilteredValue([...autoValue]);
|
|
||||||
} else {
|
|
||||||
setAutoFilteredValue(
|
|
||||||
autoValue.filter((country) => {
|
|
||||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, 250);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onCheckboxChange = (e: CheckboxChangeEvent) => {
|
|
||||||
let selectedValue = [...checkboxValue];
|
|
||||||
if (e.checked) selectedValue.push(e.value);
|
|
||||||
else selectedValue.splice(selectedValue.indexOf(e.value), 1);
|
|
||||||
|
|
||||||
setCheckboxValue(selectedValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemTemplate = (option: InputValue) => {
|
|
||||||
return (
|
|
||||||
<div className="flex align-items-center">
|
|
||||||
<img
|
|
||||||
alt={option.name}
|
|
||||||
src={`/demo/images/flag/flag_placeholder.png`}
|
|
||||||
onError={(e) => (e.currentTarget.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
|
|
||||||
className={`flag flag-${option.code.toLowerCase()}`}
|
|
||||||
style={{ width: '21px' }}
|
|
||||||
/>
|
|
||||||
<span className="ml-2">{option.name}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid p-fluid input-demo">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>InputText</h5>
|
|
||||||
<div className="grid formgrid">
|
|
||||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
|
||||||
<InputText type="text" placeholder="Default"></InputText>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
|
||||||
<InputText type="text" placeholder="Disabled" disabled></InputText>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
|
||||||
<InputText type="text" placeholder="Invalid" className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Icons</h5>
|
|
||||||
<div className="grid formgrid">
|
|
||||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
|
||||||
<span className="p-input-icon-left">
|
|
||||||
<i className="pi pi-user" />
|
|
||||||
<InputText type="text" placeholder="Username" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
|
||||||
<span className="p-input-icon-right">
|
|
||||||
<InputText type="text" placeholder="Search" />
|
|
||||||
<i className="pi pi-search" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-2 lg:col-4 lg:mb-0">
|
|
||||||
<span className="p-input-icon-left p-input-icon-right">
|
|
||||||
<i className="pi pi-user" />
|
|
||||||
<InputText type="text" placeholder="Search" />
|
|
||||||
<i className="pi pi-search" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Float Label</h5>
|
|
||||||
<span className="p-float-label">
|
|
||||||
<InputText id="username" type="text" value={floatValue} onChange={(e) => setFloatValue(e.target.value)} />
|
|
||||||
<label htmlFor="username">Username</label>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h5>Textarea</h5>
|
|
||||||
<InputTextarea placeholder="Your Message" rows={5} cols={30} />
|
|
||||||
|
|
||||||
<h5>AutoComplete</h5>
|
|
||||||
<AutoComplete placeholder="Search" id="dd" dropdown multiple value={selectedAutoValue} onChange={(e) => setSelectedAutoValue(e.value)} suggestions={autoFilteredValue} completeMethod={searchCountry} field="name" />
|
|
||||||
|
|
||||||
<h5>Calendar</h5>
|
|
||||||
<Calendar showIcon showButtonBar value={calendarValue} onChange={(e) => setCalendarValue(e.value ?? null)} />
|
|
||||||
|
|
||||||
<h5>InputNumber</h5>
|
|
||||||
<InputNumber value={inputNumberValue} onValueChange={(e) => setInputNumberValue(e.value ?? null)} showButtons mode="decimal"></InputNumber>
|
|
||||||
|
|
||||||
<h5>Chips</h5>
|
|
||||||
<Chips value={chipsValue} onChange={(e) => setChipsValue(e.value ?? [])} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<h5>Slider</h5>
|
|
||||||
<InputText value={sliderValue as string} onChange={(e) => setSliderValue(parseInt(e.target.value, 10))} />
|
|
||||||
<Slider value={sliderValue as number} onChange={(e) => setSliderValue(e.value as number)} />
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<h5>Rating</h5>
|
|
||||||
<Rating value={ratingValue as number} onChange={(e) => setRatingValue(e.value ?? 0)} />
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<h5>ColorPicker</h5>
|
|
||||||
<ColorPicker value={colorValue} onChange={(e) => setColorValue(e.value ?? '')} style={{ width: '2rem' }} />
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<h5>Knob</h5>
|
|
||||||
<Knob value={knobValue} valueTemplate={'{value}%'} onChange={(e) => setKnobValue(e.value)} step={10} min={-50} max={50} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>RadioButton</h5>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="field-radiobutton">
|
|
||||||
<RadioButton inputId="option1" name="option" value="Chicago" checked={radioValue === 'Chicago'} onChange={(e) => setRadioValue(e.value)} />
|
|
||||||
<label htmlFor="option1">Chicago</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="field-radiobutton">
|
|
||||||
<RadioButton inputId="option2" name="option" value="Los Angeles" checked={radioValue === 'Los Angeles'} onChange={(e) => setRadioValue(e.value)} />
|
|
||||||
<label htmlFor="option2">Los Angeles</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="field-radiobutton">
|
|
||||||
<RadioButton inputId="option3" name="option" value="New York" checked={radioValue === 'New York'} onChange={(e) => setRadioValue(e.value)} />
|
|
||||||
<label htmlFor="option3">New York</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Checkbox</h5>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="field-checkbox">
|
|
||||||
<Checkbox inputId="checkOption1" name="option" value="Chicago" checked={checkboxValue.indexOf('Chicago') !== -1} onChange={onCheckboxChange} />
|
|
||||||
<label htmlFor="checkOption1">Chicago</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="field-checkbox">
|
|
||||||
<Checkbox inputId="checkOption2" name="option" value="Los Angeles" checked={checkboxValue.indexOf('Los Angeles') !== -1} onChange={onCheckboxChange} />
|
|
||||||
<label htmlFor="checkOption2">Los Angeles</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="field-checkbox">
|
|
||||||
<Checkbox inputId="checkOption3" name="option" value="New York" checked={checkboxValue.indexOf('New York') !== -1} onChange={onCheckboxChange} />
|
|
||||||
<label htmlFor="checkOption3">New York</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Input Switch</h5>
|
|
||||||
<InputSwitch checked={switchValue} onChange={(e) => setSwitchValue(e.value ?? false)} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>Listbox</h5>
|
|
||||||
<ListBox value={listboxValue} onChange={(e) => setListboxValue(e.value)} options={listboxValues} optionLabel="name" filter />
|
|
||||||
|
|
||||||
<h5>Dropdown</h5>
|
|
||||||
<Dropdown value={dropdownValue} onChange={(e) => setDropdownValue(e.value)} options={dropdownValues} optionLabel="name" placeholder="Select" />
|
|
||||||
|
|
||||||
<h5>MultiSelect</h5>
|
|
||||||
<MultiSelect
|
|
||||||
value={multiselectValue}
|
|
||||||
onChange={(e) => setMultiselectValue(e.value)}
|
|
||||||
options={multiselectValues}
|
|
||||||
itemTemplate={itemTemplate}
|
|
||||||
optionLabel="name"
|
|
||||||
placeholder="Select Countries"
|
|
||||||
filter
|
|
||||||
className="multiselect-custom"
|
|
||||||
display="chip"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>ToggleButton</h5>
|
|
||||||
<ToggleButton checked={toggleValue} onChange={(e) => setToggleValue(e.value)} onLabel="Yes" offLabel="No" />
|
|
||||||
|
|
||||||
<h5>SelectButton</h5>
|
|
||||||
<SelectButton value={selectButtonValue1} onChange={(e) => setSelectButtonValue1(e.value)} options={selectButtonValues1} optionLabel="name" />
|
|
||||||
|
|
||||||
<h5>SelectButton - Multiple</h5>
|
|
||||||
<SelectButton value={selectButtonValue2} onChange={(e) => setSelectButtonValue2(e.value)} options={selectButtonValues2} optionLabel="name" multiple />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Input Groups</h5>
|
|
||||||
<div className="grid p-fluid">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="p-inputgroup">
|
|
||||||
<span className="p-inputgroup-addon">
|
|
||||||
<i className="pi pi-user"></i>
|
|
||||||
</span>
|
|
||||||
<InputText placeholder="Username" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="p-inputgroup">
|
|
||||||
<span className="p-inputgroup-addon">
|
|
||||||
<i className="pi pi-shopping-cart"></i>
|
|
||||||
</span>
|
|
||||||
<span className="p-inputgroup-addon">
|
|
||||||
<i className="pi pi-globe"></i>
|
|
||||||
</span>
|
|
||||||
<InputText placeholder="Price" />
|
|
||||||
<span className="p-inputgroup-addon">$</span>
|
|
||||||
<span className="p-inputgroup-addon">.00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="p-inputgroup">
|
|
||||||
<Button label="Search" />
|
|
||||||
<InputText placeholder="Keyword" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="p-inputgroup">
|
|
||||||
<span className="p-inputgroup-addon p-inputgroup-addon-checkbox">
|
|
||||||
<Checkbox checked={inputGroupValue} onChange={(e) => setInputGroupValue(e.checked ?? false)} />
|
|
||||||
</span>
|
|
||||||
<InputText placeholder="Confirm" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InputDemo;
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
|
|
||||||
import { Calendar } from 'primereact/calendar';
|
|
||||||
import { Chips } from 'primereact/chips';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { InputMask } from 'primereact/inputmask';
|
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
|
||||||
import { MultiSelect } from 'primereact/multiselect';
|
|
||||||
import { Password } from 'primereact/password';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { CountryService } from '../../../../demo/service/CountryService';
|
|
||||||
|
|
||||||
const InvalidStateDemo = () => {
|
|
||||||
const [countries, setCountries] = useState<Demo.Country[]>([]);
|
|
||||||
const [filteredCountries, setFilteredCountries] = useState<Demo.Country[]>([]);
|
|
||||||
const [value1, setValue1] = useState('');
|
|
||||||
const [value2, setValue2] = useState(null);
|
|
||||||
const [value3, setValue3] = useState(null);
|
|
||||||
const [value4, setValue4] = useState<any[]>([]);
|
|
||||||
const [value5, setValue5] = useState('');
|
|
||||||
const [value6, setValue6] = useState('');
|
|
||||||
const [value7, setValue7] = useState(0);
|
|
||||||
const [value8, setValue8] = useState(null);
|
|
||||||
const [value9, setValue9] = useState(null);
|
|
||||||
const [value10, setValue10] = useState('');
|
|
||||||
|
|
||||||
const cities = [
|
|
||||||
{ name: 'New York', code: 'NY' },
|
|
||||||
{ name: 'Rome', code: 'RM' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Istanbul', code: 'IST' },
|
|
||||||
{ name: 'Paris', code: 'PRS' }
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
CountryService.getCountries().then((countries) => {
|
|
||||||
setCountries(countries);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const searchCountry = (event: AutoCompleteCompleteEvent) => {
|
|
||||||
// in a real application, make a request to a remote url with the query and
|
|
||||||
// return filtered results, for demo we filter at client side
|
|
||||||
const filtered = [];
|
|
||||||
const query = event.query;
|
|
||||||
for (let i = 0; i < countries.length; i++) {
|
|
||||||
const country = countries[i];
|
|
||||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {
|
|
||||||
filtered.push(country);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setFilteredCountries(filtered);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onCalendarChange = (e: any) => {
|
|
||||||
setValue3(e.value!);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h5>Invalid State</h5>
|
|
||||||
<div className="grid p-fluid">
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="field mt-3">
|
|
||||||
<label htmlFor="inputtext">InputText</label>
|
|
||||||
<InputText type="text" id="inputtext" value={value1} onChange={(e) => setValue1(e.target.value)} className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="autocomplete">AutoComplete</label>
|
|
||||||
<AutoComplete id="autocomplete" value={value2} onChange={(e) => setValue2(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name" className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="calendar">Calendar</label>
|
|
||||||
<Calendar inputId="calendar" value={value3} onChange={onCalendarChange} className="p-invalid" showIcon />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="chips">Chips</label>
|
|
||||||
<Chips inputId="chips" value={value4} onChange={(e) => setValue4(e.value ?? [])} className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="password">Password</label>
|
|
||||||
<Password inputId="password" value={value5} onChange={(e) => setValue5(e.target.value)} className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="field mt-3">
|
|
||||||
<label htmlFor="inputmask">InputMask</label>
|
|
||||||
<InputMask id="inputmask" mask="99/99/9999" value={value6} onChange={(e) => setValue6(e.value ?? '')} className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="inputnumber">InputNumber</label>
|
|
||||||
<InputNumber id="inputnumber" value={value7} onValueChange={(e) => setValue7(e.target.value ?? 0)} className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="dropdown">Dropdown</label>
|
|
||||||
<Dropdown id="dropdown" options={cities} value={value8} onChange={(e) => setValue8(e.value)} optionLabel="name" className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="multiselect">MultiSelect</label>
|
|
||||||
<MultiSelect id="multiselect" options={cities} value={value9} onChange={(e) => setValue9(e.value)} optionLabel="name" className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="textarea">Textarea</label>
|
|
||||||
<InputTextarea id="textarea" rows={3} cols={30} value={value10} onChange={(e) => setValue10(e.target.value)} className="p-invalid" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InvalidStateDemo;
|
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
|
|
||||||
import { Rating } from 'primereact/rating';
|
|
||||||
import { PickList } from 'primereact/picklist';
|
|
||||||
import { OrderList } from 'primereact/orderlist';
|
|
||||||
import { ProductService } from '../../../../demo/service/ProductService';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
|
|
||||||
const ListDemo = () => {
|
|
||||||
const listValue = [
|
|
||||||
{ name: 'San Francisco', code: 'SF' },
|
|
||||||
{ name: 'London', code: 'LDN' },
|
|
||||||
{ name: 'Paris', code: 'PRS' },
|
|
||||||
{ name: 'Istanbul', code: 'IST' },
|
|
||||||
{ name: 'Berlin', code: 'BRL' },
|
|
||||||
{ name: 'Barcelona', code: 'BRC' },
|
|
||||||
{ name: 'Rome', code: 'RM' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const [picklistSourceValue, setPicklistSourceValue] = useState(listValue);
|
|
||||||
const [picklistTargetValue, setPicklistTargetValue] = useState([]);
|
|
||||||
const [orderlistValue, setOrderlistValue] = useState(listValue);
|
|
||||||
const [dataViewValue, setDataViewValue] = useState<Demo.Product[]>([]);
|
|
||||||
const [globalFilterValue, setGlobalFilterValue] = useState('');
|
|
||||||
const [filteredValue, setFilteredValue] = useState<Demo.Product[] | null>(null);
|
|
||||||
const [layout, setLayout] = useState<'grid' | 'list' | (string & Record<string, unknown>)>('grid');
|
|
||||||
const [sortKey, setSortKey] = useState(null);
|
|
||||||
const [sortOrder, setSortOrder] = useState<0 | 1 | -1 | null>(null);
|
|
||||||
const [sortField, setSortField] = useState('');
|
|
||||||
|
|
||||||
const sortOptions = [
|
|
||||||
{ label: 'Price High to Low', value: '!price' },
|
|
||||||
{ label: 'Price Low to High', value: 'price' }
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
ProductService.getProducts().then((data) => setDataViewValue(data));
|
|
||||||
setGlobalFilterValue('');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
ProductService.getProducts().then((data) => setDataViewValue(data));
|
|
||||||
setGlobalFilterValue('');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
setGlobalFilterValue(value);
|
|
||||||
if (value.length === 0) {
|
|
||||||
setFilteredValue(null);
|
|
||||||
} else {
|
|
||||||
const filtered = dataViewValue?.filter((product) => {
|
|
||||||
const productNameLowercase = product.name.toLowerCase();
|
|
||||||
const searchValueLowercase = value.toLowerCase();
|
|
||||||
return productNameLowercase.includes(searchValueLowercase);
|
|
||||||
});
|
|
||||||
|
|
||||||
setFilteredValue(filtered);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSortChange = (event: DropdownChangeEvent) => {
|
|
||||||
const value = event.value;
|
|
||||||
|
|
||||||
if (value.indexOf('!') === 0) {
|
|
||||||
setSortOrder(-1);
|
|
||||||
setSortField(value.substring(1, value.length));
|
|
||||||
setSortKey(value);
|
|
||||||
} else {
|
|
||||||
setSortOrder(1);
|
|
||||||
setSortField(value);
|
|
||||||
setSortKey(value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataViewHeader = (
|
|
||||||
<div className="flex flex-column md:flex-row md:justify-content-between gap-2">
|
|
||||||
<Dropdown value={sortKey} options={sortOptions} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} />
|
|
||||||
<span className="p-input-icon-left">
|
|
||||||
<i className="pi pi-search" />
|
|
||||||
<InputText value={globalFilterValue} onChange={onFilter} placeholder="Search by Name" />
|
|
||||||
</span>
|
|
||||||
<DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const dataviewListItem = (data: Demo.Product) => {
|
|
||||||
return (
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="flex flex-column md:flex-row align-items-center p-3 w-full">
|
|
||||||
<img src={`/demo/images/product/${data.image}`} alt={data.name} className="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
|
||||||
<div className="flex-1 flex flex-column align-items-center text-center md:text-left">
|
|
||||||
<div className="font-bold text-2xl">{data.name}</div>
|
|
||||||
<div className="mb-2">{data.description}</div>
|
|
||||||
<Rating value={data.rating} readOnly cancel={false} className="mb-2"></Rating>
|
|
||||||
<div className="flex align-items-center">
|
|
||||||
<i className="pi pi-tag mr-2"></i>
|
|
||||||
<span className="font-semibold">{data.category}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
|
|
||||||
<span className="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${data.price}</span>
|
|
||||||
<Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} size="small" className="mb-2"></Button>
|
|
||||||
<span className={`product-badge status-${data.inventoryStatus?.toLowerCase()}`}>{data.inventoryStatus}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataviewGridItem = (data: Demo.Product) => {
|
|
||||||
return (
|
|
||||||
<div className="col-12 lg:col-4">
|
|
||||||
<div className="card m-3 border-1 surface-border">
|
|
||||||
<div className="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
|
|
||||||
<div className="flex align-items-center">
|
|
||||||
<i className="pi pi-tag mr-2" />
|
|
||||||
<span className="font-semibold">{data.category}</span>
|
|
||||||
</div>
|
|
||||||
<span className={`product-badge status-${data.inventoryStatus?.toLowerCase()}`}>{data.inventoryStatus}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-column align-items-center text-center mb-3">
|
|
||||||
<img src={`/demo/images/product/${data.image}`} alt={data.name} className="w-9 shadow-2 my-3 mx-0" />
|
|
||||||
<div className="text-2xl font-bold">{data.name}</div>
|
|
||||||
<div className="mb-3">{data.description}</div>
|
|
||||||
<Rating value={data.rating} readOnly cancel={false} />
|
|
||||||
</div>
|
|
||||||
<div className="flex align-items-center justify-content-between">
|
|
||||||
<span className="text-2xl font-semibold">${data.price}</span>
|
|
||||||
<Button icon="pi pi-shopping-cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemTemplate = (data: Demo.Product, layout: 'grid' | 'list' | (string & Record<string, unknown>)) => {
|
|
||||||
if (!data) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (layout === 'list') {
|
|
||||||
return dataviewListItem(data);
|
|
||||||
} else if (layout === 'grid') {
|
|
||||||
return dataviewGridItem(data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>DataView</h5>
|
|
||||||
<DataView value={filteredValue || dataViewValue} layout={layout} paginator rows={9} sortOrder={sortOrder} sortField={sortField} itemTemplate={itemTemplate} header={dataViewHeader}></DataView>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 xl:col-8">
|
|
||||||
<div className="card">
|
|
||||||
<h5>PickList</h5>
|
|
||||||
<PickList
|
|
||||||
source={picklistSourceValue}
|
|
||||||
target={picklistTargetValue}
|
|
||||||
sourceHeader="From"
|
|
||||||
targetHeader="To"
|
|
||||||
itemTemplate={(item) => <div>{item.name}</div>}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPicklistSourceValue(e.source);
|
|
||||||
setPicklistTargetValue(e.target);
|
|
||||||
}}
|
|
||||||
sourceStyle={{ height: '200px' }}
|
|
||||||
targetStyle={{ height: '200px' }}
|
|
||||||
></PickList>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 xl:col-4">
|
|
||||||
<div className="card">
|
|
||||||
<h5>OrderList</h5>
|
|
||||||
<OrderList value={orderlistValue} listStyle={{ height: '200px' }} className="p-orderlist-responsive" header="Cities" itemTemplate={(item) => <div>{item.name}</div>} onChange={(e) => setOrderlistValue(e.value)}></OrderList>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ListDemo;
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Carousel } from 'primereact/carousel';
|
|
||||||
import { Galleria } from 'primereact/galleria';
|
|
||||||
import { Image } from 'primereact/image';
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { PhotoService } from '../../../../demo/service/PhotoService';
|
|
||||||
import { ProductService } from '../../../../demo/service/ProductService';
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
|
|
||||||
const MediaDemo = () => {
|
|
||||||
const [products, setProducts] = useState<Demo.Product[]>([]);
|
|
||||||
const [images, setImages] = useState<Demo.Photo[]>([]);
|
|
||||||
|
|
||||||
const galleriaResponsiveOptions = [
|
|
||||||
{
|
|
||||||
breakpoint: '1024px',
|
|
||||||
numVisible: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: '960px',
|
|
||||||
numVisible: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: '768px',
|
|
||||||
numVisible: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: '560px',
|
|
||||||
numVisible: 1
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const carouselResponsiveOptions = [
|
|
||||||
{
|
|
||||||
breakpoint: '1024px',
|
|
||||||
numVisible: 3,
|
|
||||||
numScroll: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: '768px',
|
|
||||||
numVisible: 2,
|
|
||||||
numScroll: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: '560px',
|
|
||||||
numVisible: 1,
|
|
||||||
numScroll: 1
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
ProductService.getProductsSmall().then((products) => setProducts(products));
|
|
||||||
|
|
||||||
PhotoService.getImages().then((images) => setImages(images));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const carouselItemTemplate = (product: Demo.Product) => {
|
|
||||||
return (
|
|
||||||
<div className="border-1 surface-border border-round m-1 text-center py-5">
|
|
||||||
<div className="mb-3">
|
|
||||||
<img src={`/demo/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 className="p-mb-1">{product.name}</h4>
|
|
||||||
<h6 className="mt-0 mb-3">${product.price}</h6>
|
|
||||||
<span className={`product-badge status-${product.inventoryStatus?.toLowerCase()}`}>{product.inventoryStatus}</span>
|
|
||||||
<div className="car-buttons mt-5">
|
|
||||||
<Button type="button" rounded className=" mr-2" icon="pi pi-search"></Button>
|
|
||||||
<Button type="button" rounded severity="success" className="mr-2" icon="pi pi-star"></Button>
|
|
||||||
<Button type="button" rounded severity="help" icon="pi pi-cog"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const galleriaItemTemplate = (item: Demo.Photo) => <img src={`/${item.itemImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
|
|
||||||
const galleriaThumbnailTemplate = (item: Demo.Photo) => <img src={`/${item.thumbnailImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid p-fluid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Carousel</h5>
|
|
||||||
<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={carouselResponsiveOptions} itemTemplate={carouselItemTemplate}></Carousel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Image</h5>
|
|
||||||
<div className="flex justify-content-center">
|
|
||||||
<Image src={`/demo/images/galleria/galleria10.jpg`} alt="Image" width="250" preview />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Galleria</h5>
|
|
||||||
<Galleria value={images} responsiveOptions={galleriaResponsiveOptions} numVisible={7} circular style={{ maxWidth: '800px', margin: 'auto' }} item={galleriaItemTemplate} thumbnail={galleriaThumbnailTemplate}></Galleria>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MediaDemo;
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import Menu from '../page';
|
|
||||||
function ConfirmationDemo() {
|
|
||||||
return (
|
|
||||||
<Menu>
|
|
||||||
<div className="flex align-items-center py-5 px-3">
|
|
||||||
<i className="pi pi-fw pi-check mr-2 text-2xl" />
|
|
||||||
<p className="m-0 text-lg">Confirmation Component Content via Child Route</p>
|
|
||||||
</div>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ConfirmationDemo;
|
|
||||||
@@ -1,584 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
import { Menubar } from 'primereact/menubar';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { BreadCrumb } from 'primereact/breadcrumb';
|
|
||||||
import { Steps } from 'primereact/steps';
|
|
||||||
import { TabMenu } from 'primereact/tabmenu';
|
|
||||||
import { TieredMenu } from 'primereact/tieredmenu';
|
|
||||||
import { Menu } from 'primereact/menu';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { ContextMenu } from 'primereact/contextmenu';
|
|
||||||
import { MegaMenu } from 'primereact/megamenu';
|
|
||||||
import { PanelMenu } from 'primereact/panelmenu';
|
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { usePathname } from 'next/navigation';
|
|
||||||
|
|
||||||
const MenuDemo = ({ children }: any) => {
|
|
||||||
const [activeIndex, setActiveIndex] = useState(0);
|
|
||||||
const menu = useRef<Menu>(null);
|
|
||||||
const contextMenu = useRef<ContextMenu>(null);
|
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
|
||||||
|
|
||||||
const checkActiveIndex = useCallback(() => {
|
|
||||||
const paths = pathname.split('/');
|
|
||||||
const currentPath = paths[paths.length - 1];
|
|
||||||
|
|
||||||
switch (currentPath) {
|
|
||||||
case 'seat':
|
|
||||||
setActiveIndex(1);
|
|
||||||
break;
|
|
||||||
case 'payment':
|
|
||||||
setActiveIndex(2);
|
|
||||||
break;
|
|
||||||
case 'confirmation':
|
|
||||||
setActiveIndex(3);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}, [pathname]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
checkActiveIndex();
|
|
||||||
}, [checkActiveIndex]);
|
|
||||||
|
|
||||||
const nestedMenuitems = [
|
|
||||||
{
|
|
||||||
label: 'Customers',
|
|
||||||
icon: 'pi pi-fw pi-table',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'New',
|
|
||||||
icon: 'pi pi-fw pi-user-plus',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Customer',
|
|
||||||
icon: 'pi pi-fw pi-plus'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Duplicate',
|
|
||||||
icon: 'pi pi-fw pi-copy'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Edit',
|
|
||||||
icon: 'pi pi-fw pi-user-edit'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Orders',
|
|
||||||
icon: 'pi pi-fw pi-shopping-cart',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'View',
|
|
||||||
icon: 'pi pi-fw pi-list'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Search',
|
|
||||||
icon: 'pi pi-fw pi-search'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Shipments',
|
|
||||||
icon: 'pi pi-fw pi-envelope',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Tracker',
|
|
||||||
icon: 'pi pi-fw pi-compass'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Map',
|
|
||||||
icon: 'pi pi-fw pi-map-marker'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Manage',
|
|
||||||
icon: 'pi pi-fw pi-pencil'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Profile',
|
|
||||||
icon: 'pi pi-fw pi-user',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
icon: 'pi pi-fw pi-cog'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Billing',
|
|
||||||
icon: 'pi pi-fw pi-file'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Quit',
|
|
||||||
icon: 'pi pi-fw pi-sign-out'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const breadcrumbHome = { icon: 'pi pi-home', to: '/' };
|
|
||||||
const breadcrumbItems = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
|
|
||||||
|
|
||||||
const wizardItems = [
|
|
||||||
{ label: 'Personal', command: () => router.push('/uikit/menu') },
|
|
||||||
{ label: 'Seat', command: () => router.push('/uikit/menu/seat') },
|
|
||||||
{ label: 'Payment', command: () => router.push('/uikit/menu/payment') },
|
|
||||||
{
|
|
||||||
label: 'Confirmation',
|
|
||||||
command: () => router.push('/uikit/menu/confirmation')
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const tieredMenuItems = [
|
|
||||||
{
|
|
||||||
label: 'Customers',
|
|
||||||
icon: 'pi pi-fw pi-table',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'New',
|
|
||||||
icon: 'pi pi-fw pi-user-plus',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Customer',
|
|
||||||
icon: 'pi pi-fw pi-plus'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Duplicate',
|
|
||||||
icon: 'pi pi-fw pi-copy'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Edit',
|
|
||||||
icon: 'pi pi-fw pi-user-edit'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Orders',
|
|
||||||
icon: 'pi pi-fw pi-shopping-cart',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'View',
|
|
||||||
icon: 'pi pi-fw pi-list'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Search',
|
|
||||||
icon: 'pi pi-fw pi-search'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Shipments',
|
|
||||||
icon: 'pi pi-fw pi-envelope',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Tracker',
|
|
||||||
icon: 'pi pi-fw pi-compass'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Map',
|
|
||||||
icon: 'pi pi-fw pi-map-marker'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Manage',
|
|
||||||
icon: 'pi pi-fw pi-pencil'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Profile',
|
|
||||||
icon: 'pi pi-fw pi-user',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
icon: 'pi pi-fw pi-cog'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Billing',
|
|
||||||
icon: 'pi pi-fw pi-file'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
separator: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Quit',
|
|
||||||
icon: 'pi pi-fw pi-sign-out'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const overlayMenuItems = [
|
|
||||||
{
|
|
||||||
label: 'Save',
|
|
||||||
icon: 'pi pi-save'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Update',
|
|
||||||
icon: 'pi pi-refresh'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Delete',
|
|
||||||
icon: 'pi pi-trash'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
separator: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Home',
|
|
||||||
icon: 'pi pi-home'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const menuitems = [
|
|
||||||
{
|
|
||||||
label: 'Customers',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'New',
|
|
||||||
icon: 'pi pi-fw pi-plus'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Edit',
|
|
||||||
icon: 'pi pi-fw pi-user-edit'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Orders',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'View',
|
|
||||||
icon: 'pi pi-fw pi-list'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Search',
|
|
||||||
icon: 'pi pi-fw pi-search'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const contextMenuItems = [
|
|
||||||
{
|
|
||||||
label: 'Save',
|
|
||||||
icon: 'pi pi-save'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Update',
|
|
||||||
icon: 'pi pi-refresh'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Delete',
|
|
||||||
icon: 'pi pi-trash'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
separator: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Options',
|
|
||||||
icon: 'pi pi-cog'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const megamenuItems = [
|
|
||||||
{
|
|
||||||
label: 'Fashion',
|
|
||||||
icon: 'pi pi-fw pi-tag',
|
|
||||||
items: [
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Woman',
|
|
||||||
items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Men',
|
|
||||||
items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Kids',
|
|
||||||
items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Luggage',
|
|
||||||
items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Electronics',
|
|
||||||
icon: 'pi pi-fw pi-desktop',
|
|
||||||
items: [
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Computer',
|
|
||||||
items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Camcorder',
|
|
||||||
items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'TV',
|
|
||||||
items: [{ label: 'TV Item' }, { label: 'TV Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Audio',
|
|
||||||
items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Sports.7',
|
|
||||||
items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Furniture',
|
|
||||||
icon: 'pi pi-fw pi-image',
|
|
||||||
items: [
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Living Room',
|
|
||||||
items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Kitchen',
|
|
||||||
items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Bedroom',
|
|
||||||
items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Outdoor',
|
|
||||||
items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Sports',
|
|
||||||
icon: 'pi pi-fw pi-star',
|
|
||||||
items: [
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Basketball',
|
|
||||||
items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Football',
|
|
||||||
items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: 'Tennis',
|
|
||||||
items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const panelMenuitems = [
|
|
||||||
{
|
|
||||||
label: 'Customers',
|
|
||||||
icon: 'pi pi-fw pi-table',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'New',
|
|
||||||
icon: 'pi pi-fw pi-user-plus',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Customer',
|
|
||||||
icon: 'pi pi-fw pi-plus'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Duplicate',
|
|
||||||
icon: 'pi pi-fw pi-copy'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Edit',
|
|
||||||
icon: 'pi pi-fw pi-user-edit'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Orders',
|
|
||||||
icon: 'pi pi-fw pi-shopping-cart',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'View',
|
|
||||||
icon: 'pi pi-fw pi-list'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Search',
|
|
||||||
icon: 'pi pi-fw pi-search'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Shipments',
|
|
||||||
icon: 'pi pi-fw pi-envelope',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Tracker',
|
|
||||||
icon: 'pi pi-fw pi-compass'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Map',
|
|
||||||
icon: 'pi pi-fw pi-map-marker'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Manage',
|
|
||||||
icon: 'pi pi-fw pi-pencil'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Profile',
|
|
||||||
icon: 'pi pi-fw pi-user',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Settings',
|
|
||||||
icon: 'pi pi-fw pi-cog'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Billing',
|
|
||||||
icon: 'pi pi-fw pi-file'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const toggleMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
||||||
menu.current?.toggle(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onContextRightClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
contextMenu.current?.show(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const menubarEndTemplate = () => {
|
|
||||||
return (
|
|
||||||
<span className="p-input-icon-left">
|
|
||||||
<i className="pi pi-search" />
|
|
||||||
<InputText type="text" placeholder="Search" />
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid p-fluid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Menubar</h5>
|
|
||||||
<Menubar model={nestedMenuitems} end={menubarEndTemplate}></Menubar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Breadcrumb</h5>
|
|
||||||
<BreadCrumb home={breadcrumbHome} model={breadcrumbItems} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Steps</h5>
|
|
||||||
<Steps model={wizardItems} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
|
|
||||||
{pathname === '/uikit/menu' ? (
|
|
||||||
<div className="flex align-items-center py-5 px-3">
|
|
||||||
<i className="pi pi-fw pi-user mr-2 text-2xl" />
|
|
||||||
<p className="m-0 text-lg">Personal Component Content via Child Route</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>{children}</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>TabMenu</h5>
|
|
||||||
<TabMenu model={wizardItems} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
|
|
||||||
{pathname === '/uikit/menu' ? (
|
|
||||||
<div className="flex align-items-center py-5 px-3">
|
|
||||||
<i className="pi pi-fw pi-user mr-2 text-2xl" />
|
|
||||||
<p className="m-0 text-lg">Personal Component Content via Child Route</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>{children}</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Tiered Menu</h5>
|
|
||||||
<TieredMenu model={tieredMenuItems} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Plain Menu</h5>
|
|
||||||
<Menu model={menuitems} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-4">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Overlay Menu</h5>
|
|
||||||
|
|
||||||
<Menu ref={menu} model={overlayMenuItems} popup />
|
|
||||||
<Button type="button" label="Options" icon="pi pi-angle-down" onClick={toggleMenu} style={{ width: 'auto' }} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card" onContextMenu={onContextRightClick}>
|
|
||||||
<h5>ContextMenu</h5>
|
|
||||||
Right click to display.
|
|
||||||
<ContextMenu ref={contextMenu} model={contextMenuItems} breakpoint="767px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>MegaMenu - Horizontal</h5>
|
|
||||||
<MegaMenu model={megamenuItems} breakpoint="767px" />
|
|
||||||
|
|
||||||
<h5 style={{ marginTop: '1.55em' }}>MegaMenu - Vertical</h5>
|
|
||||||
<MegaMenu model={megamenuItems} orientation="vertical" breakpoint="767px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>PanelMenu</h5>
|
|
||||||
<PanelMenu model={panelMenuitems} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MenuDemo;
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import React from 'react';
|
|
||||||
import Menu from '../page';
|
|
||||||
function PaymentDemo() {
|
|
||||||
return (
|
|
||||||
<Menu>
|
|
||||||
<div className="flex align-items-center py-5 px-3">
|
|
||||||
<i className="pi pi-fw pi-money-bill mr-2 text-2xl" />
|
|
||||||
<p className="m-0 text-lg">Payment Component Content via Child Route</p>
|
|
||||||
</div>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PaymentDemo;
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import Menu from '../page';
|
|
||||||
function SeatDemo() {
|
|
||||||
return (
|
|
||||||
<Menu>
|
|
||||||
<div className="flex align-items-center py-5 px-3">
|
|
||||||
<i className="pi pi-fw pi-ticket mr-2 text-2xl" />
|
|
||||||
<p className="m-0 text-lg">Seat Component Content via Child Route</p>
|
|
||||||
</div>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SeatDemo;
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import React, { useRef, useState } from 'react';
|
|
||||||
import { Toast } from 'primereact/toast';
|
|
||||||
import { Messages } from 'primereact/messages';
|
|
||||||
import { Message } from 'primereact/message';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
|
|
||||||
const MessagesDemo = () => {
|
|
||||||
const [username, setUsername] = useState('');
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const toast = useRef<Toast>(null);
|
|
||||||
const message = useRef<Messages>(null);
|
|
||||||
|
|
||||||
const addSuccessMessage = () => {
|
|
||||||
message.current?.show({ severity: 'success', content: 'Message Detail' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const addInfoMessage = () => {
|
|
||||||
message.current?.show({ severity: 'info', content: 'Message Detail' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const addWarnMessage = () => {
|
|
||||||
message.current?.show({ severity: 'warn', content: 'Message Detail' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const addErrorMessage = () => {
|
|
||||||
message.current?.show({ severity: 'error', content: 'Message Detail' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const showSuccess = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'success',
|
|
||||||
summary: 'Success Message',
|
|
||||||
detail: 'Message Detail',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const showInfo = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'info',
|
|
||||||
summary: 'Info Message',
|
|
||||||
detail: 'Message Detail',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const showWarn = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'warn',
|
|
||||||
summary: 'Warn Message',
|
|
||||||
detail: 'Message Detail',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const showError = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'error',
|
|
||||||
summary: 'Error Message',
|
|
||||||
detail: 'Message Detail',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Toast</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Toast ref={toast} />
|
|
||||||
<Button type="button" onClick={showSuccess} label="Success" severity="success" />
|
|
||||||
<Button type="button" onClick={showInfo} label="Info" severity="info" />
|
|
||||||
<Button type="button" onClick={showWarn} label="Warn" severity="warning" />
|
|
||||||
<Button type="button" onClick={showError} label="Error" severity="danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Messages</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button label="Success" type="button" onClick={addSuccessMessage} severity="success" />
|
|
||||||
<Button label="Info" type="button" onClick={addInfoMessage} severity="info" />
|
|
||||||
<Button label="Warn" type="button" onClick={addWarnMessage} severity="warning" />
|
|
||||||
<Button label="Error" type="button" onClick={addErrorMessage} severity="danger" />
|
|
||||||
</div>
|
|
||||||
<Messages ref={message} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 lg:col-8">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Inline</h5>
|
|
||||||
<div className="flex align-items-center flex-wrap gap-2 mb-3">
|
|
||||||
<label htmlFor="username1" className="col-fixed w-9rem">
|
|
||||||
Username
|
|
||||||
</label>
|
|
||||||
<InputText id="username1" value={username} onChange={(e) => setUsername(e.target.value)} required className="p-invalid" />
|
|
||||||
<Message severity="error" text="Username is required" />
|
|
||||||
</div>
|
|
||||||
<div className="flex align-items-center flex-wrap gap-2">
|
|
||||||
<label htmlFor="email" className="col-fixed w-9rem">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<InputText id="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="p-invalid" />
|
|
||||||
<Message severity="error" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 lg:col-4">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Help Text</h5>
|
|
||||||
<div className="field p-fluid">
|
|
||||||
<label htmlFor="username2">Username</label>
|
|
||||||
<InputText id="username2" type="text" className="p-invalid" aria-describedby="username-help" />
|
|
||||||
<small id="username-help" className="p-error">
|
|
||||||
Enter your username to reset your password.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MessagesDemo;
|
|
||||||
@@ -1,220 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
|
||||||
import { ProgressBar } from 'primereact/progressbar';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Badge } from 'primereact/badge';
|
|
||||||
import { Tag } from 'primereact/tag';
|
|
||||||
import { Avatar } from 'primereact/avatar';
|
|
||||||
import { AvatarGroup } from 'primereact/avatargroup';
|
|
||||||
import { Chip } from 'primereact/chip';
|
|
||||||
import { Skeleton } from 'primereact/skeleton';
|
|
||||||
import { ScrollPanel } from 'primereact/scrollpanel';
|
|
||||||
import { ScrollTop } from 'primereact/scrolltop';
|
|
||||||
|
|
||||||
const MiscDemo = () => {
|
|
||||||
const [value, setValue] = useState(0);
|
|
||||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setValue((prevValue) => {
|
|
||||||
const newVal = prevValue + Math.floor(Math.random() * 10) + 1;
|
|
||||||
return newVal >= 100 ? 100 : newVal;
|
|
||||||
});
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
intervalRef.current = interval;
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearInterval(intervalRef.current as NodeJS.Timeout);
|
|
||||||
intervalRef.current = null;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>ProgressBar</h5>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col">
|
|
||||||
<ProgressBar value={value} />
|
|
||||||
</div>
|
|
||||||
<div className="col">
|
|
||||||
<ProgressBar value="50" showValue={false} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h4>Badge</h4>
|
|
||||||
<h5>Numbers</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Badge value="2"></Badge>
|
|
||||||
<Badge value="8" severity="success"></Badge>
|
|
||||||
<Badge value="4" severity="info"></Badge>
|
|
||||||
<Badge value="12" severity="warning"></Badge>
|
|
||||||
<Badge value="3" severity="danger"></Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Positioned Badge</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<i className="pi pi-bell mr-4 p-text-secondary p-overlay-badge" style={{ fontSize: '2rem' }}>
|
|
||||||
<Badge value="2"></Badge>
|
|
||||||
</i>
|
|
||||||
<i className="pi pi-calendar mr-4 p-text-secondary p-overlay-badge" style={{ fontSize: '2rem' }}>
|
|
||||||
<Badge value="10+" severity="danger"></Badge>
|
|
||||||
</i>
|
|
||||||
<i className="pi pi-envelope p-text-secondary p-overlay-badge" style={{ fontSize: '2rem' }}>
|
|
||||||
<Badge severity="danger"></Badge>
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Button Badge</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button type="button" label="Emails">
|
|
||||||
<Badge value="8"></Badge>
|
|
||||||
</Button>
|
|
||||||
<Button type="button" label="Messages" icon="pi pi-users" severity="warning">
|
|
||||||
<Badge value="8" severity="danger"></Badge>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<h5>Sizes</h5>
|
|
||||||
<div className="flex flex-wrap gap-2 align-items-end">
|
|
||||||
<Badge value="2"></Badge>
|
|
||||||
<Badge value="4" size="large" severity="warning"></Badge>
|
|
||||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h4>Avatar</h4>
|
|
||||||
<h5>Avatar Group</h5>
|
|
||||||
<AvatarGroup className="mb-3">
|
|
||||||
<Avatar image={`/demo/images/avatar/amyelsner.png`} size="large" shape="circle"></Avatar>
|
|
||||||
<Avatar image={`/demo/images/avatar/asiyajavayant.png`} size="large" shape="circle"></Avatar>
|
|
||||||
<Avatar image={`/demo/images/avatar/onyamalimba.png`} size="large" shape="circle"></Avatar>
|
|
||||||
<Avatar image={`/demo/images/avatar/ionibowcher.png`} size="large" shape="circle"></Avatar>
|
|
||||||
<Avatar image={`/demo/images/avatar/xuxuefeng.png`} size="large" shape="circle"></Avatar>
|
|
||||||
<Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }}></Avatar>
|
|
||||||
</AvatarGroup>
|
|
||||||
|
|
||||||
<h5>Label - Circle</h5>
|
|
||||||
<div className="flex flex-wrap gap-2 align-items-end">
|
|
||||||
<Avatar label="P" size="xlarge" shape="circle"></Avatar>
|
|
||||||
<Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle"></Avatar>
|
|
||||||
<Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle"></Avatar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Icon - Badge</h5>
|
|
||||||
<Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
|
|
||||||
<Badge value="4" />
|
|
||||||
</Avatar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h4>ScrollTop</h4>
|
|
||||||
<ScrollPanel style={{ width: '250px', height: '200px' }}>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet
|
|
||||||
consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus
|
|
||||||
orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut
|
|
||||||
etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
|
||||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
|
|
||||||
</p>
|
|
||||||
<ScrollTop target="parent" className="custom-scrolltop" threshold={100} icon="pi pi-arrow-up"></ScrollTop>
|
|
||||||
</ScrollPanel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h4>Tag</h4>
|
|
||||||
<h5>Tags</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Tag value="Primary"></Tag>
|
|
||||||
<Tag severity="success" value="Success"></Tag>
|
|
||||||
<Tag severity="info" value="Info"></Tag>
|
|
||||||
<Tag severity="warning" value="Warning"></Tag>
|
|
||||||
<Tag severity="danger" value="Danger"></Tag>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Pills</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Tag value="Primary" rounded></Tag>
|
|
||||||
<Tag severity="success" value="Success" rounded></Tag>
|
|
||||||
<Tag severity="info" value="Info" rounded></Tag>
|
|
||||||
<Tag severity="warning" value="Warning" rounded></Tag>
|
|
||||||
<Tag severity="danger" value="Danger" rounded></Tag>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Icons</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Tag icon="pi pi-user" value="Primary"></Tag>
|
|
||||||
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
|
|
||||||
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
|
|
||||||
<Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
|
|
||||||
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h4>Chip</h4>
|
|
||||||
<h5>Basic</h5>
|
|
||||||
<div className="flex flex-wrap align-items-center gap-2">
|
|
||||||
<Chip label="Action" />
|
|
||||||
<Chip label="Comedy" />
|
|
||||||
<Chip label="Mystery" />
|
|
||||||
<Chip label="Thriller" removable />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Icon</h5>
|
|
||||||
<div className="flex align-items-center flex-wrap gap-1">
|
|
||||||
<Chip label="Apple" icon="pi pi-apple" />
|
|
||||||
<Chip label="Facebook" icon="pi pi-facebook" />
|
|
||||||
<Chip label="Google" icon="pi pi-google" />
|
|
||||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Image</h5>
|
|
||||||
<div className="flex align-items-center flex-wrap gap-1">
|
|
||||||
<Chip label="Amy Elsner" image={`/demo/images/avatar/amyelsner.png`} />
|
|
||||||
<Chip label="Asiya Javayant" image={`/demo/images/avatar/asiyajavayant.png`} />
|
|
||||||
<Chip label="Onyama Limba" image={`/demo/images/avatar/onyamalimba.png`} />
|
|
||||||
<Chip label="Xuxue Feng" image={`/demo/images/avatar/xuxuefeng.png`} removable />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Styling</h5>
|
|
||||||
<div className="flex align-items-center flex-wrap gap-1 custom-chip">
|
|
||||||
<Chip label="Action" />
|
|
||||||
<Chip label="Apple" icon="pi pi-apple" />
|
|
||||||
<Chip label="Onyama Limba" image={`/demo/images/avatar/onyamalimba.png`} />
|
|
||||||
<Chip label="Xuxue Feng" image={`/demo/images/avatar/xuxuefeng.png`} removable />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h4>Skeleton</h4>
|
|
||||||
<div className="border-round border-1 surface-border p-4">
|
|
||||||
<div className="flex mb-3">
|
|
||||||
<Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
|
|
||||||
<div>
|
|
||||||
<Skeleton width="10rem" className="mb-2"></Skeleton>
|
|
||||||
<Skeleton width="5rem" className="mb-2"></Skeleton>
|
|
||||||
<Skeleton height=".5rem"></Skeleton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Skeleton width="100%" height="150px"></Skeleton>
|
|
||||||
<div className="flex justify-content-between mt-3">
|
|
||||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
|
||||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MiscDemo;
|
|
||||||
@@ -1,222 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Column } from 'primereact/column';
|
|
||||||
import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
|
|
||||||
import { DataTable, DataTableSelectEvent } from 'primereact/datatable';
|
|
||||||
import { Dialog } from 'primereact/dialog';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { OverlayPanel } from 'primereact/overlaypanel';
|
|
||||||
import { Sidebar } from 'primereact/sidebar';
|
|
||||||
import { Toast } from 'primereact/toast';
|
|
||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import { ProductService } from '../../../../demo/service/ProductService';
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
|
|
||||||
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;
|
|
||||||
const OverlayDemo = () => {
|
|
||||||
const [displayBasic, setDisplayBasic] = useState(false);
|
|
||||||
const [displayConfirmation, setDisplayConfirmation] = useState(false);
|
|
||||||
const [visibleLeft, setVisibleLeft] = useState(false);
|
|
||||||
const [visibleRight, setVisibleRight] = useState(false);
|
|
||||||
const [visibleTop, setVisibleTop] = useState(false);
|
|
||||||
const [visibleBottom, setVisibleBottom] = useState(false);
|
|
||||||
const [visibleFullScreen, setVisibleFullScreen] = useState(false);
|
|
||||||
const [products, setProducts] = useState<Demo.Product[]>([]);
|
|
||||||
const [selectedProduct, setSelectedProduct] = useState<Demo.Product | null>(null);
|
|
||||||
const op = useRef<OverlayPanel>(null);
|
|
||||||
const op2 = useRef<OverlayPanel>(null);
|
|
||||||
const toast = useRef<Toast>(null);
|
|
||||||
|
|
||||||
const accept = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'info',
|
|
||||||
summary: 'Confirmed',
|
|
||||||
detail: 'You have accepted',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const reject = () => {
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'error',
|
|
||||||
summary: 'Rejected',
|
|
||||||
detail: 'You have rejected',
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const confirm = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
||||||
confirmPopup({
|
|
||||||
target: event.currentTarget,
|
|
||||||
message: 'Are you sure you want to proceed?',
|
|
||||||
icon: 'pi pi-exclamation-triangle',
|
|
||||||
accept,
|
|
||||||
reject
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
ProductService.getProductsSmall().then((data) => setProducts(data));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const toggle = (event: ButtonEvent) => {
|
|
||||||
op.current?.toggle(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleDataTable = (event: ButtonEvent) => {
|
|
||||||
op2.current?.toggle(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatCurrency = (value: number) => {
|
|
||||||
return value.toLocaleString('en-US', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'USD'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onProductSelect = (event: DataTableSelectEvent) => {
|
|
||||||
op2.current?.hide();
|
|
||||||
toast.current?.show({
|
|
||||||
severity: 'info',
|
|
||||||
summary: 'Product Selected',
|
|
||||||
detail: event.data.name,
|
|
||||||
life: 3000
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSelectionChange = (e: any): void => {
|
|
||||||
setSelectedProduct(e.value as Demo.Product);
|
|
||||||
};
|
|
||||||
|
|
||||||
const basicDialogFooter = <Button type="button" label="OK" onClick={() => setDisplayBasic(false)} icon="pi pi-check" outlined />;
|
|
||||||
const imageBodyTemplate = (data: Demo.Product) => (
|
|
||||||
<img
|
|
||||||
src={`/demo/images/product/${data.image}`}
|
|
||||||
alt={data.image}
|
|
||||||
className="product-image"
|
|
||||||
width="60"
|
|
||||||
style={{
|
|
||||||
boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
const priceBodyTemplate = (data: Demo.Product) => formatCurrency((data.price as number) ?? 0);
|
|
||||||
const confirmationDialogFooter = (
|
|
||||||
<>
|
|
||||||
<Button type="button" label="No" icon="pi pi-times" onClick={() => setDisplayConfirmation(false)} text />
|
|
||||||
<Button type="button" label="Yes" icon="pi pi-check" onClick={() => setDisplayConfirmation(false)} text autoFocus />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Toast ref={toast} />
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Dialog</h5>
|
|
||||||
<Dialog header="Dialog" visible={displayBasic} style={{ width: '30vw' }} modal footer={basicDialogFooter} onHide={() => setDisplayBasic(false)}>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
||||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
|
||||||
id est laborum.
|
|
||||||
</p>
|
|
||||||
</Dialog>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<Button outlined type="button" label="Show" icon="pi pi-external-link" onClick={() => setDisplayBasic(true)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<h5>Overlay Panel</h5>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<div>
|
|
||||||
<Button type="button" label="Image" onClick={toggle} severity="success" />
|
|
||||||
<OverlayPanel ref={op} appendTo={typeof window !== 'undefined' ? document.body : null} showCloseIcon>
|
|
||||||
<img src="/demo/images/nature/nature9.jpg" alt="nature1" />
|
|
||||||
</OverlayPanel>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button type="button" label="DataTable" onClick={toggleDataTable} severity="success" />
|
|
||||||
<OverlayPanel ref={op2} appendTo={typeof window !== 'undefined' ? document.body : null} showCloseIcon id="overlay_panel" style={{ width: '450px' }}>
|
|
||||||
<DataTable value={products} selection={selectedProduct || undefined} onSelectionChange={onSelectionChange} selectionMode="single" responsiveLayout="scroll" paginator rows={5} onRowSelect={onProductSelect}>
|
|
||||||
<Column field="name" header="Name" sortable headerStyle={{ minWidth: '10rem' }} />
|
|
||||||
<Column header="Image" body={imageBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
|
|
||||||
<Column field="price" header="Price" body={priceBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
|
|
||||||
</DataTable>
|
|
||||||
</OverlayPanel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Confirmation</h5>
|
|
||||||
<Button label="Delete" icon="pi pi-trash" severity="danger" onClick={() => setDisplayConfirmation(true)} />
|
|
||||||
<Dialog header="Confirmation" visible={displayConfirmation} onHide={() => setDisplayConfirmation(false)} style={{ width: '350px' }} modal footer={confirmationDialogFooter}>
|
|
||||||
<div className="flex align-items-center justify-content-center">
|
|
||||||
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
|
||||||
<span>Are you sure you want to proceed?</span>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<h5>Sidebar</h5>
|
|
||||||
<Sidebar visible={visibleLeft} onHide={() => setVisibleLeft(false)} baseZIndex={1000}>
|
|
||||||
<h1 style={{ fontWeight: 'normal' }}>Left Sidebar</h1>
|
|
||||||
</Sidebar>
|
|
||||||
|
|
||||||
<Sidebar visible={visibleRight} onHide={() => setVisibleRight(false)} baseZIndex={1000} position="right">
|
|
||||||
<h1 style={{ fontWeight: 'normal' }}>Right Sidebar</h1>
|
|
||||||
</Sidebar>
|
|
||||||
|
|
||||||
<Sidebar visible={visibleTop} onHide={() => setVisibleTop(false)} baseZIndex={1000} position="top">
|
|
||||||
<h1 style={{ fontWeight: 'normal' }}>Top Sidebar</h1>
|
|
||||||
</Sidebar>
|
|
||||||
|
|
||||||
<Sidebar visible={visibleBottom} onHide={() => setVisibleBottom(false)} baseZIndex={1000} position="bottom">
|
|
||||||
<h1 style={{ fontWeight: 'normal' }}>Bottom Sidebar</h1>
|
|
||||||
</Sidebar>
|
|
||||||
|
|
||||||
<Sidebar visible={visibleFullScreen} onHide={() => setVisibleFullScreen(false)} baseZIndex={1000} fullScreen>
|
|
||||||
<h1 style={{ fontWeight: 'normal' }}>Full Screen</h1>
|
|
||||||
</Sidebar>
|
|
||||||
|
|
||||||
<Button type="button" icon="pi pi-arrow-right" severity="warning" onClick={() => setVisibleLeft(true)} style={{ marginRight: '.25em' }} />
|
|
||||||
<Button type="button" icon="pi pi-arrow-left" severity="warning" onClick={() => setVisibleRight(true)} style={{ marginRight: '.25em' }} />
|
|
||||||
<Button type="button" icon="pi pi-arrow-down" severity="warning" onClick={() => setVisibleTop(true)} style={{ marginRight: '.25em' }} />
|
|
||||||
<Button type="button" icon="pi pi-arrow-up" severity="warning" onClick={() => setVisibleBottom(true)} style={{ marginRight: '.25em' }} />
|
|
||||||
<Button type="button" icon="pi pi-external-link" severity="warning" onClick={() => setVisibleFullScreen(true)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Tooltip</h5>
|
|
||||||
<div className="flex align-items-center gap-2">
|
|
||||||
<span>
|
|
||||||
<InputText type="text" placeholder="Username" tooltip="Your username" />
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<Button type="button" label="Save" icon="pi pi-check" tooltip="Click to proceed" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 lg:col-6">
|
|
||||||
<Toast ref={toast} />
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<h5>ConfirmPopup</h5>
|
|
||||||
<ConfirmPopup />
|
|
||||||
<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OverlayDemo;
|
|
||||||
@@ -1,233 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useRef } from 'react';
|
|
||||||
import { Toolbar } from 'primereact/toolbar';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { SplitButton } from 'primereact/splitbutton';
|
|
||||||
import { Accordion, AccordionTab } from 'primereact/accordion';
|
|
||||||
import { TabView, TabPanel } from 'primereact/tabview';
|
|
||||||
import { Panel } from 'primereact/panel';
|
|
||||||
import { Fieldset } from 'primereact/fieldset';
|
|
||||||
import { Card } from 'primereact/card';
|
|
||||||
import { Divider } from 'primereact/divider';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { Splitter, SplitterPanel } from 'primereact/splitter';
|
|
||||||
import { Menu } from 'primereact/menu';
|
|
||||||
|
|
||||||
const PanelDemo = () => {
|
|
||||||
const menu1 = useRef<Menu>(null);
|
|
||||||
const toolbarItems = [
|
|
||||||
{
|
|
||||||
label: 'Save',
|
|
||||||
icon: 'pi pi-check'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Update',
|
|
||||||
icon: 'pi pi-sync'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Delete',
|
|
||||||
icon: 'pi pi-trash'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Home Page',
|
|
||||||
icon: 'pi pi-home'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const toolbarLeftTemplate = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button label="New" icon="pi pi-plus" style={{ marginRight: '.5em' }} />
|
|
||||||
<Button label="Open" icon="pi pi-folder-open" severity="secondary" />
|
|
||||||
|
|
||||||
<i className="pi pi-bars p-toolbar-separator" style={{ marginRight: '.5em' }}></i>
|
|
||||||
|
|
||||||
<Button icon="pi pi-check" severity="success" style={{ marginRight: '.5em' }} />
|
|
||||||
<Button icon="pi pi-trash" severity="warning" style={{ marginRight: '.5em' }} />
|
|
||||||
<Button icon="pi pi-print" severity="danger" />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const toolbarRightTemplate = <SplitButton label="Options" icon="pi pi-check" model={toolbarItems} menuStyle={{ width: '12rem' }}></SplitButton>;
|
|
||||||
const cardHeader = (
|
|
||||||
<div className="flex align-items-center justify-content-between mb-0 p-3 pb-0">
|
|
||||||
<h5 className="m-0">Card</h5>
|
|
||||||
<Button icon="pi pi-plus" text onClick={(event) => menu1.current?.toggle(event)} />
|
|
||||||
<Menu
|
|
||||||
ref={menu1}
|
|
||||||
popup
|
|
||||||
model={[
|
|
||||||
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
|
|
||||||
{ label: 'Remove', icon: 'pi pi-fw pi-minus' },
|
|
||||||
{ label: 'Update', icon: 'pi pi-fw pi-sync' }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Toolbar</h5>
|
|
||||||
<Toolbar left={toolbarLeftTemplate} right={toolbarRightTemplate}></Toolbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>AccordionPanel</h5>
|
|
||||||
<Accordion activeIndex={0}>
|
|
||||||
<AccordionTab header="Header I">
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
||||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
|
||||||
id est laborum.
|
|
||||||
</p>
|
|
||||||
</AccordionTab>
|
|
||||||
<AccordionTab header="Header II">
|
|
||||||
<p>
|
|
||||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
|
||||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
|
||||||
</p>
|
|
||||||
</AccordionTab>
|
|
||||||
<AccordionTab header="Header III">
|
|
||||||
<p>
|
|
||||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
|
||||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
|
||||||
minus.
|
|
||||||
</p>
|
|
||||||
</AccordionTab>
|
|
||||||
</Accordion>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<h5>TabView</h5>
|
|
||||||
<TabView>
|
|
||||||
<TabPanel header="Header I">
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
||||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
|
||||||
id est laborum.
|
|
||||||
</p>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel header="Header II">
|
|
||||||
<p>
|
|
||||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
|
||||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
|
||||||
</p>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel header="Header III">
|
|
||||||
<p>
|
|
||||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
|
||||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
|
||||||
minus.
|
|
||||||
</p>
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 md:col-6">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Panel</h5>
|
|
||||||
<Panel header="Header" toggleable>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
||||||
laborum.
|
|
||||||
</p>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<h5>Fieldset</h5>
|
|
||||||
<Fieldset legend="Legend" toggleable>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
||||||
laborum.
|
|
||||||
</p>
|
|
||||||
</Fieldset>
|
|
||||||
</div>
|
|
||||||
<Card header={cardHeader}>
|
|
||||||
<p className="line-height-3 m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Divider</h5>
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-5 flex align-items-center justify-content-center">
|
|
||||||
<div className="p-fluid">
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="username">Username</label>
|
|
||||||
<InputText id="username" type="text" />
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label htmlFor="password">Password</label>
|
|
||||||
<InputText id="password" type="password" />
|
|
||||||
</div>
|
|
||||||
<Button label="Login"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-1">
|
|
||||||
<Divider layout="vertical">
|
|
||||||
<b>OR</b>
|
|
||||||
</Divider>
|
|
||||||
</div>
|
|
||||||
<div className="col-5 align-items-center justify-content-center">
|
|
||||||
<p>
|
|
||||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
|
||||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<Divider layout="horizontal" align="center">
|
|
||||||
<span className="p-tag">Badge</span>
|
|
||||||
</Divider>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
|
||||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
|
||||||
minus.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<Divider align="right">
|
|
||||||
<Button label="Button" icon="pi pi-search" outlined></Button>
|
|
||||||
</Divider>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
|
|
||||||
reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Splitter</h5>
|
|
||||||
<Splitter style={{ height: '300px' }}>
|
|
||||||
<SplitterPanel size={30} minSize={10}>
|
|
||||||
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
|
|
||||||
</SplitterPanel>
|
|
||||||
<SplitterPanel size={70}>
|
|
||||||
<Splitter layout="vertical">
|
|
||||||
<SplitterPanel size={50} minSize={10}>
|
|
||||||
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
|
|
||||||
</SplitterPanel>
|
|
||||||
<SplitterPanel size={50} minSize={10}>
|
|
||||||
<div className="h-full flex align-items-center justify-content-center">Panel 3</div>
|
|
||||||
</SplitterPanel>
|
|
||||||
</Splitter>
|
|
||||||
</SplitterPanel>
|
|
||||||
</Splitter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PanelDemo;
|
|
||||||
@@ -1,464 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import { CustomerService } from '../../../../demo/service/CustomerService';
|
|
||||||
import { ProductService } from '../../../../demo/service/ProductService';
|
|
||||||
import { FilterMatchMode, FilterOperator } from 'primereact/api';
|
|
||||||
import { Button } from 'primereact/button';
|
|
||||||
import { Calendar } from 'primereact/calendar';
|
|
||||||
import { Column, ColumnFilterApplyTemplateOptions, ColumnFilterClearTemplateOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
|
|
||||||
import { DataTable, DataTableExpandedRows, DataTableFilterMeta } from 'primereact/datatable';
|
|
||||||
import { Dropdown } from 'primereact/dropdown';
|
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { MultiSelect } from 'primereact/multiselect';
|
|
||||||
import { ProgressBar } from 'primereact/progressbar';
|
|
||||||
import { Rating } from 'primereact/rating';
|
|
||||||
import { Slider } from 'primereact/slider';
|
|
||||||
import { ToggleButton } from 'primereact/togglebutton';
|
|
||||||
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
|
|
||||||
import { classNames } from 'primereact/utils';
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import type { Demo } from '@/types';
|
|
||||||
|
|
||||||
const TableDemo = () => {
|
|
||||||
const [customers1, setCustomers1] = useState<Demo.Customer[]>([]);
|
|
||||||
const [customers2, setCustomers2] = useState<Demo.Customer[]>([]);
|
|
||||||
const [customers3, setCustomers3] = useState<Demo.Customer[]>([]);
|
|
||||||
const [filters1, setFilters1] = useState<DataTableFilterMeta>({});
|
|
||||||
const [loading1, setLoading1] = useState(true);
|
|
||||||
const [loading2, setLoading2] = useState(true);
|
|
||||||
const [idFrozen, setIdFrozen] = useState(false);
|
|
||||||
const [products, setProducts] = useState<Demo.Product[]>([]);
|
|
||||||
const [globalFilterValue1, setGlobalFilterValue1] = useState('');
|
|
||||||
const [expandedRows, setExpandedRows] = useState<any[] | DataTableExpandedRows>([]);
|
|
||||||
const [allExpanded, setAllExpanded] = useState(false);
|
|
||||||
|
|
||||||
const representatives = [
|
|
||||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
|
||||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
|
||||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
|
|
||||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
|
|
||||||
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
|
|
||||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
|
|
||||||
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
|
|
||||||
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
|
|
||||||
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
|
|
||||||
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const statuses = ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'];
|
|
||||||
|
|
||||||
const clearFilter1 = () => {
|
|
||||||
initFilters1();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onGlobalFilterChange1 = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
let _filters1 = { ...filters1 };
|
|
||||||
(_filters1['global'] as any).value = value;
|
|
||||||
|
|
||||||
setFilters1(_filters1);
|
|
||||||
setGlobalFilterValue1(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderHeader1 = () => {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-content-between">
|
|
||||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined onClick={clearFilter1} />
|
|
||||||
<span className="p-input-icon-left">
|
|
||||||
<i className="pi pi-search" />
|
|
||||||
<InputText value={globalFilterValue1} onChange={onGlobalFilterChange1} placeholder="Keyword Search" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLoading2(true);
|
|
||||||
|
|
||||||
CustomerService.getCustomersLarge().then((data) => {
|
|
||||||
setCustomers1(getCustomers(data));
|
|
||||||
setLoading1(false);
|
|
||||||
});
|
|
||||||
CustomerService.getCustomersLarge().then((data) => {
|
|
||||||
setCustomers2(getCustomers(data));
|
|
||||||
setLoading2(false);
|
|
||||||
});
|
|
||||||
CustomerService.getCustomersMedium().then((data) => setCustomers3(data));
|
|
||||||
ProductService.getProductsWithOrdersSmall().then((data) => setProducts(data));
|
|
||||||
|
|
||||||
initFilters1();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const balanceTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<span className="text-bold">{formatCurrency(rowData.balance as number)}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getCustomers = (data: Demo.Customer[]) => {
|
|
||||||
return [...(data || [])].map((d) => {
|
|
||||||
d.date = new Date(d.date);
|
|
||||||
return d;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDate = (value: Date) => {
|
|
||||||
return value.toLocaleDateString('en-US', {
|
|
||||||
day: '2-digit',
|
|
||||||
month: '2-digit',
|
|
||||||
year: 'numeric'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatCurrency = (value: number) => {
|
|
||||||
return value.toLocaleString('en-US', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'USD'
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const initFilters1 = () => {
|
|
||||||
setFilters1({
|
|
||||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
||||||
name: {
|
|
||||||
operator: FilterOperator.AND,
|
|
||||||
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
|
|
||||||
},
|
|
||||||
'country.name': {
|
|
||||||
operator: FilterOperator.AND,
|
|
||||||
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
|
|
||||||
},
|
|
||||||
representative: { value: null, matchMode: FilterMatchMode.IN },
|
|
||||||
date: {
|
|
||||||
operator: FilterOperator.AND,
|
|
||||||
constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
|
|
||||||
},
|
|
||||||
balance: {
|
|
||||||
operator: FilterOperator.AND,
|
|
||||||
constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }]
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
operator: FilterOperator.OR,
|
|
||||||
constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }]
|
|
||||||
},
|
|
||||||
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
|
|
||||||
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
|
|
||||||
});
|
|
||||||
setGlobalFilterValue1('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const countryBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<img alt="flag" src={`/demo/images/flag/flag_placeholder.png`} className={`flag flag-${rowData.country.code}`} width={30} />
|
|
||||||
<span style={{ marginLeft: '.5em', verticalAlign: 'middle' }}>{rowData.country.name}</span>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const filterClearTemplate = (options: ColumnFilterClearTemplateOptions) => {
|
|
||||||
return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary"></Button>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const filterApplyTemplate = (options: ColumnFilterApplyTemplateOptions) => {
|
|
||||||
return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success"></Button>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const representativeBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
const representative = rowData.representative;
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<img
|
|
||||||
alt={representative.name}
|
|
||||||
src={`/demo/images/avatar/${representative.image}`}
|
|
||||||
onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
|
|
||||||
width={32}
|
|
||||||
style={{ verticalAlign: 'middle' }}
|
|
||||||
/>
|
|
||||||
<span style={{ marginLeft: '.5em', verticalAlign: 'middle' }}>{representative.name}</span>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const representativeFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="mb-3 text-bold">Agent Picker</div>
|
|
||||||
<MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const representativesItemTemplate = (option: any) => {
|
|
||||||
return (
|
|
||||||
<div className="p-multiselect-representative-option">
|
|
||||||
<img alt={option.name} src={`/demo/images/avatar/${option.image}`} width={32} style={{ verticalAlign: 'middle' }} />
|
|
||||||
<span style={{ marginLeft: '.5em', verticalAlign: 'middle' }}>{option.name}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const dateBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return formatDate(rowData.date);
|
|
||||||
};
|
|
||||||
|
|
||||||
const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
|
||||||
return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const balanceBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return formatCurrency(rowData.balance as number);
|
|
||||||
};
|
|
||||||
|
|
||||||
const balanceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
|
||||||
return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const statusBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return <span className={`customer-badge status-${rowData.status}`}>{rowData.status}</span>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const statusFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
|
||||||
return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select a Status" className="p-column-filter" showClear />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const statusItemTemplate = (option: any) => {
|
|
||||||
return <span className={`customer-badge status-${option}`}>{option}</span>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const activityBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '.5rem' }}></ProgressBar>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const activityFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
|
|
||||||
<div className="flex align-items-center justify-content-between px-2">
|
|
||||||
<span>{options.value ? options.value[0] : 0}</span>
|
|
||||||
<span>{options.value ? options.value[1] : 100}</span>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const verifiedBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return (
|
|
||||||
<i
|
|
||||||
className={classNames('pi', {
|
|
||||||
'text-green-500 pi-check-circle': rowData.verified,
|
|
||||||
'text-pink-500 pi-times-circle': !rowData.verified
|
|
||||||
})}
|
|
||||||
></i>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const verifiedFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
|
|
||||||
return <TriStateCheckbox value={options.value} onChange={(e) => options.filterCallback(e.value)} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAll = () => {
|
|
||||||
if (allExpanded) collapseAll();
|
|
||||||
else expandAll();
|
|
||||||
};
|
|
||||||
|
|
||||||
const expandAll = () => {
|
|
||||||
let _expandedRows = {} as { [key: string]: boolean };
|
|
||||||
products.forEach((p) => (_expandedRows[`${p.id}`] = true));
|
|
||||||
|
|
||||||
setExpandedRows(_expandedRows);
|
|
||||||
setAllExpanded(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const collapseAll = () => {
|
|
||||||
setExpandedRows([]);
|
|
||||||
setAllExpanded(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const amountBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return formatCurrency(rowData.amount as number);
|
|
||||||
};
|
|
||||||
|
|
||||||
const statusOrderBodyTemplate = (rowData: Demo.Customer) => {
|
|
||||||
return <span className={`order-badge order-${rowData.status?.toLowerCase()}`}>{rowData.status}</span>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const searchBodyTemplate = () => {
|
|
||||||
return <Button icon="pi pi-search" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const imageBodyTemplate = (rowData: Demo.Product) => {
|
|
||||||
return <img src={`/demo/images/product/${rowData.image}`} onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={rowData.image} className="shadow-2" width={100} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const priceBodyTemplate = (rowData: Demo.Product) => {
|
|
||||||
return formatCurrency(rowData.price as number);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ratingBodyTemplate = (rowData: Demo.Product) => {
|
|
||||||
return <Rating value={rowData.rating} readOnly cancel={false} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const statusBodyTemplate2 = (rowData: Demo.Product) => {
|
|
||||||
return <span className={`product-badge status-${rowData.inventoryStatus?.toLowerCase()}`}>{rowData.inventoryStatus}</span>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const rowExpansionTemplate = (data: Demo.Product) => {
|
|
||||||
return (
|
|
||||||
<div className="orders-subtable">
|
|
||||||
<h5>Orders for {data.name}</h5>
|
|
||||||
<DataTable value={data.orders} responsiveLayout="scroll">
|
|
||||||
<Column field="id" header="Id" sortable></Column>
|
|
||||||
<Column field="customer" header="Customer" sortable></Column>
|
|
||||||
<Column field="date" header="Date" sortable></Column>
|
|
||||||
<Column field="amount" header="Amount" body={amountBodyTemplate} sortable></Column>
|
|
||||||
<Column field="status" header="Status" body={statusOrderBodyTemplate} sortable></Column>
|
|
||||||
<Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate}></Column>
|
|
||||||
</DataTable>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const header = <Button icon={allExpanded ? 'pi pi-minus' : 'pi pi-plus'} label={allExpanded ? 'Collapse All' : 'Expand All'} onClick={toggleAll} className="w-11rem" />;
|
|
||||||
|
|
||||||
const headerTemplate = (data: Demo.Customer) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<img alt={data.representative.name} src={`/demo/images/avatar/${data.representative.image}`} width="32" style={{ verticalAlign: 'middle' }} />
|
|
||||||
<span className="font-bold ml-2">{data.representative.name}</span>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const footerTemplate = (data: Demo.Customer) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<td colSpan={4} style={{ textAlign: 'right' }} className="text-bold pr-6">
|
|
||||||
Total Customers
|
|
||||||
</td>
|
|
||||||
<td>{calculateCustomerTotal(data.representative.name)}</td>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateCustomerTotal = (name: string) => {
|
|
||||||
let total = 0;
|
|
||||||
|
|
||||||
if (customers3) {
|
|
||||||
for (let customer of customers3) {
|
|
||||||
if (customer.representative.name === name) {
|
|
||||||
total++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return total;
|
|
||||||
};
|
|
||||||
|
|
||||||
const header1 = renderHeader1();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Filter Menu</h5>
|
|
||||||
<DataTable
|
|
||||||
value={customers1}
|
|
||||||
paginator
|
|
||||||
className="p-datatable-gridlines"
|
|
||||||
showGridlines
|
|
||||||
rows={10}
|
|
||||||
dataKey="id"
|
|
||||||
filters={filters1}
|
|
||||||
filterDisplay="menu"
|
|
||||||
loading={loading1}
|
|
||||||
responsiveLayout="scroll"
|
|
||||||
emptyMessage="No customers found."
|
|
||||||
header={header1}
|
|
||||||
>
|
|
||||||
<Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
|
|
||||||
<Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} filterApply={filterApplyTemplate} />
|
|
||||||
<Column
|
|
||||||
header="Agent"
|
|
||||||
filterField="representative"
|
|
||||||
showFilterMatchModes={false}
|
|
||||||
filterMenuStyle={{ width: '14rem' }}
|
|
||||||
style={{ minWidth: '14rem' }}
|
|
||||||
body={representativeBodyTemplate}
|
|
||||||
filter
|
|
||||||
filterElement={representativeFilterTemplate}
|
|
||||||
/>
|
|
||||||
<Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
|
|
||||||
<Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
|
|
||||||
<Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
|
|
||||||
<Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
|
|
||||||
<Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
|
|
||||||
</DataTable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Frozen Columns</h5>
|
|
||||||
<ToggleButton checked={idFrozen} onChange={(e) => setIdFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style={{ width: '10rem' }} />
|
|
||||||
|
|
||||||
<DataTable value={customers2} scrollable scrollHeight="400px" loading={loading2} className="mt-3">
|
|
||||||
<Column field="name" header="Name" style={{ flexGrow: 1, flexBasis: '160px' }} frozen className="font-bold"></Column>
|
|
||||||
<Column field="id" header="Id" style={{ flexGrow: 1, flexBasis: '100px' }} frozen={idFrozen} alignFrozen="left" bodyClassName={classNames({ 'font-bold': idFrozen })}></Column>
|
|
||||||
<Column field="country.name" header="Country" style={{ flexGrow: 1, flexBasis: '200px' }} body={countryBodyTemplate}></Column>
|
|
||||||
<Column field="date" header="Date" style={{ flexGrow: 1, flexBasis: '200px' }} body={dateBodyTemplate}></Column>
|
|
||||||
<Column field="company" header="Company" style={{ flexGrow: 1, flexBasis: '200px' }}></Column>
|
|
||||||
<Column field="status" header="Status" style={{ flexGrow: 1, flexBasis: '200px' }} body={statusBodyTemplate}></Column>
|
|
||||||
<Column field="activity" header="Activity" style={{ flexGrow: 1, flexBasis: '200px' }}></Column>
|
|
||||||
<Column field="representative.name" header="Representative" style={{ flexGrow: 1, flexBasis: '200px' }} body={representativeBodyTemplate}></Column>
|
|
||||||
<Column field="balance" header="Balance" body={balanceTemplate} frozen style={{ flexGrow: 1, flexBasis: '120px' }} className="font-bold" alignFrozen="right"></Column>
|
|
||||||
</DataTable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Row Expand</h5>
|
|
||||||
<DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)} responsiveLayout="scroll" rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}>
|
|
||||||
<Column expander style={{ width: '3em' }} />
|
|
||||||
<Column field="name" header="Name" sortable />
|
|
||||||
<Column header="Image" body={imageBodyTemplate} />
|
|
||||||
<Column field="price" header="Price" sortable body={priceBodyTemplate} />
|
|
||||||
<Column field="category" header="Category" sortable />
|
|
||||||
<Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
|
|
||||||
<Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate2} />
|
|
||||||
</DataTable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Subheader Grouping</h5>
|
|
||||||
<DataTable
|
|
||||||
value={customers3}
|
|
||||||
rowGroupMode="subheader"
|
|
||||||
groupRowsBy="representative.name"
|
|
||||||
sortMode="single"
|
|
||||||
sortField="representative.name"
|
|
||||||
sortOrder={1}
|
|
||||||
scrollable
|
|
||||||
scrollHeight="400px"
|
|
||||||
rowGroupHeaderTemplate={headerTemplate}
|
|
||||||
rowGroupFooterTemplate={footerTemplate}
|
|
||||||
responsiveLayout="scroll"
|
|
||||||
>
|
|
||||||
<Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
|
|
||||||
<Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
|
|
||||||
<Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
|
|
||||||
<Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
|
|
||||||
<Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
|
|
||||||
</DataTable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TableDemo;
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { Tree, TreeCheckboxSelectionKeys, TreeMultipleSelectionKeys } from 'primereact/tree';
|
|
||||||
import { TreeTable, TreeTableSelectionKeysType } from 'primereact/treetable';
|
|
||||||
import { Column } from 'primereact/column';
|
|
||||||
import { NodeService } from '../../../../demo/service/NodeService';
|
|
||||||
import { TreeNode } from 'primereact/treenode';
|
|
||||||
|
|
||||||
const TreeDemo = () => {
|
|
||||||
const [files, setFiles] = useState<TreeNode[]>([]);
|
|
||||||
const [files2, setFiles2] = useState<TreeNode[]>([]);
|
|
||||||
const [selectedFileKeys, setSelectedFileKeys] = useState<string | TreeMultipleSelectionKeys | TreeCheckboxSelectionKeys | null>(null);
|
|
||||||
const [selectedFileKeys2, setSelectedFileKeys2] = useState<TreeTableSelectionKeysType | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
NodeService.getFiles().then((files) => setFiles(files));
|
|
||||||
NodeService.getFilesystem().then((files) => setFiles2(files));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid">
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>Tree</h5>
|
|
||||||
<Tree value={files} selectionMode="checkbox" selectionKeys={selectedFileKeys} onSelectionChange={(e) => setSelectedFileKeys(e.value)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card">
|
|
||||||
<h5>TreeTable</h5>
|
|
||||||
<TreeTable value={files2} selectionMode="checkbox" selectionKeys={selectedFileKeys2} onSelectionChange={(e) => setSelectedFileKeys2(e.value)}>
|
|
||||||
<Column field="name" header="Name" expander />
|
|
||||||
<Column field="size" header="Size" />
|
|
||||||
<Column field="type" header="Type" />
|
|
||||||
</TreeTable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TreeDemo;
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
'use client';
|
|
||||||
import React, { useContext, useEffect, useState } from 'react';
|
|
||||||
import { LayoutContext } from '../../../../layout/context/layoutcontext';
|
|
||||||
|
|
||||||
function Colors() {
|
|
||||||
const [colors, setColors] = useState<any[]>([]);
|
|
||||||
const [shades, setShades] = useState<number[]>([]);
|
|
||||||
const { layoutConfig } = useContext(LayoutContext);
|
|
||||||
const dark = layoutConfig.colorScheme !== 'light';
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setColors(['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'red', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'primary']);
|
|
||||||
setShades([0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h2>Colors</h2>
|
|
||||||
<p>Each PrimeReact theme exports its own color palette.</p>
|
|
||||||
|
|
||||||
<h4>Getting Started</h4>
|
|
||||||
<p>
|
|
||||||
Colors are exported as CSS variables and used with the standard <span className="text-primary font-medium">var</span> syntax e.g. <span className="text-primary font-medium">var(--text-color)</span>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`<span style={{color:'var(--text-color)'}}></span>`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>PrimeFlex Integration</h4>
|
|
||||||
<p>Color utility classes of PrimeFlex such as background, text and border use the exported CSS variables from the theme so PrimeFlex or PrimeBlocks are perfectly compatible with the provided themes.</p>
|
|
||||||
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`<div className="bg-blue-500></div>`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Exported Colors</h4>
|
|
||||||
<p>Following is the list of colors exported as CSS variables from the theme.</p>
|
|
||||||
<div className="card">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th className="text-900 text-left p-2">Variable</th>
|
|
||||||
<th className="text-900 text-left p-2">Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--text-color</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Font text color.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--text-color-secondary</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Muted font text color with a secondary level.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--primary-color</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Primary color of the theme.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--primary-color-text</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Text color when background is primary color.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--font-family</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Font family of the theme.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--surface-ground</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Base ground color.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--surface-section</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Color of a section on a ground surface.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--surface-card</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Color of a surface used as a card.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--surface-overlay</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Color of overlay surfaces.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--surface-border</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Color of a divider.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--surface-hover</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Color of an element in hover state.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--focus-ring</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Box shadow of a focused item.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">
|
|
||||||
<span className="font-medium">--maskbg</span>
|
|
||||||
</td>
|
|
||||||
<td className="border-bottom-1 surface-border p-2">Background color of an overlay mask.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="p-2">
|
|
||||||
<span className="font-medium">--border-radius</span>
|
|
||||||
</td>
|
|
||||||
<td className="p-2">Border radius of an element.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Color Palette</h4>
|
|
||||||
<p>A palette consists of 9 colors where each color provides tints/shades from 50 to 900.</p>
|
|
||||||
|
|
||||||
<div className="card">
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{colors.map((color, i) => {
|
|
||||||
return (
|
|
||||||
<div key={i + color} className="flex flex-column mr-6 mb-6">
|
|
||||||
{shades.map((shade, j) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={shade + j}>
|
|
||||||
{shade !== 0 && (
|
|
||||||
<div
|
|
||||||
className="flex align-items-center w-19rem p-3 font-bold"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--' + color + '-' + shade,
|
|
||||||
color: shade > 500 ? '#fff' : '#000'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{color}-{shade}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4>Surfaces</h4>
|
|
||||||
<p>In addition, a theme brings a special palette called surfaces that can be used as the base when designing the surface layers and separators.</p>
|
|
||||||
<div className="card">
|
|
||||||
<div className="flex flex-column">
|
|
||||||
{shades.map((shade, i) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i + shade}
|
|
||||||
className="flex align-items-center w-19rem p-3 font-bold"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--surface-' + shade,
|
|
||||||
color: dark ? (shade > 400 ? '#000' : '#fff') : shade > 500 ? '#fff' : '#000'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
surface-{shade}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Colors;
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import { IconService } from '../../../../demo/service/IconService';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
|
|
||||||
const IconsDemo = () => {
|
|
||||||
const [icons, setIcons] = useState([]);
|
|
||||||
const [filteredIcons, setFilteredIcons] = useState([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
IconService.getIcons().then((data) => {
|
|
||||||
data.sort((icon1, icon2) => {
|
|
||||||
if (icon1.properties.name < icon2.properties.name) return -1;
|
|
||||||
else if (icon1.properties.name < icon2.properties.name) return 1;
|
|
||||||
else return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
setIcons(data);
|
|
||||||
setFilteredIcons(data);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onFilter = (event) => {
|
|
||||||
if (!event.target.value) {
|
|
||||||
setFilteredIcons(icons);
|
|
||||||
} else {
|
|
||||||
setFilteredIcons(
|
|
||||||
icons.filter((it) => {
|
|
||||||
return it.icon.tags[0].includes(event.target.value);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h2>Icons</h2>
|
|
||||||
<p>
|
|
||||||
PrimeReact components internally use{' '}
|
|
||||||
<Link href="https://github.com/primefaces/primeicons" className="font-medium hover:underline text-primary" target={'_blank'}>
|
|
||||||
PrimeIcons
|
|
||||||
</Link>{' '}
|
|
||||||
library, the official icons suite from{' '}
|
|
||||||
<Link href="https://www.primetek.com.tr" className="font-medium hover:underline text-primary" target={'_blank'}>
|
|
||||||
PrimeTek
|
|
||||||
</Link>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h4>Download</h4>
|
|
||||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`npm install primeicons --save`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Getting Started</h4>
|
|
||||||
<p>
|
|
||||||
PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`<i className="pi pi-check" style={{ marginRight: '.5rem' }}></i>`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Size</h4>
|
|
||||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
|
||||||
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`<i className="pi pi-check"></i>`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<i className="pi pi-check mr-2"></i>
|
|
||||||
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`<i className="pi pi-check" style={{ fontSize: '2rem' }}></i>`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<i className="pi pi-check" style={{ fontSize: '2rem' }}></i>
|
|
||||||
|
|
||||||
<h4>Spinning Animation</h4>
|
|
||||||
<p>Special pi-spin class applies continuous rotation to an icon.</p>
|
|
||||||
<pre className="app-code">
|
|
||||||
<code>{`<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>`}</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
|
|
||||||
|
|
||||||
<h4>List of Icons</h4>
|
|
||||||
<p>
|
|
||||||
Here is the current list of PrimeIcons, more icons are added periodically. You may also{' '}
|
|
||||||
<Link href="https://github.com/primefaces/primeicons/issues" className="text-primary-500" target={'_blank'}>
|
|
||||||
request new icons
|
|
||||||
</Link>{' '}
|
|
||||||
at the issue tracker.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<InputText type="text" className="w-full p-3 mt-3 mb-5" onInput={onFilter} placeholder="Search an icon" />
|
|
||||||
</div>
|
|
||||||
<div className="grid icons-list text-center">
|
|
||||||
{filteredIcons &&
|
|
||||||
filteredIcons.map((iconMeta) => {
|
|
||||||
const { icon, properties } = iconMeta;
|
|
||||||
|
|
||||||
return (
|
|
||||||
icon.tags.indexOf('deprecate') === -1 && (
|
|
||||||
<div className="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" key={properties.name}>
|
|
||||||
<i className={'text-2xl mb-2 pi pi-' + properties.name}></i>
|
|
||||||
<div>pi-{properties.name}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IconsDemo;
|
|
||||||
Reference in New Issue
Block a user