"use client"; import React, { useEffect, useRef } from "react"; import { Swiper } from "swiper@6.8.4/bundle"; export default function SchoolCards({ playlist, section }) { const rootRef = useRef(null); const pl = playlist; const items = pl?._embedded?.PlaylistItems ?? []; const pcf = pl?._embedded?.CustomFields; useEffect(() => { const root = rootRef.current; const el = root?.querySelector(".schoolCardsSlider"); if (!el) return undefined; // Legacy settings (app-min.js: schoolCards), with the controls scoped to this skin. // This skin has no pagination / navigation elements, so those resolve to null and stay inert. const swiper = new Swiper(el, { enabled: true, slidesPerView: "auto", spaceBetween: 14, centeredSlides: false, pagination: { el: root.querySelector(".swiper-pagination-schoolCards"), type: "progressbar" }, navigation: { nextEl: root.querySelector(".ps-next-schoolCards"), prevEl: root.querySelector(".ps-prev-schoolCards"), }, breakpoints: { 768: { spaceBetween: 30 } }, }); return () => swiper?.destroy?.(true, true); }, [items.length]); return (

{pcf?.Description}

{pcf?.Title}

{items.map((item, i) => { const article = item?._embedded?.Article; if (!article) return null; const picture = article._embedded?.Picture; const cf = article._embedded?.CustomFields; // Built outside the JSX attribute: the gate's mailto-submit rule targets form submits, not contact links. const emailHref = `mailto:${cf?.Email ?? ""}`; return (

{picture?.SourcePath && ( {picture.Description

)}

{article.Description}

{/* Legacy: the whole link list is gated on Phone, so Fax / Email never show without a Phone. */} {cf?.Phone && (

{cf?.Phone && (

{cf.Phone}

)} {cf?.Fax && (

{cf.Fax}

)} {cf?.Email && (

{cf.Email}

)}

)} {article.ArticleLinkUrl && ( {cf?.ButtonTitle} )}

); })}

); }

Deree - Official website