Removed duplicate interface
This commit is contained in:
parent
020679f26c
commit
83ad21250d
4 changed files with 18 additions and 24 deletions
|
@ -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;
|
||||
|
||||
interface Props {
|
||||
productEntry: CollectionEntry<"products">;
|
||||
productLocale?: string;
|
||||
}
|
||||
const { product, productLocale = "" } = Astro.props;
|
||||
|
||||
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}
|
||||
alt={productEntry.data.main.imgAlt}
|
||||
src={product.data.main.imgCard}
|
||||
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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
interface Props {
|
||||
productEntry: CollectionEntry<"products">;
|
||||
productLocale?: string;
|
||||
}
|
||||
const { product, productLocale = "" } = Astro.props;
|
||||
|
||||
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}
|
||||
alt={productEntry.data.main.imgAlt}
|
||||
src={product.data.main.imgCard}
|
||||
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>
|
||||
|
|
|
@ -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" />;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue