feat: Add dynamic arrow icon into Accordion.astro

Author: nsandoya

public/icons/downIcon.svg

@@ -1,32 +1,43 @@
 ---
-const {title, description, id} = Astro.props;
-console.log("index", id)
+import downIcon from "../../public/icons/downIcon.svg?raw";
+const { title, description, id } = Astro.props;
 ---
-<div x-data="{ 
+<div
+  x-data="{ 
         visible: false,
         toggle() {
             this.visible = !this.visible
         }
     }"
-    
-    class:list={[
-            "bg-white py-6 transition-all duration-300 ease-in-out overflow-hidden", 
-            { "border-b-0" : id === null },
-            { "border-b-2" : id },
-        ]}>
-
-    <div @click="toggle()" class="text-lg font-semibold cursor-pointer">
+  class:list={[
+  	"bg-white py-6 transition-all duration-300 ease-in-out overflow-hidden",
+  	{ "border-b-0": id === null },
+  	{ "border-b-2": id },
+  ]}
+>
+  <div
+    @click="toggle()"
+    class="flex flex-row items-center text-lg font-semibold cursor-pointer"
+  >
+    <div class="w-[95%] px-4">
       {title}
     </div>
-
-    <div 
-        x-transition
-        class="transition-all duration-300 ease-in-out overflow-hidden"
-        :class="visible ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'"
-       
+    <div
+      x-transition
+      class="w-fit"
+      :class="visible ? 'transform rotate-180 transition-transform duration-400' : 'transform rotate-0 transition-transform duration-400'"
     >
-        <p class="text-gray-600 mt-2 overflow-hidden">
-          {description}
-        </p>
+      <Fragment set:html={downIcon} />
     </div>
   </div>
+
+  <div
+    x-transition
+    class="transition-all duration-300 ease-in-out 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">
+      {description}
+    </p>
+  </div>
+</div>

src/components/Accordion.astro

@@ -9,7 +9,10 @@ import Accordion from "./Accordion.astro";
     <div class="container faqs-container mx-auto shadow-md p-6 pt-0">
       {
         commonQuestions.map((question, index) => (
-          <Accordion {...question} id={index++ < commonQuestions.length - 1? index++ : null}/>
+          <Accordion
+            {...question}
+            id={index++ < commonQuestions.length - 1 ? index++ : null}
+          />
         ))
       }
     </div>

src/components/Faq.astro

@@ -36,13 +36,4 @@
   svg {
     @apply text-sm;
   }
-
-  /* FAQ collapsibles style */
-  summary {
-    list-style: none; /* Elimina el marcador predeterminado */
-  }
-  
-  summary::-webkit-details-marker {
-    display: none; /* Para navegadores basados en Webkit (Chrome, Safari) */
-  }
 }