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,47 @@
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { FcsFoodSecurityOperations } from '@/operations/map/FcsFoodSecurityOperations';
+import { FcsMacroEconomicOperations } 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 foodSecurityAccordionItems = FcsFoodSecurityOperations.getFcsFoodSecurityAccordionItems(
+    countryData,
+    countryIso3Data
+  );
+  const macroEconomicAccordionItems = FcsMacroEconomicOperations.getMacroEconomicAccordionItems(
+    countryData,
+    countryIso3Data
+  );
+
+  return isMobile ? (
+    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+      <AccordionContainer
+        loading={loading}
+        title={countryName}
+        accordionModalActive
+        maxWidth={600}
+        items={[...foodSecurityAccordionItems, ...macroEconomicAccordionItems]}
+      />
+    </div>
+  ) : (
+    <>
+      <div className="absolute w-[350px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
+        <AccordionContainer
+          loading={loading}
+          title={countryName}
+          multipleSelectionMode
+          accordionModalActive
+          maxWidth={600}
+          items={foodSecurityAccordionItems}
+          expandAll
+        />
+      </div>
+      <div className="absolute w-[350px] right-[1rem] inset-y-24 z-9999">
+        <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordionItems} />
+      </div>
+    </>
+  );
+}

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

@@ -11,8 +11,8 @@ import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps';
 import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations';
 import { MapOperations } from '@/operations/map/MapOperations';
 
-import AccordionModalSkeleton from '../Accordions/AccordionModalSkeleton';
-import CountryLoadingLayer from './CountryLoading';
+import AccordionModalSkeleton from '../../Accordions/AccordionModalSkeleton';
+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>;