mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
66 lines
2.5 KiB
Plaintext
66 lines
2.5 KiB
Plaintext
---
|
|
/**
|
|
* ProductTile.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Compact storefront tile for a product line: the first example image (from the
|
|
* product's `images` array), the title, the summary, and a "View details" hint.
|
|
* Wraps the whole tile in a link to the product page.
|
|
*
|
|
* The full image carousel lives on the product page; this is just the storefront
|
|
* teaser. ProductCard.astro (specs-only) is used on the detail pages.
|
|
*/
|
|
import Icon from '@components/Icon.astro';
|
|
import type { Product } from '@data/store-products';
|
|
|
|
interface Props {
|
|
product: Product;
|
|
href: string;
|
|
}
|
|
|
|
const { product, href } = Astro.props;
|
|
const cover = product.images[0];
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
class="group card-interactive flex flex-col gap-4 rounded-2xl border p-4"
|
|
style="border-color: var(--color-border); background: var(--color-surface-raised);"
|
|
>
|
|
{cover && (
|
|
<figure class="relative w-full overflow-hidden rounded-xl" style="border: 1px solid var(--color-border);">
|
|
<img
|
|
src={cover.src}
|
|
alt={cover.alt}
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="aspect-[4/3] w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
|
|
/>
|
|
{product.images.length > 1 && (
|
|
<span
|
|
class="pointer-events-none absolute right-2 top-2 inline-flex items-center gap-1 rounded-full px-2 py-1 font-mono text-xs"
|
|
style="color: var(--color-cream); background: rgba(7,10,28,0.6);"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<rect x="3" y="5" width="18" height="14" rx="2" />
|
|
<circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
|
|
<circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
{product.images.length}
|
|
</span>
|
|
)}
|
|
</figure>
|
|
)}
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<span class="inline-flex items-center gap-2 font-sans text-lg font-bold" style="color: var(--color-text);">
|
|
<Icon name={product.icon} class="h-5 w-5" style="color: var(--color-accent);" />
|
|
{product.title}
|
|
</span>
|
|
<p class="text-sm leading-relaxed" style="color: var(--color-text-muted);">{product.summary}</p>
|
|
<span class="inline-flex items-center gap-1 text-sm font-medium transition-colors" style="color: var(--color-accent);">
|
|
View details
|
|
<Icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
|
|
</span>
|
|
</div>
|
|
</a>
|