Zmiana iframe listy kanałow na pobierane lokalnie i parsowane

src/islands/ChannelSwitcher.jsx

@@ -1,19 +1,32 @@
-import { useState } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 
 export default function ChannelSwitcher({ sets = [], title = "" }) {
   const [activeId, setActiveId] = useState(sets[0]?.id);
+  const [channels, setChannels] = useState([]);
 
   const active = sets.find((x) => x.id === activeId);
-  const iframeSrc = `https://www.jambox.pl/iframe-pakiet-logo?p=${active?.p}`;
+
+  useEffect(() => {
+    if (!active) return;
+
+    fetch(`/api/jambox/${active.p}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setChannels(data);
+      })
+      .catch(() => setChannels([]));
+  }, [active]);
 
   return (
     <div class="w-full">
+
+      {/* SWITCHER */}
       <div class="flex justify-center mb-10">
-        <div class="fuz-switch-group">
+        <div class="f-switch-group">
           {sets.map((s) => (
             <button
               type="button"
-              class={`fuz-switch ${activeId === s.id ? "active" : ""}`}
+              class={`f-switch ${activeId === s.id ? "active" : ""}`}
               onClick={() => setActiveId(s.id)}
               title={title}
             >
@@ -23,16 +36,31 @@ export default function ChannelSwitcher({ sets = [], title = "" }) {
         </div>
       </div>
 
-      {/* 🔹 Iframe */}
-      <div class="w-full">
-        <div class="fuz-iframe-wrapper">
-          <iframe
-            title="Lista kanałów"
-            src={iframeSrc}
-            class="fuz-iframe"
-            loading="lazy"
-          ></iframe>
-        </div>
+      {/* LISTA KANAŁÓW */}
+      <div class="f-section-channel">
+
+        {channels.length === 0 && (
+          <p class="text-center col-span-full py-1">
+            Ładowanie…
+          </p>
+        )}
+
+        {channels.map((ch) => (
+          <div
+            class="f-channel-box"
+          >
+            <img
+              src={ch.logo}
+              alt={ch.title}
+              class="h-14 object-contain "
+              loading="lazy"
+            />
+            <p class="text-center text-sm text-[var(--fuz-text)] mt-2">
+              {ch.title}
+            </p>
+          </div>
+        ))}
+
       </div>
 
     </div>