43 lines
1.4 KiB
Text
43 lines
1.4 KiB
Text
|
---
|
||
|
|
import { Image } from "astro:assets";
|
||
|
|
|
||
|
|
import type { CollectionEntry } from "astro:content";
|
||
|
|
|
||
|
|
const { product } = Astro.props;
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
product: CollectionEntry<"products">;
|
||
|
|
}
|
||
|
|
|
||
|
|
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";
|
||
|
|
const AnchorSVG = `
|
||
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="ml-0.5 w-3 h-3 md:w-4 md:h-4 inline pb-0.5">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||
|
|
</svg>`;
|
||
|
|
---
|
||
|
|
|
||
|
|
<a
|
||
|
|
href={"/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"
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src={product.data.main.imgCard}
|
||
|
|
alt={product.data.main.imgAlt}
|
||
|
|
draggable={"false"}
|
||
|
|
class={imageClass}
|
||
|
|
format={"avif"}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-800 via-transparent to-transparent opacity-50"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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"
|
||
|
|
>{product.data.main.subTitle} <Fragment set:html={AnchorSVG} /></span
|
||
|
|
>
|
||
|
|
</a>
|