Astro.js dynamic component list

BrandLogoItem.astro

---
export interface Props {
  label?: string
  hoverBrandColor?: string
}
const { label = '', hoverBrandColor = '' } = Astro.props
---

<li
  title={label}
  class:list={[
    'relative flex items-center justify-center aspect-[9/10] p-2 sm:p-0 w-16 sm:w-72 flex-none overflow-hidden rounded-xl sm:rounded-2xl bg-white border border-gray-100 transition duration-300',
    [hoverBrandColor],
  ]}
>
  <slot />
</li>

Page.astro

---
import BrandLogoItem from './BrandLogoItem.astro'
import TailwindLogo from './Brands/TailwindLogo.astro';
import LaravelLogo from './Brands/LaravelLogo.astro';

const brandLogos = [
  {
    label: 'Tailwind CSS',
    hoverBrandColor: 'hover:border-#38BDF8',
    svgComponent: TailwindLogo,
  },
  {
    label: 'Laravel',
    hoverBrandColor: 'hover:border-#f9322c',
    svgComponent: LaravelLogo,
  },
];
---
<ul role="list">
  {brandLogos.map(brandLogo => (
    <BrandLogoItem label={brandLogo.label} hoverBrandColor={brandLogo.hoverBrandColor}>
      <brandLogo.svgComponent />
    </BrandLogoItem>
  ))}
</ul>

TailwindLogo.astro

<svg width="200" height="124" viewBox="0 0 200 124" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M100 0.888916C73.3333 0.888916 56.6667 14.2223 50 40.8889C60 27.5556 71.6667 22.5556 85 25.8889C92.6074 27.7889 98.0444 33.3111 104.063 39.4185C113.867 49.3704 125.215 60.8889 150 60.8889C176.667 60.8889 193.333 47.5556 200 20.8889C190 34.2223 178.333 39.2223 165 35.8889C157.393 33.9889 151.956 28.4667 145.937 22.3593C136.133 12.4074 124.785 0.888916 100 0.888916ZM50 60.8889C23.3333 60.8889 6.66667 74.2223 0 100.889C10 87.5556 21.6667 82.5556 35 85.8889C42.6074 87.7926 48.0444 93.3111 54.063 99.4186C63.8667 109.37 75.2148 120.889 100 120.889C126.667 120.889 143.333 107.556 150 80.8889C140 94.2223 128.333 99.2223 115 95.8889C107.393 93.9889 101.956 88.4667 95.937 82.3593C86.1333 72.4074 74.7852 60.8889 50 60.8889Z"
    fill="#38BDF8"></path>
</svg>