From 2cb0ccc04073fe655b6a73f501ee6c40e4ffa226 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 14 Aug 2022 19:13:25 -0400
Subject: [PATCH] Add icons to Basic Faqs

---
 .../faqs/{FAQsBasic.astro => BasicFAQs.astro} | 26 ++++++++++++++-----
 .../astro/icons/IconArrowDownRight.astro      | 20 ++++++++++++++
 src/components/astro/icons/index.js           | 11 ++------
 src/pages/index.astro                         |  4 +--
 4 files changed, 44 insertions(+), 17 deletions(-)
 rename src/components/astro/faqs/{FAQsBasic.astro => BasicFAQs.astro} (72%)
 create mode 100644 src/components/astro/icons/IconArrowDownRight.astro

diff --git a/src/components/astro/faqs/FAQsBasic.astro b/src/components/astro/faqs/BasicFAQs.astro
similarity index 72%
rename from src/components/astro/faqs/FAQsBasic.astro
rename to src/components/astro/faqs/BasicFAQs.astro
index 22b3aec..1005173 100644
--- a/src/components/astro/faqs/FAQsBasic.astro
+++ b/src/components/astro/faqs/BasicFAQs.astro
@@ -1,4 +1,5 @@
 ---
+import { IconArrowDownRight } from "~/components/astro/icons";
 ---
 
 <div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
@@ -13,7 +14,10 @@
     <div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2">
       <div class="space-y-8">
         <div>
-          <p class="mb-4 text-xl font-bold">What do I need to start?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            What do I need to start?
+          </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to
             explore strange new worlds.
@@ -23,7 +27,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">How to install the Astro + Tailwind CSS template?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            How to install the Astro + Tailwind CSS template?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Well, the way they make shows is, they make one show. That show's called a pilot.
           </p>
@@ -34,7 +40,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">Is the Space Pope reptilian!?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            Is the Space Pope reptilian!?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know
             we were calling him Big Bear.
@@ -43,7 +51,9 @@
       </div>
       <div class="space-y-8">
         <div>
-          <p class="mb-4 text-xl font-bold">How much money you got on you?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            How much money you got on you?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless
             in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on
@@ -51,7 +61,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">Galaxies Orion's sword globular star cluster?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            Galaxies Orion's sword globular star cluster?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
           </p>
@@ -60,7 +72,9 @@
           </p>
         </div>
         <div>
-          <p class="mb-4 text-xl font-bold">When has justice ever been as simple as a rule book?</p>
+          <p class="mb-4 text-xl font-bold">
+            <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
+            When has justice ever been as simple as a rule book?</p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well,
             that's certainly good to know. About four years. I got tired of hearing how young I looked.
diff --git a/src/components/astro/icons/IconArrowDownRight.astro b/src/components/astro/icons/IconArrowDownRight.astro
new file mode 100644
index 0000000..33da750
--- /dev/null
+++ b/src/components/astro/icons/IconArrowDownRight.astro
@@ -0,0 +1,20 @@
+---
+const { class: className = "w-5 h-5" } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <line x1="7" y1="7" x2="17" y2="17"></line>
+  <polyline points="17 8 17 17 8 17"></polyline>
+</svg>
diff --git a/src/components/astro/icons/index.js b/src/components/astro/icons/index.js
index 7b4cc16..e9ecf7e 100644
--- a/src/components/astro/icons/index.js
+++ b/src/components/astro/icons/index.js
@@ -5,13 +5,6 @@ import IconFacebook from "./IconFacebook.astro";
 import IconInstagram from "./IconInstagram.astro";
 import IconArrowRight from "./IconArrowRight.astro";
 import IconMenu from "./IconMenu.astro";
+import IconArrowDownRight from "./IconArrowDownRight.astro";
 
-export {
-  IconSun,
-  IconGithub,
-  IconTwitter,
-  IconFacebook,
-  IconInstagram,
-  IconArrowRight,
-  IconMenu,
-};
+export { IconSun, IconGithub, IconTwitter, IconFacebook, IconInstagram, IconArrowRight, IconMenu, IconArrowDownRight };
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ec0d5be..abb503a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,7 @@ import BasicCTA from "~/components/astro/ctas/BasicCTA.astro";
 import BasicFeatures from "~/components/astro/features/BasicFeatures.astro";
 import StepsFeatures from "~/components/astro/features/StepsFeatures.astro";
 import HeroWithImage from "~/components/astro/hero/HeroWithImage.astro";
-import FAQsBasic from "~/components/astro/faqs/FAQsBasic.astro";
+import BasicFAQs from "~/components/astro/faqs/BasicFAQs.astro";
 import TwoColsFeatures from "~/components/astro/features/TwoColsFeatures.astro";
 import StepsLeft from "~/components/astro/features/StepsLeft.astro";
 import BasicStats from "~/components/astro/stats/BasicStats.astro";
@@ -23,7 +23,7 @@ import BlogFeaturesFourCols from "~/components/astro/blog/BlogFeaturesFourCols.a
     <TwoColsFeatures />
     <StepsFeatures />
     <BlogFeaturesFourCols />
-    <FAQsBasic />
+    <BasicFAQs />
     <BasicStats />
     <BasicCTA />
   </main>