---
type Props = {
    colors: string[]
}

const { colors } = Astro.props
---

<div class="palette">
    {
        colors.map(value => (
            <>
                <div class="color">
                    <div class="region" style={{ backgroundColor: value }} />
                </div>
                <div class="label">{value}</div>
            </>
        ))
    }
</div>