From 9aaa3d7e97996ab5827626b189c92bf0c5658ed6 Mon Sep 17 00:00:00 2001
From: Mikel Elizondo <mikel.elizondo@biotz.io>
Date: Thu, 14 Mar 2024 17:51:43 +0100
Subject: [PATCH] Modify home page FeatureItem component

---
 src/components/HomepageFeatures/index.tsx        | 16 ++++++----------
 .../HomepageFeatures/styles.module.css           |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index 3256faa..ee821b1 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -4,14 +4,14 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  imageSrc: string;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Scalability',
-    Svg: require('@site/static/img/scalability-2.png').default,
+    imageSrc: require('@site/static/img/scalability-2.png').default,
     description: (
       <>
         Connect, manage and scale unlimited devices.
@@ -20,7 +20,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Plug & Play',
-    Svg: require('@site/static/img/plugplay.png').default,
+    imageSrc: require('@site/static/img/plugplay.png').default,
     description: (
       <>
        Simple configuration, without the need for internal developers.
@@ -29,7 +29,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Flexibility',
-    Svg: require('@site/static/img/flexibility.png').default,
+    imageSrc: require('@site/static/img/flexibility.png').default,
     description: (
       <>
         A solution that adapts to the needs of your company.
@@ -38,15 +38,11 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, imageSrc, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        {typeof Svg === 'string' ? (
-          <img src={Svg} alt={title} className={styles.featureImage} />
-        ) : (
-          <Svg className={styles.featureSvg} role="img" />
-        )}
+        <img src={imageSrc} alt={title} className={styles.featureImage} />
       </div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index b248eb2..5e004fc 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -5,7 +5,7 @@
   width: 100%;
 }
 
-.featureSvg {
+.featureImage {
   height: 200px;
   width: 200px;
 }