1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
---
import type { ItemGrid as Props } from '~/types';
import { twMerge } from 'tailwind-merge';
import Button from './Button.astro';
import { Icon } from 'astro-icon/components';
const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
const {
container: containerClass = '',
panel: panelClass = '',
title: titleClass = '',
description: descriptionClass = '',
icon: defaultIconClass = 'text-primary',
action: actionClass = '',
} = classes;
---
{
items && items.length > 0 && (
<div
class={twMerge(
`grid mx-auto gap-8 md:gap-y-12 ${
columns === 4
? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
: columns === 3
? 'lg:grid-cols-3 sm:grid-cols-2'
: columns === 2
? 'sm:grid-cols-2 '
: ''
}`,
containerClass
)}
>
{items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
<div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade">
<div class={twMerge('flex flex-row max-w-md', panelClass, itemClasses?.panel)}>
<div class="flex justify-center">
{(icon || defaultIcon) && (
<Icon
name={icon || defaultIcon}
class={twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconClass, itemClasses?.icon)}
/>
)}
</div>
<div class="mt-0.5">
{title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
{description && (
<p
class={twMerge(`${title ? 'mt-3' : ''} text-muted`, descriptionClass, itemClasses?.description)}
set:html={description}
/>
)}
{callToAction && (
<div class={twMerge(`${title || description ? 'mt-3' : ''}`, actionClass, itemClasses?.actionClass)}>
<Button variant="link" {...callToAction} />
</div>
)}
</div>
</div>
</div>
))}
</div>
)
}
|
