---
interface Props {
  colors: Record<string, { prop: string; title: string }>
}

const { colors }: Props = Astro.props
---

<div class="row row-cols-4 row-cols-md-6 g-3 g-md-4">
  {
    Object.values(colors).map((color) => {
      return (
        <div class="text-center">
          <div class="p-6 rounded border" style={{ backgroundColor: `var(${color.prop})` }} />
          <div class="small">{color.title}</div>
        </div>
      )
    })
  }
</div>