From 7c2c33331e195ac358e275a60f956c62ad836a2b Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sun, 11 Feb 2024 22:45:46 +0400
Subject: [PATCH] Add PrimaryCTA and SecondaryCTA components

This commit adds two new Astro components: PrimaryCTA and SecondaryCTA. These components represent the primary and secondary Call To Action (CTA) buttons, respectively. Both components accept title and url as props, and present clickable buttons styled according to their classification.
---
 src/components/ui/buttons/PrimaryCTA.astro   | 26 ++++++++++++++++++++
 src/components/ui/buttons/SecondaryCTA.astro | 15 +++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/components/ui/buttons/PrimaryCTA.astro
 create mode 100644 src/components/ui/buttons/SecondaryCTA.astro

diff --git a/src/components/ui/buttons/PrimaryCTA.astro b/src/components/ui/buttons/PrimaryCTA.astro
new file mode 100644
index 0000000..075370c
--- /dev/null
+++ b/src/components/ui/buttons/PrimaryCTA.astro
@@ -0,0 +1,26 @@
+---
+const { title, url } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+---
+
+<a
+  class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
+  href={url}
+>
+  {title}
+  <svg
+    class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
+  >
+</a>
diff --git a/src/components/ui/buttons/SecondaryCTA.astro b/src/components/ui/buttons/SecondaryCTA.astro
new file mode 100644
index 0000000..7f8ce6c
--- /dev/null
+++ b/src/components/ui/buttons/SecondaryCTA.astro
@@ -0,0 +1,15 @@
+---
+const { title, url } = Astro.props;
+
+interface Props {
+  title?: string;
+  url?: string;
+}
+---
+
+<a
+  class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-500 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+  href={url}
+>
+  {title}
+</a>