generated from polymech/site-template
38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
---
|
|
import { default_image } from "@/app/config.js";
|
|
import Img from "@/components/polymech/image.astro";
|
|
import Translate from "@/components/polymech/i18n.astro";
|
|
|
|
const { title, url, price, model, selected = false } = Astro.props;
|
|
const thumbnail = model?.assets?.renderings[0]?.url || 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="absolute top-4 right-4">{price}</p>
|
|
<p class="mt-1"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|