generated from polymech/site-template
39 lines
1.2 KiB
Plaintext
39 lines
1.2 KiB
Plaintext
---
|
|
import { default_image } from "config/config.js";
|
|
import Translate from "@/components/polymech/i18n.astro";
|
|
import { Img } from "imagetools/components"
|
|
const { title, url, price, model, selected = false } = Astro.props;
|
|
const thumbnail = model?.assets?.renderings[0]?.src || default_image();
|
|
const classes = `group relative bg-white overflow-hidden group rounded-xl ${selected ? "ring-2 ring-orange-500" : ""}`;
|
|
---
|
|
|
|
<div class={classes}>
|
|
<div
|
|
class="p-4 overflow-hidden group-hover:opacity-75 duration-300 transition-all"
|
|
>
|
|
<a href={url} title={title} aria-label={title}>
|
|
<Img
|
|
src={thumbnail}
|
|
alt={title}
|
|
format="avif"
|
|
objectFit="cover"
|
|
placeholder="blurred"
|
|
sizes="(min-width: 220px) 220px"
|
|
breakpoints={{ count: 2, minWidth: 120, maxWidth: 430 }}
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="p-4 text-xs text-neutral-500">
|
|
<div class="flex items-center justify-between space-x-8">
|
|
<h3>
|
|
<a href={url} title={title} aria-label={title}>
|
|
<span aria-hidden="true" class="absolute inset-0"></span>
|
|
<Translate>{title}</Translate>
|
|
</a>
|
|
</h3>
|
|
<p class="top-4 right-4"></p>
|
|
<p class="mt-1"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|