Dodana strona możliwości dekodera

2025-12-13 14:15:45 +01:00
parent 9caf91fbfb
commit 00d6a57d74
3 changed files with 218 additions and 1 deletions
--- a/src/pages/internet-telewizja/mozliwosci.astro
+++ b/src/pages/internet-telewizja/mozliwosci.astro
@@ -0,0 +1,96 @@
+---
+export const prerender = false;
+
+import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import Markdown from "../../islands/Markdown.jsx";
+import { fetchMozliwosci, type Feature } from "../../lib/mozliwosci";
+
+let items: Feature[] = [];
+let err = "";
+
+try {
+    items = await fetchMozliwosci(60_000);
+} catch (e) {
+    err = e instanceof Error ? e.message : String(e);
+}
+
+function buildMarkdown(it: Feature) {
+    const parts: string[] = [];
+    if (it.teaser) parts.push(`> ${it.teaser}\n`);
+    if (it.description) parts.push(it.description);
+    return parts.join("\n\n").trim();
+}
+---
+
+<DefaultLayout title="Możliwości JAMBOX">
+    <!-- NAGŁÓWEK STRONY – zgodny z FUZ -->
+    <section class="f-section" id="top">
+        <div class="f-section-grid-single">
+            <h1 class="f-section-title">Możliwości JAMBOX</h1>
+            <div class="fuz-markdown max-w-none">
+                <p>Funkcje i udogodnienia dostępne w JAMBOX.</p>
+            </div>
+        </div>
+
+        {
+            err && (
+                <div class="mt-6 max-w-7xl mx-auto text-left rounded-2xl border border-red-300 bg-red-50 p-4">
+                    <p class="font-bold">Nie udało się pobrać danych</p>
+                    <p class="opacity-80">{err}</p>
+                </div>
+            )
+        }
+    </section>
+
+    {
+        !err && (
+            <>
+                {items.map((it, index) => {
+                    const reverse = index % 2 === 1;
+                    const imageUrl = it.screens?.[0] || "";
+                    const hasImage = !!imageUrl;
+
+                    return (
+                        <section class="f-section" id={it.id}>
+                            <div
+                                class={`f-section-grid ${
+                                    hasImage
+                                        ? "md:grid-cols-2"
+                                        : "md:grid-cols-1"
+                                }`}
+                            >
+                                {hasImage && (
+                                    <img
+                                        src={imageUrl}
+                                        alt={it.title}
+                                        class={`f-section-image ${
+                                            reverse
+                                                ? "md:order-1"
+                                                : "md:order-2"
+                                        } rounded-2xl border border-[--f-border-color]`}
+                                        loading="lazy"
+                                        decoding="async"
+                                    />
+                                )}
+
+                                <div
+                                    class={`${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
+                                >
+                                    <h2 class="f-section-title">{it.title}</h2>
+
+                                    <Markdown text={buildMarkdown(it)} />
+
+                                    <div class="f-section-nav">
+                                        <a href="#top" class="btn btn-outline">
+                                            Do góry ↑
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    );
+                })}
+            </>
+        )
+    }
+</DefaultLayout>