Removed duplicate interface

src/components/ui/cards/CardSmall.astro

@@ -4,16 +4,13 @@ import { Image } from "astro:assets";
 import Icon from "@components/ui/icons/Icon.astro";
 import type { CollectionEntry } from "astro:content";
 
-const { productEntry, productLocale = "" } = Astro.props;
+const { product, productLocale = "" } = Astro.props;
-
-interface Props {
-  productEntry: CollectionEntry<"products">;
-  productLocale?: string;
-}
 
 interface Props {
   product: CollectionEntry<"products">;
+  productLocale?: string;
 }
+
 // Define classes to be used with the Image component
 const imageClass =
   "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110";
@@ -21,14 +18,14 @@ const imageClass =
 
 <!-- A clickable card that leads to the details of the product-->
 <a
-  href={productLocale !== "" ? `/${productLocale}/products/${productEntry.slug}/` : `/products/${productEntry.slug}/`}
+  href={productLocale !== "" ? `/${productLocale}/products/${product.slug}/` : `/products/${product.slug}/`}
   data-astro-prefetch
   class="group relative flex h-48 items-end overflow-hidden rounded-xl shadow-lg outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none md:h-80"
 >
   <!-- The product's main image -->
   <Image
-    src={productEntry.data.main.imgCard}
+    src={product.data.main.imgCard}
-    alt={productEntry.data.main.imgAlt}
+    alt={product.data.main.imgAlt}
     draggable={"false"}
     class={imageClass}
     format={"avif"}
@@ -41,6 +38,6 @@ const imageClass =
   <!-- The product's subtitle and the anchor SVG icon-->
   <span
     class="relative mb-3 ml-4 inline-block text-sm font-bold text-neutral-50 transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110 md:ml-5 md:text-lg"
-    >{productEntry.data.description} <Icon name="openInNew" />
+    >{product.data.description} <Icon name="openInNew" />
   </span>
 </a>

src/components/ui/cards/CardWide.astro

@@ -4,16 +4,13 @@ import { Image } from "astro:assets";
 import Icon from "@components/ui/icons/Icon.astro";
 import type { CollectionEntry } from "astro:content";
 
-const { productEntry, productLocale = "" } = Astro.props;
+const { product, productLocale = "" } = Astro.props;
-
-interface Props {
-  productEntry: CollectionEntry<"products">;
-  productLocale?: string;
-}
 
 interface Props {
   product: CollectionEntry<"products">;
+  productLocale?: string;
 }
+
 // Define classes to be used with the Image component
 const imageClass =
   "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110";
@@ -21,14 +18,14 @@ const imageClass =
 
 <!-- The anchor tag is the main container for the product card. When clicked, this leads to the details of the product. -->
 <a
-  href={productLocale !== "" ? `/${productLocale}/products/${productEntry.slug}/` : `/products/${productEntry.slug}/`}
+  href={productLocale !== "" ? `/${productLocale}/products/${product.slug}/` : `/products/${product.slug}/`}
   data-astro-prefetch
   class="group relative flex h-48 items-end overflow-hidden rounded-lg shadow-xl outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none md:col-span-2 md:h-80"
 >
   <!-- The product's main image -->
   <Image
-    src={productEntry.data.main.imgCard}
+    src={product.data.main.imgCard}
-    alt={productEntry.data.main.imgAlt}
+    alt={product.data.main.imgAlt}
     draggable={"false"}
     class={imageClass}
     format={"avif"}
@@ -41,6 +38,6 @@ const imageClass =
   <!-- This container includes product's subtitle and an SVG icon-->
   <span
     class="relative mb-3 ml-4 inline-block text-sm font-bold text-neutral-50 transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110 md:ml-5 md:text-lg"
-    >{productEntry.data.description} <Icon name="openInNew" /></span
+    >{product.data.description} <Icon name="openInNew" /></span
   >
 </a>

src/pages/fr/products/index.astro

@@ -112,9 +112,9 @@ const testimonials = [
         product.map((product, index) => {
           const position = index % 4;
           if (position === 0 || position === 3) {
-            return <CardSmall productEntry={product} productLocale="fr" />;
+            return <CardSmall product={product} productLocale="fr" />;
           } else {
-            return <CardWide productEntry={product} productLocale="fr" />;
+            return <CardWide product={product} productLocale="fr" />;
           }
         })
       }

src/pages/products/index.astro

@@ -109,9 +109,9 @@ const pageTitle: string = `Products | ${SITE.title}`;
         product.map((product, index) => {
           const position = index % 4;
           if (position === 0 || position === 3) {
-            return <CardSmall productEntry={product} />;
+            return <CardSmall product={product} />;
           } else {
-            return <CardWide productEntry={product} />;
+            return <CardWide product={product} />;
           }
         })
       }