46 lines
1.5 KiB
Text
46 lines
1.5 KiB
Text
---
|
|
import type { Stats } from '~/types';
|
|
import WidgetWrapper from '../ui/WidgetWrapper.astro';
|
|
import Headline from '../ui/Headline.astro';
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
const {
|
|
title = await Astro.slots.render('title'),
|
|
subtitle = await Astro.slots.render('subtitle'),
|
|
tagline,
|
|
stats = [],
|
|
|
|
id,
|
|
isDark = false,
|
|
classes = {},
|
|
bg = await Astro.slots.render('bg'),
|
|
} = Astro.props as Stats;
|
|
---
|
|
|
|
<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 -m-4 text-center">
|
|
{
|
|
stats &&
|
|
stats.map(({ amount, title, icon }) => (
|
|
<div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] text-center md:border-r md:last:border-none dark:md:border-slate-500">
|
|
{icon && (
|
|
<div class="flex items-center justify-center mx-auto mb-4 text-primary">
|
|
<Icon name={icon} class="w-10 h-10" />
|
|
</div>
|
|
)}
|
|
{amount && (
|
|
<div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
|
|
{amount}
|
|
</div>
|
|
)}
|
|
{title && (
|
|
<div class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
|
|
{title}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</WidgetWrapper>
|