lionsdev/btpxpress-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dahoud
2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
app/(main)/utilities/colors/page.tsx Normal file
View File

@@ -0,0 +1,190 @@
'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;

121
app/(main)/utilities/icons/page.tsx Normal file
View File

@@ -0,0 +1,121 @@
'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-&#123;icon&#125;</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;