From af314f187ca5f6953c2e3024b6834bfb7d896338 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Fri, 22 Mar 2024 04:44:09 +0400
Subject: [PATCH] Refactor FAQ section to utilize props and external data
 source

Revised FAQ component in Astro.js to import and use data from an external JSON source, instead of hardcoding the data. Updated TypeScript interfaces for the FAQ props, improving data structure and readability. The icons used have also been streamlined through a centralized 'Icon' component.
---
 src/components/sections/FAQ.astro | 68 +++++++++++--------------------
 src/components/ui/icons/icons.ts  |  2 +-
 2 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/src/components/sections/FAQ.astro b/src/components/sections/FAQ.astro
index f189579..90ee0f3 100644
--- a/src/components/sections/FAQ.astro
+++ b/src/components/sections/FAQ.astro
@@ -1,49 +1,27 @@
 ---
-// Import the necessary AccordionItem component
+// Import the necessary AccordionItem component and JSON data
 import AccordionItem from "../ui/blocks/AccordionItem.astro";
 
-// Define the string variable `subTitle` to provide additional information.
-const subTitle: string =
-  "Ask us anything about our brand and products, and get factual responses.";
+// Define props from Astro
+const { title, faqs } = Astro.props;
 
+// Define TypeScript interface for props
+interface Faq {
+  question: string;
+  answer: string;
+}
+
+interface FaqGroup {
+  subTitle?: string;
+  faqs: Faq[];
+}
+
+interface Props {
+  title: string;
+  faqs: FaqGroup;
+}
 // Define a helper function to generate ids dynamically.
 const makeId = (base: any, index: any) => `${base}${index + 1}`;
-// Define an array `faqs` that holds the content for the Frequently Asked Questions.
-const faqs = [
-  // Content of each FAQ item goes here
-  {
-    heading: "What types of tools are included in the Starter Kit?",
-    content:
-      "The Starter Kit features essential hand and power tools for diverse DIY projects, including hammers, drills, screwdrivers, and a variety of fasteners. It's a curated selection to help beginners and experienced DIYers alike tackle most home improvement tasks.",
-  },
-  {
-    heading: "Can I upgrade from the Starter Kit to the Professional Toolbox?",
-    content:
-      "Absolutely! You can upgrade to the Professional Toolbox at any time to access a wider range of high-quality tools, enjoy priority customer support, and receive exclusive content. Contact our support team for a seamless transition.",
-  },
-  {
-    heading:
-      "What discounts are available for bulk orders through the Professional Toolbox plan?",
-    content:
-      "Professional Toolbox members are entitled to exclusive discounts on bulk orders, the percentage of which may vary depending on the order volume. Get in touch with us to discuss your needs, and we'll provide a tailored discount structure.",
-  },
-  {
-    heading: "What kind of customer support can I expect?",
-    content:
-      "All our customers receive dedicated email support. With the Starter Kit, you'll receive our standard support, while the Professional Toolbox plan upgrades you to priority support, meaning faster response times and specialized assistance.",
-  },
-  {
-    heading: "How current are the online resources and tutorials?",
-    content:
-      "We regularly update our online resources and tutorials to reflect the latest trends in DIY and construction, as well as introductions to new tools and techniques. Our material aims to be comprehensive and user-friendly for all skill levels.",
-  },
-  {
-    heading:
-      "Does ScrewFast offer services for large-scale construction projects?",
-    content:
-      "Yes, our Enterprise Solutions are designed for larger companies requiring comprehensive services. We provide consultation, planning, and supply of high-grade tools and materials, as well as staffing solutions for substantial construction needs. Contact us for a customized quote.",
-  },
-];
 ---
 
 <!-- Main container that holds all content. Customized for different viewport sizes. -->
@@ -56,10 +34,10 @@ const faqs = [
         <h2
           class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
         >
-          Frequently<br />asked questions
+          <Fragment set:html={title} />
         </h2>
         <p class="mt-1 hidden text-neutral-600 dark:text-neutral-400 md:block">
-          {subTitle}
+          {faqs.subTitle}
         </p>
       </div>
     </div>
@@ -69,15 +47,15 @@ const faqs = [
         class="hs-accordion-group divide-y divide-neutral-200 dark:divide-neutral-700"
       >
         {
-          faqs.map((question, i) => {
+          faqs.faqs.map((question, i) => {
             // Generate ids dynamically for each FAQ accordion item.
             let id = makeId(
               "hs-basic-with-title-and-arrow-stretched-heading-",
-              i,
+              i
             );
             let collapseId = makeId(
               "hs-basic-with-title-and-arrow-stretched-collapse",
-              i,
+              i
             );
 
             return (
diff --git a/src/components/ui/icons/icons.ts b/src/components/ui/icons/icons.ts
index 9fdcb41..9d6ebaf 100644
--- a/src/components/ui/icons/icons.ts
+++ b/src/components/ui/icons/icons.ts
@@ -106,7 +106,7 @@ export const Icons = {
   checkCircle: {
     paths: [
       {
-        d: "vgM10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zM13.707 8.293a1 1 0 00-1.414-1.414L9 10.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
       },
     ],
     class: "h-5 w-5 shrink-0",