Replace component CTA with Button with new props

src/components/ui/Button.astro

@@ -0,0 +1,26 @@
+---
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import type { CallToAction } from '~/types';
+
+const {
+  variant = 'secondary',
+  target,
+  text = Astro.slots.render("default"),
+  icon = '',
+  class: className = '',
+  ...rest
+} = Astro.props as CallToAction;
+
+const variants = {
+  primary: 'btn-primary' ,
+  secondary: 'btn-secondary',
+  tertiary: 'btn btn-tertiary',
+  link: 'hover:text-primary',
+};
+---
+
+<a class={twMerge(variants[variant] || '', className)} {...target ? { target: target, rel: 'noopener noreferrer' } : {}} {...rest}>
+  <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" />}
+</a>

src/components/ui/CTA.astro

@@ -1,38 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import type { CallToAction } from "~/types";
-
-const { callToAction } = Astro.props;
-
-const {
-  targetBlank,
-  text = "",
-  icon = "",
-  href = "",
-} = callToAction as CallToAction;
----
-
-<div class="flex w-auto">
-  {
-    targetBlank ? (
-      <a
-        class="inline-flex items-center justify-center"
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {text}
-        {icon && (
-          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
-        )}
-      </a>
-    ) : (
-      <a class="inline-flex items-center justify-center" href={href}>
-        {text}
-        {icon && (
-          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
-        )}
-      </a>
-    )
-  }
-</div>

src/components/ui/Form.astro

@@ -1,5 +1,6 @@
 ---
 import type { Form } from '~/types';
+import Button from '~/components/ui/Button.astro';
 
 const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
 ---
@@ -69,9 +70,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
   {
     button && (
       <div class="mt-10 grid">
-        <button type="submit" class="btn btn-primary cursor-pointer">
-          {button}
-        </button>
+        <Button variant="primary" type="submit">{button}</Button>
       </div>
     )
   }

src/components/ui/ItemGrid.astro

@@ -1,7 +1,7 @@
 ---
 import { twMerge } from 'tailwind-merge';
 import type { ItemGrid } from '~/types';
-import CTA from './CTA.astro';
+import Button from './Button.astro';
 import { Icon } from 'astro-icon/components';
 
 const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
@@ -54,12 +54,12 @@ const {
               {callToAction && (
                 <div
                   class={twMerge(
-                    `${title || description ? 'mt-3' : ''} text-primary cursor-pointer`,
+                    `${title || description ? 'mt-3' : ''}`,
                     actionClass,
                     itemClasses?.actionClass
                   )}
                 >
-                  <CTA callToAction={callToAction} />
+                  <Button variant="link" {...callToAction} />
                 </div>
               )}
             </div>

src/components/ui/ItemGrid2.astro

@@ -2,7 +2,7 @@
 import { Icon } from "astro-icon/components";
 import { twMerge } from "tailwind-merge";
 import type { ItemGrid } from "~/types";
-import CTA from "./CTA.astro";
+import Button from "./Button.astro";
 
 const {
   items = [],
@@ -82,8 +82,8 @@ const {
               />
             )}
             {callToAction && (
-              <div class="mt-2 text-primary cursor-pointer">
-                <CTA callToAction={callToAction} />
+              <div class="mt-2">
+                <Button {...callToAction} />
               </div>
             )}
           </div>