refactor!: Improve accordion logic and styling

BREAKING CHANGE: Created and implemented an Alpine.js store for communicating father and child components in a reactive way, ensuring only one accordion is open at a time.

PS.: For better legibility, Tailwind animation classes were replaced with a custom CSS class.

Author: nsandoya

src/components/Accordion.astro

@@ -1,42 +1,63 @@
 ---
 import downIcon from "../../public/icons/downIcon.svg?raw";
-const { title, description, id } = Astro.props;
+const { title, description, id, last } = Astro.props;
 ---
+<!-- 
+Child component: Alpine.js logic
+
+1. Each child observes the `activeId` state from the `faqs` store by using the reactive `visible` property.
+2. When clicking on a child component, the global `activeId` state in the store is updated:
+   - If accordion is open (in child: `visible` === `true`), it sets `activeId` to `null` and closes.
+   - If accordion is closed (in child: `visible` === `false`), it replaces the `activeId` value with its own `id` value and opens.
+3. When `activeId` changes, the child's classes related to its visibility are automatically updated.
+
+This way, each child component can respond reactively to the `activeId` global state.
+-->
 <div
-  x-data="{ 
-        visible: false,
-        toggle() {
-            this.visible = !this.visible
-        }
-    }"
+  x-data=`{ 
+    get visible() {
+      return Alpine.store && Alpine.store('faqs')?.isVisible(${id});
+    },
+
+    toggle(id){
+      if ($store.faqs.activeId === id) {
+        $store.faqs.setActiveId(null); 
+      } else {
+        $store.faqs.setActiveId(id);
+      };
+
+    }
+  }`
+  
   class:list={[
-  	"bg-white py-6 transition-all duration-300 ease-in-out overflow-hidden",
-  	{ "border-b-0": id === null },
-  	{ "border-b-2": id },
+  	"bg-white py-6 accordion-transition overflow-hidden",
+    {"border-b-0": last === id},
+    {"border-b-2": last != id}
   ]}
 >
   <div
-    @click="toggle()"
+    @click=`toggle(${id})`
     class="flex flex-row items-center text-lg font-semibold cursor-pointer"
-  >
+    :class="visible && 'text-blue-500'"
+    >
     <div class="w-[95%] px-4">
       {title}
     </div>
     <div
       x-transition
       class="w-fit"
-      :class="visible ? 'transform rotate-180 transition-transform duration-400' : 'transform rotate-0 transition-transform duration-400'"
+      :class="visible ? 'transform rotate-180 accordion-transition' : 'transform rotate-0 accordion-transition'"
     >
       <Fragment set:html={downIcon} />
     </div>
   </div>
 
   <div
     x-transition
-    class="transition-all duration-300 ease-in-out overflow-hidden"
+    class="accordion-transition overflow-hidden"
     :class="visible ? 'max-h-72 opacity-100' : 'max-h-0 opacity-0'"
   >
-    <p class="w-[90%] text-gray-600 mt-2 px-4 overflow-hidden">
+    <p class="w-[90%] text-gray-600 text-base mt-2 px-4 overflow-hidden">
       {description}
     </p>
   </div>

src/components/Faq.astro

@@ -2,19 +2,59 @@
 import commonQuestions from "../assets/common-questions.json";
 import Accordion from "./Accordion.astro";
 ---
+<!-- 
 
-<section class="py-16 bg-gray-50">
+Father component: Alpine.js logic
+
+1. The global store `faqs` manages the `activeId` state, which represents the ID of the last accordion opened by the user.
+2. Each child component observes the `activeId` state using the store's  `isVisible` function.
+3. When the user clicks a child component, the store's `activeId` is updated, and this change automatically propagates to all children.
+4. Every child checks if the new active ID matches its own, and opens or closes accordingly.
+
+This ensures that only one accordion is open at a time.
+
+-->
+<section class="py-16 bg-white">
   <div class="container mx-auto px-4">
     <h2 class="text-3xl font-bold text-center mb-12">Preguntas frecuentes</h2>
-    <div class="container faqs-container mx-auto shadow-md p-6 pt-0">
+    <div
+      class="container faqs-container "
+    >
       {
         commonQuestions.map((question, index) => (
           <Accordion
             {...question}
-            id={index++ < commonQuestions.length - 1 ? index++ : null}
+            id={++index}
+            last={commonQuestions.length}
           />
         ))
       }
     </div>
   </div>
 </section>
+
+<!-- Client side rendering -->
+<script>
+  import Alpine from "alpinejs";
+  
+  interface FaqStore {
+    activeId: number | null;
+    setActiveId(id: number | null): void;
+    isVisible(id:number | null): boolean
+  }
+
+  Alpine.store('faqs', {
+    activeId: null,
+
+    setActiveId(id:number | null) {
+      this.activeId = id;
+    },
+
+    isVisible(id:number) {
+      return this.activeId === id;
+    },
+
+  } as FaqStore)
+
+  Alpine.start()
+</script>

src/styles/globals.css

@@ -36,4 +36,13 @@
   svg {
     @apply text-sm;
   }
+
+  /* Components custom styles */
+  .faqs-container {
+    @apply mx-auto shadow-md p-6 pt-0 rounded-xl;
+  }
+
+  .accordion-transition {
+    transition: all 400ms ease-in-out;
+  }
 }