Files
blog/src/components/widgets/Brands.astro
2023-08-24 21:49:27 +02:00

37 lines
1.1 KiB
Plaintext

---
import { Icon } from 'astro-icon/components';
import type { Brands } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
const {
title = '',
subtitle = '',
tagline = '',
icons = [],
images = [],
id,
isDark = false,
classes = {},
bg = await Astro.slots.render('bg'),
} = Astro.props as Brands;
---
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} />
<div class="flex flex-wrap justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
{icons && icons.map((icon) => <Icon name={icon} class="py-3 lg:py-5 w-12 h-auto mx-auto sm:mx-0 text-gray-500" />)}
{
images &&
images.map(
(image) =>
image.src && (
<div class="flex justify-center col-span-1 my-2 lg:my-4 py-1 px-3 rounded-md dark:bg-gray-200">
<img src={image.src} alt={image.alt || ''} class="max-h-12" />
</div>
)
)
}
</div>
</WidgetWrapper>