Buttons fix

2 files changed, 54 insertions, 2 deletions

diff --git a/src/components/ui/HeroButton.astro b/src/components/ui/HeroButton.astro
new file mode 100644
index 0000000..f7a07c6
--- /dev/null
+++ b/src/components/ui/HeroButton.astro
@@ -0,0 +1,52 @@
+---
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import type { CallToAction as Props } from '~/types';
+
+const {
+  variant = 'secondary',
+  target,
+  text = Astro.slots.render('default'),
+  icon = '',
+  class: className = '',
+  type,
+  ...rest
+} = Astro.props;
+
+const variants = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  tertiary: 'btn btn-tertiary',
+  link: 'cursor-pointer hover:text-primary',
+};
+---
+
+{
+  type === 'button' || type === 'submit' || type === 'reset' ? (
+    <button type={type} class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden')} {...rest}>
+      <span class="flex items-center justify-center">
+        <Fragment set:html={text} />
+        {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+      </span>
+      <Icon
+        name="tabler:arrow-right"
+        class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200 ease-in-out"
+      />
+    </button>
+  ) : (
+    <a
+      class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden')}
+      {...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
+      {...rest}
+    >
+      <span class="flex items-center justify-center">
+        <Fragment set:html={text} />
+        {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+      </span>
+      <Icon
+        name="tabler:arrow-right"
+        class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200 ease-in-out"
+      />
+    </a>
+  )
+}
diff --git a/src/components/widgets/HeroBackground.astro b/src/components/widgets/HeroBackground.astro
index b5ea748..904bc23 100644
--- a/src/components/widgets/HeroBackground.astro
+++ b/src/components/widgets/HeroBackground.astro
@@ -1,6 +1,6 @@
 ---
 import Image from '~/components/common/Image.astro';
-import Button from '~/components/ui/Button.astro';
+import HeroButton from '~/components/ui/HeroButton.astro';
 
 import type { Hero as Props } from '~/types';
 
@@ -105,7 +105,7 @@ const {
               {Array.isArray(actions) ? (
                 actions.map((action) => (
                   <div class="flex w-full sm:w-auto">
-                    <Button {...(action || {})} class="w-full sm:mb-0" />
+                    <HeroButton {...(action || {})} class="w-full sm:mb-0" />
                   </div>
                 ))
               ) : (