Pakiety tematyczne

src/pages/internet-telewizja/pakiety-tematyczne.astro

@@ -0,0 +1,90 @@
+---
+import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import yaml from "js-yaml";
+import fs from "node:fs";
+import Markdown from "../../islands/Markdown.jsx";
+import AddonChannelsGrid from "../../islands/jambox/AddonChannelsModal.jsx";
+import "../../styles/jambox-tematyczne.css";
+
+/** Typy minimalne */
+type AddonPriceRow = {
+  pakiety?: string[] | any;
+  "12m"?: number | string;
+  bezterminowo?: number | string;
+};
+
+type TvAddon = {
+  id?: string;
+  nazwa?: string;
+  tid?: number;
+  typ?: string;
+  opis?: string;
+  image?: string;
+  cena?: AddonPriceRow[];
+};
+
+type TvAddonsDoc = {
+  tytul?: string;
+  opis?: string;
+  cena_opis?: string;
+  dodatki?: TvAddon[];
+};
+
+const doc = yaml.load(
+  fs.readFileSync("./src/content/internet-telewizja/tv-addons.yaml", "utf8"),
+) as TvAddonsDoc;
+
+const pageTitle = doc?.tytul ?? "Dodatkowe pakiety TV";
+const pageDesc = doc?.opis ?? "";
+const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
+---
+
+<DefaultLayout title={pageTitle} description={pageDesc}>
+  <section class="f-section">
+    <div class="f-section-grid-single">
+      <h1 class="f-section-title">{pageTitle}</h1>
+      {pageDesc && <Markdown text={pageDesc} />}
+    </div>
+  </section>
+
+  {addons.map((addon: TvAddon, index: number) => {
+    const isAboveFold = index === 0;
+
+    const hasYamlImage = !!String(addon?.image ?? "").trim();
+    const pkgName = String(addon?.nazwa ?? "").trim();
+
+    const assumeHasMedia = pkgName ? true : hasYamlImage;
+    const anchorId = addon?.tid != null ? String(addon.tid) : undefined;
+
+    return (
+      <section class="f-section">
+        <div
+          class={`f-section-grid f-addon-grid f-addon-section ${
+            assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
+          }`}
+          data-addon-section
+          data-has-media={assumeHasMedia ? "1" : "0"}
+        >
+          {/* TEKST — lewa, od góry */}
+          <div class="f-addon-text" id={anchorId}>
+            {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
+            {addon?.opis && <Markdown text={addon.opis} />}
+          </div>
+
+          {/* MEDIA — prawa */}
+          <div class="f-addon-media">
+            {pkgName ? (
+              <AddonChannelsGrid
+                client:idle
+                packageName={pkgName}
+                fallbackImage={String(addon?.image ?? "")}
+                aboveFold={isAboveFold}
+                title={pkgName}
+              />
+            ) : null}
+          </div>
+        </div>
+      </section>
+    );
+  })}
+</DefaultLayout>