Feature/f 39 implement generic accordion component

package.json

@@ -13,13 +13,16 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@nextui-org/accordion": "^2.0.40",
     "@nextui-org/button": "2.0.38",
+    "@nextui-org/card": "^2.0.34",
     "@nextui-org/code": "2.0.33",
     "@nextui-org/input": "2.2.5",
     "@nextui-org/kbd": "2.0.34",
     "@nextui-org/link": "2.0.35",
     "@nextui-org/listbox": "2.1.27",
     "@nextui-org/navbar": "2.0.37",
+    "@nextui-org/react": "^2.4.8",
     "@nextui-org/skeleton": "^2.0.32",
     "@nextui-org/snippet": "2.0.43",
     "@nextui-org/switch": "2.0.34",

src/app/elements/page.tsx

@@ -1,9 +1,64 @@
+import Accordions from '@/components/Accordions/Accordion';
+import Cards from '@/components/Cards/Card';
 import { Chart } from '@/components/Charts/Chart';
+import { cardsWrapperClass } from '@/utils/primitives';
 
 /**
  * You can use this page to try and show off your components.
  * It's not accessible from the UI, but you can reach it by manually navigating to /elements
  */
+
+const accordionData = [
+  {
+    title: 'Food Security',
+    iconSrc: '/Images/InfoIcon.svg',
+    content: (
+      <div className={cardsWrapperClass}>
+        <Cards
+          title="Population"
+          content={[{ imageSrc: '/Images/Population.svg', text: '4.4 Mio', altText: 'Population Icon' }]}
+        />
+        <Cards
+          title="Population with Food Consumption"
+          content={[
+            { imageSrc: '/Images/FoodConsumption.svg', text: '11.2 Mio', altText: 'Population Icon' },
+            { imageSrc: '/Images/ArrowRed.svg', text: '+ 0.19 Mio', timeText: '3 Months ago', altText: 'Icon' },
+            { imageSrc: '/Images/ArrowGreen.svg', text: '- 2.5 Mio ', timeText: 'A Month ago', altText: 'Other Icon' },
+          ]}
+        />
+      </div>
+    ),
+  },
+  {
+    title: 'Nutrition',
+    iconSrc: '/Images/InfoIcon.svg',
+    content: (
+      <div className={cardsWrapperClass}>
+        <Cards
+          title="Acute Nutrition"
+          content={[{ imageSrc: '/Images/Acute.svg', text: '28.0% of Cereals', altText: ' Icon' }]}
+        />
+        <Cards
+          title="Chronic Nutrition"
+          content={[{ imageSrc: '/Images/Chronic.svg', text: '28.0% of Cereals', altText: ' Icon' }]}
+        />
+      </div>
+    ),
+  },
+  {
+    title: 'Macroeconomic',
+    iconSrc: '/Images/InfoIcon.svg',
+    content: (
+      <div className={cardsWrapperClass}>
+        <Cards
+          title="Import Dependency"
+          content={[{ imageSrc: '/Images/Import.svg', text: '28.0% of Cereals', altText: ' Icon' }]}
+        />
+      </div>
+    ),
+  },
+];
 export default function Elements() {
-  return <Chart />;
+  // return <Chart />;
+  return <Accordions items={accordionData} />;
 }

src/components/Accordions/Accordion.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Accordion, AccordionItem } from '@nextui-org/accordion';
+
+interface AccordionItemProps {
+  title: string;
+  iconSrc?: string;
+  content: React.ReactNode | string;
+}
+
+interface AccordionsProps {
+  items: AccordionItemProps[];
+}
+
+export default function Accordions({ items }: AccordionsProps) {
+  return (
+    <div className="accordion-wrapper">
+      <Accordion variant="splitted" className="accordion-container">
+        {items.map((item) => (
+          <AccordionItem
+            key={item.title}
+            aria-label={item.title}
+            title={
+              <div className="flex items-center justify-between w-full">
+                <span>{item.title}</span>
+                {item.iconSrc && <img src={item.iconSrc} alt="info icon" className="info-icon" />}
+              </div>
+            }
+          >
+            {typeof item.content === 'string' ? <p>{item.content}</p> : item.content}
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}