Initial commit: Van's DIY & Bastelbedarf Astro shop

2026-08-02 13:22:55 +02:00
commit 2e340f7a8a
92 changed files with 11022 additions and 0 deletions
@@ -0,0 +1,52 @@
+---
+import type { Product } from "../data/products";
+import type { Locale } from "../i18n/config";
+import { localePrefix } from "../i18n/config";
+import { useTranslations } from "../i18n/ui";
+import { formatPrice } from "../i18n/format";
+
+interface Props { product: Product; lang: Locale }
+const { product, lang } = Astro.props;
+const t = useTranslations(lang);
+
+const badgeLabel: Record<string, string> = {
+  neu: t.badge.neu,
+  bestseller: t.badge.bestseller,
+  sale: t.badge.sale,
+  handgemacht: t.badge.handgemacht,
+};
+const name = product.name[lang];
+const desc = product.beschreibung[lang];
+---
+<a href={`${localePrefix(lang)}/produkt/${product.slug}/`} class="card product-card">
+  <div class="product-media">
+    <div class="img-placeholder" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
+      {t.common.photoSoon}<br /><span class="small">{name}</span>
+    </div>
+    <div class="product-badges">
+      {product.badges.map((b) => (
+        <span class={`badge ${b === "sale" ? "badge-sale" : ""}`}>{badgeLabel[b]}</span>
+      ))}
+      {product.bestand === 0 && <span class="badge badge-sold-out">{t.badge.ausverkauft}</span>}
+    </div>
+  </div>
+  <h3>{name}</h3>
+  <p class="small">{desc.slice(0, 78)}{desc.length > 78 ? "…" : ""}</p>
+  <div class="price-row">
+    {product.preisAlt && <span class="price-old">{formatPrice(product.preisAlt, lang)}</span>}
+    <span class="price">{formatPrice(product.preis, lang)}</span>
+  </div>
+</a>
+
+<style>
+  .product-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; }
+  .product-media { position: relative; }
+  .product-media .img-placeholder { aspect-ratio: 1 / 1; min-height: 0; }
+  .product-badges { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
+  .product-card h3 { font-size: 1.05rem; margin: 0.2rem 0 0; transition: color 0.2s var(--ease); }
+  .product-card:hover h3 { color: var(--c-accent); }
+  .product-card p { margin: 0; }
+  .price-row { margin-top: auto; display: flex; align-items: baseline; gap: 0.6rem; }
+  .price { color: var(--c-accent); font-weight: 700; font-size: 1.15rem; }
+  .price-old { color: var(--c-text-muted); text-decoration: line-through; font-size: 0.9rem; }
+</style>