angel/campus-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format all files with prettier: npm run format

Browse Source
This commit is contained in:
prototypa
2024-04-29 17:51:55 -04:00
parent 2b8672612e
commit a606b34a19
47 changed files with 298 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/ui/ItemGrid2.astro
View File

@@ -1,23 +1,18 @@
---
import type { ItemGrid as Props } from "~/types";
import { Icon } from "astro-icon/components";
import { twMerge } from "tailwind-merge";
import Button from "./Button.astro";
import type { ItemGrid as Props } from '~/types';
import { Icon } from 'astro-icon/components';
import { twMerge } from 'tailwind-merge';
import Button from './Button.astro';
const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
const {
items = [],
columns,
defaultIcon = "",
classes = {},
} = Astro.props;
const {
container: containerClass = "",
container: containerClass = '',
// container: containerClass = "sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
panel: panelClass = "",
title: titleClass = "",
description: descriptionClass = "",
icon: defaultIconClass = "text-primary",
panel: panelClass = '',
title: titleClass = '',
description: descriptionClass = '',
icon: defaultIconClass = 'text-primary',
} = classes;
---
@@ -27,68 +22,32 @@ const {
class={twMerge(
`grid gap-8 gap-x-12 sm:gap-y-8 ${
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"
: columns === 2
? "sm:grid-cols-2 "
: ""
? '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={twMerge(
"relative flex flex-col",
panelClass,
itemClasses?.panel
)}
>
{(icon || defaultIcon) && (
<Icon
name={icon || defaultIcon}
class={twMerge(
"mb-2 w-10 h-10",
defaultIconClass,
itemClasses?.icon
)}
/>
)}
<div
class={twMerge(
"text-xl font-bold",
titleClass,
itemClasses?.title
)}
>
{title}
{items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
<div class={twMerge('relative flex flex-col', panelClass, itemClasses?.panel)}>
{(icon || defaultIcon) && (
<Icon name={icon || defaultIcon} class={twMerge('mb-2 w-10 h-10', defaultIconClass, itemClasses?.icon)} />
)}
<div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
{description && (
<p class={twMerge('text-muted mt-2', descriptionClass, itemClasses?.description)} set:html={description} />
)}
{callToAction && (
<div class="mt-2">
<Button {...callToAction} />
</div>
{description && (
<p
class={twMerge(
"text-muted mt-2",
descriptionClass,
itemClasses?.description
)}
set:html={description}
/>
)}
{callToAction && (
<div class="mt-2">
<Button {...callToAction} />
</div>
)}
</div>
)
)}
)}
</div>
))}
</div>
)
}