Images

1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/widgets/Features2Custom.astro b/src/components/widgets/Features2Custom.astro
new file mode 100644
index 0000000..18c1546
--- /dev/null
+++ b/src/components/widgets/Features2Custom.astro
@@ -0,0 +1,84 @@
+---
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import Headline from '~/components/ui/Headline.astro';
+import Button from '~/components/ui/Button.astro';
+import type { Features as Props } from '~/types';
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const {
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
+  items = [],
+  columns = 3,
+  defaultIcon,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+
+const {
+  container: containerClass = '',
+  panel: panelClass = '',
+  title: titleClass = '',
+  description: descriptionClass = '',
+  icon: defaultIconClass = 'text-primary',
+} = classes as Record<string, string>;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  
+  {
+    items && items.length > 0 && (
+      <div
+        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'
+              : columns === 3
+                ? 'lg:grid-cols-3 sm:grid-cols-2'
+                : columns === 2
+                  ? 'sm:grid-cols-2 '
+                  : ''
+          }`,
+          containerClass
+        )}
+      >
+        {items.map(({ title, description, icon, iconSvg, callToAction, classes: itemClasses = {} }) => (
+          <div
+            class={twMerge(
+              'relative flex flex-col intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade rounded-lg shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur border border-[#ffffff29] bg-white dark:bg-slate-900 p-6',
+              panelClass,
+              itemClasses?.panel
+            )}
+          >
+            {(icon || iconSvg || defaultIcon) && (
+              <div class={twMerge('mb-6 w-12 h-12', defaultIconClass, itemClasses?.icon)}>
+                {iconSvg ? (
+                  <div set:html={readFileSync(join(process.cwd(), iconSvg.replace('/src/', 'src/')), 'utf-8')} />
+                ) : (
+                  <Icon name={icon || defaultIcon} class="w-full h-full" />
+                )}
+              </div>
+            )}
+            <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>
+            )}
+          </div>
+        ))}
+      </div>
+    )
+  }
+</WidgetWrapper> 
\ No newline at end of file