fix: restyle the nutrition accordion text

jst-seminar-rostlab-tum · Dec 19, 2024 · be3ca0d · be3ca0d
1 parent 1b4750a
commit be3ca0d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;