feat: accordion using island

components/daisy/Accordion.tsx

@@ -1,45 +1,60 @@
-export interface Props {
-  children: Child[];
-}
+import { useSignal } from "@preact/signals";
 
 interface Child {
   title?: string;
+  /** @format textarea */
   description?: string;
 }
+export interface Props {
+  children2: Child[];
+}
 
 export default function Accordion(props: Props) {
-  const { children } = props;
+  const { children2 } = props;
+  const itemVisible = useSignal(0);
+  const len = children2.length;
+  const len2 = 8 * len;
 
   return (
     <>
-      {children.map((c, index) => {
+      {children2.map((c, index) => {
         return (
-          <div
+          <li
             key={index}
-            className="grid grid-cols-5 justify-center items-center bg-primary rounded-[24px] mb-2 text-black dark:bg-secondary"
+            className={`flex w-[calc((100%/${len})-${len2}px)] items-start lg:mr-2 rounded-[24px] mb-2 text-black 
+            ${
+              itemVisible.value == index
+                ? "bg-primary dark:bg-secondary"
+                : "bg-[#FCD28A] dark:bg-[#F4B9AD]"
+            }
+            `}
+            onClick={() => (itemVisible.value = index)}
           >
-            <input
-              type="radio"
-              name="pilar"
-              id={`pilar-${index}`}
-              className="appearance-none peer"
-              checked={index === 0}
-            />
-            <h2 className="col-start-1 col-span-1 w-[66px] text-[2rem] font-black leading-loose flex justify-center items-center">
+            <p
+              className={`flex justify-center items-center 
+              ${
+                itemVisible.value == index ? "px-4 py-8" : "px-6 py-3"
+              } lg:px-6 w-[66px] text-[2rem] lg:text-[3rem] font-black leading-[100%] tracking-[-3.2px] lg:leading-[140%] lg:tracking-[-4.8px]`}
+            >
               {index + 1}
-            </h2>
-            <label
-              htmlFor={`pilar-${index}`}
-              className="col-start-2 col-span-4 flex items-center cursor-pointer font-semibold text-lg"
+            </p>
+            <div
+              className={`${
+                itemVisible.value == index ? "flex" : "hidden"
+              } flex-col px-6 py-8 lg:px-12 lg:py-16 gap-10 items-start`}
             >
-              <h3 className="font-black text-[1.5rem] leading-relaxed">
+              <h3 className="flex items-start font-black text-[1.5rem] leading-relaxed lg:text-[4rem] lg:leading-[110%]">
                 {c.title}
               </h3>
-            </label>
-            <div className="col-start-2 col-span-4 peer-checked:mt-5 peer-checked:mr-6 peer-checked:mb-8 max-h-0 peer-checked:max-h-[1000px] overflow-hidden transition-max-height duration-300 ease-in-out ">
-              <p className="font-merriweather text-base">{c.description}</p>
+              <div className="overflow-hidden transition-max-height duration-300 ease-in-out 
+              mt-5 mr-6 mb-8 max-h-[1000px]
+              ">
+                <p className="font-merriweather text-base lg:text-[1.5rem] lg:leading-9">
+                  {c.description}
+                </p>
+              </div>
             </div>
-          </div>
+          </li>
         );
       })}
     </>

fresh.gen.ts

@@ -3,6 +3,7 @@
 // This file is automatically updated during development when running `dev.ts`.
 
 import * as $_app from "./routes/_app.tsx";
+import * as $Accordion from "./islands/Accordion.tsx";
 import * as $AddToCartButton_linx from "./islands/AddToCartButton/linx.tsx";
 import * as $AddToCartButton_nuvemshop from "./islands/AddToCartButton/nuvemshop.tsx";
 import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx";
@@ -34,6 +35,7 @@ const manifest = {
     "./routes/_app.tsx": $_app,
   },
   islands: {
+    "./islands/Accordion.tsx": $Accordion,
     "./islands/AddToCartButton/linx.tsx": $AddToCartButton_linx,
     "./islands/AddToCartButton/nuvemshop.tsx": $AddToCartButton_nuvemshop,
     "./islands/AddToCartButton/shopify.tsx": $AddToCartButton_shopify,

islands/Accordion.tsx

@@ -0,0 +1,8 @@
+import Component from "$store/components/daisy/Accordion.tsx";
+import type { Props } from "$store/components/daisy/Accordion.tsx";
+
+function Island(props: Props) {
+  return <Component {...props} />;
+}
+
+export default Island;

sections/Content/Hero.tsx

@@ -23,16 +23,16 @@ export default function HeroFlats({
     <section class="flex flex-col h-screen mt-[-110px] justify-center items-center dark:bg-[#FFF8E6]">
       <div class="flex-1">
       </div>
-      <div class="min-h-[414px] max-w-[1312px]  xl:grid xl:grid-cols-2 xl:grid-rows-2 px-6 pb-10 lg:px-16 lg:pb-0">
-        <h1 class="font-black text-base-200 text-[2rem] lg:text-[4.5rem] leading-8 lg:leading-[4.5rem] dark:text-black uppercase">
+      <div class="min-h-[414px] max-w-[1312px]  xl:grid xl:grid-cols-5 xl:grid-rows-2 px-6 pb-10 lg:px-16 lg:pb-0">
+        <h1 class="col-span-3 font-black text-base-200 text-[2rem] lg:text-[4.5rem] leading-8 lg:leading-[4.5rem] dark:text-black">
           {title}
         </h1>
-        <div class="row-span-2 max-w-[375px] flex items-end mt-6 xl:mt-0 mr-[142px] lg:mr-0 xl:pl-16 lg:pb-40">
+        <div class="col-span-2 row-span-2 max-w-[375px] flex items-end mt-6 xl:mt-0 mr-[142px] lg:mr-0 xl:pl-16 lg:pb-40">
           <p class="font-merriweather text-base-200 text-base lg:text-[1.5rem] lg:leading-[2.25rem] dark:text-black">
             {description}
           </p>
         </div>
-        <div class="flex items-end justify-start pt-40 lg:pt-0 lg:pb-40">
+        <div class="col-span-3 flex items-end justify-start pt-40 lg:pt-0 lg:pb-40">
           <a
             class="btn h-9 lg:h-14 rounded-full border-none font-light text-black text-[1rem] gap-2 bg-primary dark:bg-secondary"
             href={workshopButton.url}

sections/Content/Pillars.tsx

@@ -1,12 +1,14 @@
-import Accordion from "$store/components/daisy/Accordion.tsx";
+import Accordion from "$store/islands/Accordion.tsx";
 
 export interface AccordionItems {
   title?: string;
+  /** @format textarea */
   description?: string;
 }
 
 export interface Props {
   title?: string;
+  /** @format textarea */
   description?: string;
   accordionItems?: AccordionItems[];
 }
@@ -26,19 +28,23 @@ export default function Pillars(
   }: Props,
 ) {
   return (
-    <section class="text-base-200 px-6 py-10 lg:px-16 lg:py-40">
-      <div class="max-w-[640px] space-y-6 mb-10 lg:mb-20">
-        <h2 class="text-[1.5rem] lg:text-[2.5rem] leading-relaxed lg:leading-[2.75rem] font-black dark:bg-[#FFF8E6]">
-          {title}
-        </h2>
+    <section class="w-screen dark:bg-[#FFF8E6]">
+      <div class="text-base-200 px-6 py-10 lg:px-16 lg:py-40 max-w-[1440px] mx-auto">
+        <div class="max-w-[640px] space-y-6 mb-10 lg:mb-20">
+          <h2 class="text-[1.5rem] lg:text-[2.5rem] leading-relaxed lg:leading-[2.75rem] font-black dark:text-black">
+            {title}
+          </h2>
 
-        <p class="font-merriweather text-base lg:text-[1.5rem] lg:leading-[2.25rem] font-normal dark:bg-[#FFF8E6]">
-          {description}
-        </p>
+          <p class="font-merriweather text-base lg:text-[1.5rem] lg:leading-[2.25rem] font-normal dark:text-black">
+            {description}
+          </p>
+        </div>
+        <div class="flex flex-col lg:flex-row lg:h-[720px] w-full">
+          <Accordion
+            children2={accordionItems}
+          />
+        </div>
       </div>
-      <Accordion
-        children={accordionItems}
-      />
     </section>
   );
 }