From 3f514431d631cdc40dbcae9bf50440fd440e1161 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Fri, 4 Oct 2024 12:49:36 +0200
Subject: [PATCH] fixes home accordion

---
 src/containers/home/thematic-areas/index.tsx | 112 +++++--------------
 1 file changed, 30 insertions(+), 82 deletions(-)

diff --git a/src/containers/home/thematic-areas/index.tsx b/src/containers/home/thematic-areas/index.tsx
index c6f3efa..9cd00b4 100644
--- a/src/containers/home/thematic-areas/index.tsx
+++ b/src/containers/home/thematic-areas/index.tsx
@@ -69,90 +69,38 @@ const THEMATIC_AREAS = [
 ];
 
 export default function ThematicAreas() {
-  const [openAccordionItem, setOpenAccordionItem] = useState<string | null>(null);
   const [currentAccordionItem, setCurrentAccordionItem] = useState<string | null>(null);
 
   return (
-    <>
-      <Wrapper className="space-y-10 md:space-y-20">
-        <div className="grid grid-cols-12">
-          <div className="col-span-12 space-y-9 lg:col-span-6">
-            <h2 className="text-xl font-bold text-grey-800 md:text-2xl">Thematic areas</h2>
-            <p className="leading-9 md:text-lg">
-              The more4nature activities are focused on three key thematic areas in environmental
-              protection:
-            </p>
-          </div>
+    <Wrapper className="space-y-10 md:space-y-20">
+      <div className="grid grid-cols-12">
+        <div className="col-span-12 space-y-9 lg:col-span-6">
+          <h2 className="text-xl font-bold text-grey-800 md:text-2xl">Thematic areas</h2>
+          <p className="leading-9 md:text-lg">
+            The more4nature activities are focused on three key thematic areas in environmental
+            protection:
+          </p>
         </div>
-        <Media lessThan="lg">
-          <ul className="space-y-10 divide-y divide-grey-800/20">
-            {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
-              <li key={name} className="flex flex-col space-y-4 [&:not(:first-child)]:pt-10">
-                <div
-                  className="flex h-[110px] w-full bg-cover bg-center bg-no-repeat"
-                  style={{
-                    backgroundImage: `url(${imageURL})`,
-                  }}
-                />
-                <div className="flex items-center space-x-5">
-                  {icon}
-                  <span className="text-lg">{name}</span>
-                </div>
-                <p>{description}</p>
-              </li>
-            ))}
-          </ul>
-        </Media>
-        <Media greaterThanOrEqual="lg">
-          <Accordion
-            type="single"
-            collapsible
-            className="flex w-full flex-col"
-            onValueChange={(v) => setOpenAccordionItem(v || null)}
-          >
-            {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => {
-              const isFadedAccordionItem = openAccordionItem && name !== openAccordionItem;
-              const isOpenAccordionItem = openAccordionItem && name === openAccordionItem;
-              return (
-                <div
-                  key={name}
-                  className="flex h-full w-full flex-1 flex-row-reverse border-b-grey-800/30 last-of-type:border-b"
-                >
-                  <AccordionItem
-                    key={name}
-                    value={name}
-                    className={cn({
-                      'peer w-full px-14 py-10': true,
-                      'border-t-2': isOpenAccordionItem,
-                    })}
-                  >
-                    <AccordionTrigger>
-                      <div className="flex flex-1 items-center space-x-5">
-                        {icon}
-                        <span className="text-left text-4xl">{name}</span>
-                      </div>
-                    </AccordionTrigger>
-                    <AccordionContent className="leading-9">{description}</AccordionContent>
-                  </AccordionItem>
-                  <div
-                    className={cn({
-                      'relative flex w-[395px] border-t border-t-grey-800/30 bg-cover bg-center bg-no-repeat transition-opacity duration-300':
-                        true,
-                      'bg-gray-400 opacity-40 bg-blend-multiply': isFadedAccordionItem,
-                      'border-t-2 border-t-grey-800': isOpenAccordionItem,
-                    })}
-                    style={{
-                      backgroundImage: isFadedAccordionItem
-                        ? `linear-gradient(0deg, rgba(36, 59, 74, 0.20) 0%, rgba(36, 59, 74, 0.20) 100%), url(${imageURL})`
-                        : `url(${imageURL})`,
-                    }}
-                  />
-                </div>
-              );
-            })}
-          </Accordion>
-        </Media>
-      </Wrapper>
+      </div>
+      <Media lessThan="lg">
+        <ul className="space-y-10 divide-y divide-grey-800/20">
+          {THEMATIC_AREAS.map(({ name, description, imageURL, icon }) => (
+            <li key={name} className="flex flex-col space-y-4 [&:not(:first-child)]:pt-10">
+              <div
+                className="flex h-[110px] w-full bg-cover bg-center bg-no-repeat"
+                style={{
+                  backgroundImage: `url(${imageURL})`,
+                }}
+              />
+              <div className="flex items-center space-x-5">
+                {icon}
+                <span className="text-lg">{name}</span>
+              </div>
+              <p>{description}</p>
+            </li>
+          ))}
+        </ul>
+      </Media>
       <Media greaterThanOrEqual="lg">
         <Accordion
           type="single"
@@ -174,7 +122,7 @@ export default function ThematicAreas() {
               className={cn(
                 'first flex h-full w-full flex-1 flex-row-reverse border-t border-t-grey-800/30',
                 {
-                  'border-t-2 border-t-grey-800 first:border-b-grey-800':
+                  'border-t-2 border-t-grey-800 first:border-t-0 first:border-b-grey-800':
                     name === currentAccordionItem,
                 },
               )}
@@ -198,6 +146,6 @@ export default function ThematicAreas() {
           ))}
         </Accordion>
       </Media>
-    </>
+    </Wrapper>
   );
 }