365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Include ItemGrid component on Content widget

Browse Source
This commit is contained in:
widgeter
2023-08-24 22:49:05 +02:00
parent a9a4298eec
commit b775a11473
4 changed files with 77 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/ui/ItemGrid.astro
View File

@@ -1,23 +1,18 @@
---
import { Icon } from "astro-icon/components";
import { twMerge } from "tailwind-merge";
import type { ItemGrid } from "~/types";
import CTA from "./CTA.astro";
import { twMerge } from 'tailwind-merge';
import type { ItemGrid } from '~/types';
import CTA from './CTA.astro';
import { Icon } from 'astro-icon/components';
const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
const {
items = [],
columns,
defaultIcon = "",
classes = {},
} = Astro.props as ItemGrid;
const {
container: containerClass = "",
// container: containerClass = "md:grid-cols-2",
panel: panelClass = "",
title: titleClass = "",
description: descriptionClass = "",
icon: defaultIconClass = "text-primary",
container: containerClass = '',
panel: panelClass = '',
title: titleClass = '',
description: descriptionClass = '',
icon: defaultIconClass = 'text-primary',
action: actionClass = '',
} = classes;
---
@@ -27,74 +22,50 @@ const {
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"
? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
: columns === 3
? "lg:grid-cols-3 sm:grid-cols-2"
? 'lg:grid-cols-3 sm:grid-cols-2'
: columns === 2
? "sm:grid-cols-2 "
: ""
? 'sm:grid-cols-2 '
: ''
}`,
containerClass
)}
>
{items.map(
({
title,
description,
icon,
callToAction,
classes: itemClasses = {},
}) => (
<div>
<div
class={twMerge(
"flex flex-row max-w-md",
panelClass,
itemClasses?.panel
{items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
<div>
<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 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>
<h3
</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(
"text-xl font-bold",
titleClass,
itemClasses?.title
`${title || description ? 'mt-3' : ''} text-primary cursor-pointer`,
actionClass,
itemClasses?.actionClass
)}
>
{title}
</h3>
{description && (
<p
class={twMerge(
`${title ? "mt-3" : ""} text-muted`,
descriptionClass,
itemClasses?.description
)}
set:html={description}
/>
)}
{callToAction && (
<div class="mt-2 text-primary cursor-pointer">
<CTA callToAction={callToAction} />
</div>
)}
</div>
<CTA callToAction={callToAction} />
</div>
)}
</div>
</div>
)
)}
</div>
))}
</div>
)
}