Files
tabler/preview/pages/colorpicker.astro
T

30 lines
903 B
Plaintext

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Colorpicker from '@ui/Colorpicker.astro'
import site from '@data/site.json'
const colors = Object.values(site.colors) as { hex: string; title: string }[]
---
<DefaultLayout title="Color picker" pageHeader="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
<Card>
<CardBody>
<CardTitle>Basic</CardTitle>
<div class="row g-3">
{
colors.map((color, index) => (
<div class="col-2">
<div>
<Colorpicker value={color.hex} id={index + 1} format="hex" ariaLabel={`${color.title} color value`} />
</div>
</div>
))
}
</div>
</CardBody>
</Card>
</DefaultLayout>