feat: redesign accordions of fcs and ipc

src/components/Cards/Card.tsx

@@ -1,27 +1,44 @@
 'use client';
 
-import { Card, CardBody, CardHeader, Image } from '@nextui-org/react';
+import { Card, CardBody, Image } from '@nextui-org/react';
+import React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { CardProps } from '@/domain/props/CardProps';
 
 export default function CustomCard({ title, content }: CardProps) {
   return (
-    <Card className="w-fit h-auto min-w-[210px] justify-evenly m-2.5 dark:primary white:bg-white">
-      <CardHeader className="flex flex-col items-center p-[5px] overflow-visible">
-        <h2 className="text-large break-words text-pretty"> {title} </h2>
-      </CardHeader>
-      <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
-        <div className="flex flex-row gap-6 overflow-y-auto">
+    <Card className="w-fit h-auto min-w-[200px] justify-evenly m-2.5 dark:primary white:bg-white flex-grow">
+      <CardBody className="flex flex-col items-left justify-center overflow-hidden max-h-[300px] py-2">
+        <div className="flex flex-row flex-wrap gap-6 ">
           {content.map((item) => (
-            <div key={uuid()} className="flex flex-col gap-1 items-center">
-              {item.svgIcon ? (
-                <div className="svg-icon w-[90px]">{item.svgIcon}</div>
-              ) : (
-                <Image alt={item.altText} className="w-[102px] h-[75px]" src={item.imageSrc} />
+            <div key={uuid()} className="flex flex-row gap-2 items-start">
+              {item.svgIcon && <div className="svg-icon w-[50px] h-[50px]">{item.svgIcon}</div>}
+              {!item.svgIcon && item.imageSrc && (
+                <Image alt={item.altText || ''} className="w-[50px] h-[50px] -mt-4" src={item.imageSrc} />
+              )}
+              <div className="flex flex-col">
+                {title && <h2 className="text-sm text-left">{title}</h2>}
+                {item.text && <h2 className={`text-left ${item.textClass || 'text-xs'}`}>{item.text}</h2>}
+                {item.value && (
+                  <p className="text-sm text-left">
+                    {typeof item.value === 'number' ? `${item.value.toFixed(2)} M` : item.value || 'N/A'}
+                  </p>
+                )}
+              </div>
+              {item.changeValues && (
+                <div className="flex flex-row space-x-1">
+                  {item.changeValues.map((delta) => (
+                    <div key={uuid()} className="flex flex-col items-center gap-1">
+                      <Image src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" width={24} height={24} />
+                      <div className="text-center">
+                        <p className="text-xs font-medium whitespace-nowrap">{delta.text}</p>
+                        <p className="text-xs text-gray-600">{delta.timeText}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
               )}
-              <h1 className="text-base text-center mt-2">{item.text}</h1>
-              {item.timeText && <h1 className="text-xs text-[#888888] text-center break-words">{item.timeText}</h1>}
             </div>
           ))}
         </div>

src/components/Map/FcsMap/FcsAccordion.tsx

@@ -0,0 +1,44 @@
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { getFcsFoodSecurityAccordionItems } from '@/operations/map/FcsFoodSecurityOperations';
+import { getMacroEconomicAccordionOperations } from '@/operations/map/FcsMacroEconomicOperations';
+import { useMediaQuery } from '@/utils/resolution.ts';
+
+import AccordionContainer from '../../Accordions/AccordionContainer';
+
+export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
+  const isMobile = useMediaQuery('(max-width: 700px)');
+  const foodSecurityAccordion = getFcsFoodSecurityAccordionItems(countryData, countryIso3Data);
+  const macroEconomicAccordion = getMacroEconomicAccordionOperations(countryData, countryIso3Data);
+
+  return (
+    <>
+      {!isMobile ? (
+        <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-visible overflow-y-auto h-screen">
+          <AccordionContainer
+            loading={loading}
+            title={countryName ?? undefined}
+            accordionModalActive
+            maxWidth={600}
+            items={foodSecurityAccordion}
+            expandAll
+          />
+        </div>
+      ) : (
+        <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+          <AccordionContainer
+            loading={loading}
+            title={countryName ?? undefined}
+            accordionModalActive
+            maxWidth={600}
+            items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
+          />
+        </div>
+      )}
+      {!isMobile && (
+        <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
+          <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
+        </div>
+      )}
+    </>
+  );
+}

src/components/Map/FcsChoropleth.tsx → src/components/Map/FcsMap/FcsChoropleth.tsx

@@ -11,7 +11,7 @@ import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps';
 import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations';
 import { MapOperations } from '@/operations/map/MapOperations';
 
-import CountryLoadingLayer from './CountryLoading';
+import CountryLoadingLayer from '../CountryLoading';
 import FscCountryChoropleth from './FcsCountryChoropleth';
 
 export default function FcsChoropleth({

src/components/Map/FcsRegionTooltip.tsx → src/components/Map/FcsMap/FcsRegionTooltip.tsx

@@ -3,7 +3,7 @@ import { Feature, GeoJsonProperties, Geometry } from 'geojson';
 import { FcsRegionTooltipOperations } from '@/operations/map/FcsRegionTooltipOperations';
 import { formatToMillion } from '@/utils/formatting';
 
-import { LineChart } from '../Charts/LineChart';
+import { LineChart } from '../../Charts/LineChart';
 
 interface FcsRegionTooltipProps {
   feature: Feature<Geometry, GeoJsonProperties>;

src/components/Map/IpcMap/IpcAccordion.tsx

@@ -1,71 +1,28 @@
 import AccordionContainer from '@/components/Accordions/AccordionContainer';
-import CustomCard from '@/components/Cards/Card';
-import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
 import IpcAccordionProps from '@/domain/props/IpcAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
+import { IpcFoodSecurityAccordionOperations } from '@/operations/map/IpcFoodSecurityOperations';
+import { useMediaQuery } from '@/utils/resolution.ts';
 
-import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
-import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
-
-export default function IpcAccordion({ countryData, countryName }: IpcAccordionProps) {
+export default function IpcAccordion({ countryData, countryName, countryIso3Data }: IpcAccordionProps) {
   const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
   const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
-  const hasNoData: boolean =
-    !countryData || !countryData.population || !countryData.fcs || !deltaOneMonth || !deltaThreeMonth;
+
+  const ipcFoodSecurityAccordion = IpcFoodSecurityAccordionOperations.getFoodSecurityAccordionItems(
+    countryData,
+    deltaOneMonth,
+    deltaThreeMonth
+  );
+  const ipcNutrititonAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordion(countryIso3Data);
+  const isMobile = useMediaQuery('(max-width: 700px)');
 
   return (
-    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+    <div className="absolute w-[300px] left-[108px] top-4 z-9999">
       <AccordionContainer
         title={countryName ?? undefined}
         accordionModalActive
         maxWidth={600}
-        items={[
-          {
-            title: 'Food Security',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-            content: !hasNoData ? (
-              <div className={cardsWrapperClass}>
-                <CustomCard
-                  title="Population"
-                  content={[
-                    {
-                      svgIcon: <Population className="w-full h-full object-contain" />,
-                      text: countryData?.population ? `${countryData?.population.toFixed(2)} M` : 'N/A',
-                      altText: 'Population Icon',
-                    },
-                  ]}
-                />
-                <CustomCard
-                  title="People with insufficient food consumption"
-                  content={[
-                    {
-                      svgIcon: <FoodConsumption className="w-full h-full object-contain" />,
-                      text: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
-                      altText: 'Food Consumption Icon',
-                    },
-                    {
-                      imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '1 Months ago',
-                      altText: 'Other Icon',
-                    },
-                    {
-                      imageSrc:
-                        deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '3 Month ago',
-                      altText: 'Other Icon',
-                    },
-                  ]}
-                />
-              </div>
-            ) : (
-              <p>No data about food security</p>
-            ),
-          },
-        ]}
+        items={[ipcFoodSecurityAccordion, ipcNutrititonAccordion]}
+        expandAll={!isMobile}
       />
     </div>
   );