mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
Paweł Kunaandcopilot-swe-agent[bot]
4f7beecd2b
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
23 lines
673 B
Plaintext
23 lines
673 B
Plaintext
---
|
|
// "Less -> More" gradient legend, e.g. for a choropleth map's color scale.
|
|
interface Props {
|
|
class?: string
|
|
}
|
|
|
|
const { class: className } = Astro.props
|
|
const steps = 10
|
|
const color = 'primary'
|
|
const minLabel = 'Less'
|
|
const maxLabel = 'More'
|
|
|
|
const items = Array.from({ length: steps }, (_, i) => i + 1)
|
|
---
|
|
|
|
<div class:list={['d-flex align-items-center gap-2', className]}>
|
|
<div class="text-secondary">{minLabel}</div>
|
|
<div class="d-flex gap-1">
|
|
{items.map((step) => <span class="legend" style={`background: color-mix(in srgb, transparent, var(--tblr-${color}) ${(step / steps) * 100}%);`} />)}
|
|
</div>
|
|
<div class="text-secondary">{maxLabel}</div>
|
|
</div>
|