feat: transform catalogs into field atlas

2026-09-12 15:20:26 +07:00
parent a8b1775169
commit 966000b0b0
17 changed files with 73 additions and 17 deletions
@@ -1,8 +1,9 @@
 ---
-const { eyebrow, title, description } = Astro.props as { eyebrow: string; title: string; description?: string };
+import FishingIcon from "./FishingIcon.astro";
+import FishSilhouette from "./FishSilhouette.astro";
+const { eyebrow, title, description, variant, count } = Astro.props as { eyebrow: string; title: string; description?: string; variant?: "water" | "fish"; count?: number };
 ---
-<section class="catalog-hero content-grid">
-  <span class="overline">{eyebrow}</span>
-  <h1>{title}</h1>
-  {description && <p>{description}</p>}
+<section class:list={["catalog-hero content-grid", { "catalog-hero--illustrated": variant }]}>
+  <div class="catalog-hero__copy"><span class="overline">{eyebrow}</span><h1>{title}</h1>{description && <p>{description}</p>}</div>
+  {variant && <div class="catalog-hero__seal" aria-hidden="true"><span>{variant === "water" ? <FishingIcon name="ripple" size={54} /> : <FishSilhouette name={title} size={92} />}</span>{typeof count === "number" && <><strong>{String(count).padStart(2,"0")}</strong><small>{variant === "water" ? "водоёмов" : "видов рыб"}</small></>}</div>}
 </section>
@@ -0,0 +1,15 @@
+---
+const { name, size = 112 } = Astro.props as { name: string; size?: number };
+const variant = [...name].reduce((sum, char) => sum + (char.codePointAt(0) ?? 0), 0) % 3;
+const shores = [
+  "M8 57C22 42 34 48 47 34S75 20 91 34s16 7 25-3",
+  "M7 48c17-20 34 5 50-10s28-15 38 1 13 14 22 9",
+  "M5 54c14-4 20-24 39-18s27-9 40-14 20 11 33 10",
+];
+---
+<svg class="waterbody-mark" width={size} height={Math.round(size * .62)} viewBox="0 0 124 72" aria-hidden="true">
+  <path class="waterbody-mark__shore" d={shores[variant]} />
+  <path d="M12 61c18-7 31 6 49-2s31-6 51 0" />
+  <path d="M24 68c13-4 25 3 39-2s25-3 37 0" />
+  <circle cx={variant === 1 ? 82 : 51} cy={variant === 2 ? 25 : 30} r="3" />
+</svg>