From be3ca0d70f66365969adb4c902b933f9a2b2e7e1 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 09:51:50 +0100
Subject: [PATCH] fix: restyle the nutrition accordion text

---
 src/components/Cards/Card.tsx                   |  3 +--
 .../props/NutritionAccordionTextProps.tsx       |  4 ++++
 .../map/FcsFoodSecurityOperations.tsx           | 17 +++++++++--------
 .../map/IpcFoodSecurityOperations.tsx           | 17 +++++++++--------
 src/operations/map/NutritionAccordionText.tsx   | 11 +++++++++++
 5 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/domain/props/NutritionAccordionTextProps.tsx
 create mode 100644 src/operations/map/NutritionAccordionText.tsx

diff --git a/src/components/Cards/Card.tsx b/src/components/Cards/Card.tsx
index d316120e..d56c3704 100644
--- a/src/components/Cards/Card.tsx
+++ b/src/components/Cards/Card.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { Card, CardBody } from '@nextui-org/react';
-import Image from 'next/image';
+import { Card, CardBody, Image } from '@nextui-org/react';
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
diff --git a/src/domain/props/NutritionAccordionTextProps.tsx b/src/domain/props/NutritionAccordionTextProps.tsx
new file mode 100644
index 00000000..29665514
--- /dev/null
+++ b/src/domain/props/NutritionAccordionTextProps.tsx
@@ -0,0 +1,4 @@
+export default interface NutritionAccordionTextProps {
+  nutritionValue: string;
+  text: string;
+}
diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
index 79aebaab..b55f64b1 100644
--- a/src/operations/map/FcsFoodSecurityOperations.tsx
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -12,6 +12,7 @@ import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodCo
 import { ReactComponent as Nutrition } from '../../../public/Images/Nutrition.svg';
 import { ReactComponent as Population } from '../../../public/Images/Population.svg';
 import { FcsAccordionOperations } from './FcsAccordionOperations';
+import NutritionAccordionText from './NutritionAccordionText';
 
 export function getFcsFoodSecurityAccordionItems(
   countryData: CountryData | undefined,
@@ -81,10 +82,10 @@ export function getFcsFoodSecurityAccordionItems(
                   {
                     svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Acute} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Acute} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
@@ -97,10 +98,10 @@ export function getFcsFoodSecurityAccordionItems(
                   {
                     svgIcon: <Nutrition className="w-[30px] h-[30px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Chronic} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Chronic} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
index 58000c4a..295446c2 100644
--- a/src/operations/map/IpcFoodSecurityOperations.tsx
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -10,6 +10,7 @@ import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodCo
 import { ReactComponent as Nutrition } from '../../../public/Images/Nutrition.svg';
 import { ReactComponent as Population } from '../../../public/Images/Population.svg';
 import { FcsAccordionOperations } from './FcsAccordionOperations';
+import NutritionAccordionText from './NutritionAccordionText';
 
 export const IpcFoodSecurityAccordionOperations = {
   getFoodSecurityAccordionItems: (
@@ -85,10 +86,10 @@ export const IpcFoodSecurityAccordionOperations = {
                   {
                     svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Acute} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Acute} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
@@ -101,10 +102,10 @@ export const IpcFoodSecurityAccordionOperations = {
                   {
                     svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Chronic} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Chronic} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
diff --git a/src/operations/map/NutritionAccordionText.tsx b/src/operations/map/NutritionAccordionText.tsx
new file mode 100644
index 00000000..59550e6d
--- /dev/null
+++ b/src/operations/map/NutritionAccordionText.tsx
@@ -0,0 +1,11 @@
+import NutritionAccordionTextProps from '@/domain/props/NutritionAccordionTextProps';
+
+function NutritionAccordionText({ nutritionValue, text }: NutritionAccordionTextProps) {
+  return (
+    <>
+      <span className="text-base">{nutritionValue}</span>
+      <span className="text-xs text-gray-400 ml-1">{text}</span>
+    </>
+  );
+}
+export default NutritionAccordionText;