fix feature

src/components/Feature.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { IGatsbyImageData } from "gatsby-plugin-image";
 import { Link } from "gatsby";
 
-import FeatureComponent from "./feature/FeatureComponent";
+import CardImage from "./core/card/CardImage";
+import Map from "./core/Map";
 
 
 interface Props {
@@ -18,6 +19,11 @@ interface Props {
   };
   custom?: JSX.Element;
 }
+interface FeatureComponentProps {
+  image?: string | IGatsbyImageData;
+  idMap?: number;
+  custom?: JSX.Element;
+}
 
 
 const oClassName = {
@@ -32,6 +38,41 @@ const oClassName = {
 }
 
 
+const FeatureComponent  = (props: FeatureComponentProps) => {
+  const {
+    image,
+    idMap,
+    custom
+  } = props;
+
+  if (idMap) {
+    return (
+      <>
+        <Map
+          idMap={idMap}
+        />
+      </>
+    )
+  }
+
+  if (image) {
+    return (
+      <>
+        <CardImage 
+          image={image}
+        />
+      </>
+    )
+  }
+
+  return (
+    <>
+      {custom && custom}
+    </>
+  );
+}
+
+
 const Feature = (props: Props) => {
   const {
     layout='left',
@@ -74,7 +115,7 @@ const Feature = (props: Props) => {
               {action.label}
             </Link>
           )
-      }
+        }
       </div>
     </div>
   );

src/components/feature/FeatureComponent.tsx

-import React from "react";
-import { IGatsbyImageData } from "gatsby-plugin-image";
-
-import Map from "../core/Map";
-import FeatureImage from "./FeatureImage";
-
-
-interface Props {
-  image?: string | IGatsbyImageData;
-  idMap?: number;
-  custom?: JSX.Element;
-}
-
-
-const FeatureComponent = (props: Props) => {
-  const {
-    image,
-    idMap,
-    custom
-  } = props;
-
-  if (idMap) {
-    return (
-      <>
-        <Map
-          idMap={idMap}
-        />
-      </>
-    )
-  }
-
-  if (image) {
-    return (
-      <>
-        <FeatureImage 
-          image={image}
-        />
-      </>
-    )
-  }
-
-  return (
-    <>
-      {custom && custom}
-    </>
-  );
-};
-
-
-export default FeatureComponent;
\ No newline at end of file

src/components/feature/FeatureImage.tsx

-import React from "react";
-import { StaticImage, IGatsbyImageData, GatsbyImage, getImage } from "gatsby-plugin-image";
-
-
-interface Props {
-  image?: string | IGatsbyImageData;
-}
-
-
-const FeatureImage = (props: Props) => {
-  const {
-    image
-  } = props;
-  
-
-  const imageNoAvailable = (
-    <StaticImage 
-      src='../../../images/no-image-available.jpg'
-      alt="no-image-available"
-      className="h-full w-full object-cover"
-    />
-  )
-
-  if (! image || typeof image == 'undefined') {
-    return (
-      <>
-        {imageNoAvailable}
-      </>
-    );
-  }
-
-  if (typeof image == 'string') {
-    return (
-      <>
-        <img 
-          src={image} 
-          alt={image} 
-          className="h-full w-full object-cover"
-        />
-      </>
-    )
-  }
-
-  const img = getImage(image) ;
-  if (typeof img == 'undefined') {
-    return (
-      <>
-        {imageNoAvailable}
-      </>
-    )
-  }
-
-  return (
-    <>
-      <GatsbyImage image={img} alt="gatsby-image" className="h-full w-full object-cover"/>
-    </>
-    
-  )
-};
-
-
-export default FeatureImage;
\ No newline at end of file

src/pages-doc/doc/core/feature.tsx

@@ -17,6 +17,7 @@ function feature(): ReactElement {
           <pre>
             <code>
               {`
+interface FeatureProps {
 title?: string;
 content?: string;
 image?: string | IGatsbyImageData;
@@ -28,7 +29,7 @@ action?: {
   to: string;
 };
 custom?: JSX.Element;
-`}
+}`}
             </code>
           </pre>
         </div>
@@ -54,7 +55,7 @@ custom?: JSX.Element;
           title="Action"
           content="Action description for the Button"
           layout="right"
-          image="link image"
+          image="https://fakeimg.pl/480x480/"
           action={{
             to: '#',
             label: 'Action'