/* global React */ const { useState } = React; // --------------------------------------------------------------------------- // Leaguecast website UI kit — components // Small, cosmetic recreations. Not production code. // --------------------------------------------------------------------------- const LUCIDE_ICONS = { // stroke-based icons (currentColor stroke, no fill) play: <>, pause: <>, "skip-back": <>, "skip-forward": <>, search: <>, image: <>, "arrow-down": <>, link: <>, loader: <>, "volume-2": <>, list: <>, headphones: <>, }; const Icon = ({ name, size = 18, stroke = 2, style = {} }) => { const content = LUCIDE_ICONS[name]; if (!content) return null; return ( ); }; function Logo({ size = 200 }) { return ( LEAGUECAST ); } function TopNav({ active, onNav, onPlay, onDiscord }) { const items = ["Episodes", "Hosts", "Contact"]; return ( ); } function Hero({ onListen }) { return (
The unofficial League of Legends podcast · Est. 2014

Ten years of builds,
lore, and listener mail.

Pull up a chair. We're a couple of friends who've been talking League every week since forever — patches, champions, tangents, all of it.

); } function EpisodeCard({ ep, onPlay, featured }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "var(--bg-2)", border: `1px solid ${hover ? "rgba(238,213,54,.35)" : "var(--bg-line)"}`, borderRadius: 8, padding: 18, display: "flex", gap: 16, alignItems: "center", boxShadow: hover ? "0 16px 40px rgba(0,0,0,.55)" : "0 4px 14px rgba(0,0,0,.45)", transform: hover ? "translateY(-2px)" : "translateY(0)", transition: "all 180ms cubic-bezier(.22,.61,.36,1)", cursor: "pointer", }} >
Ep {ep.num} · {ep.date}

{ep.title}

{ep.blurb}

{ep.tags.map((t) => ( {t} ))} {ep.duration}
); } function HostCard({ host }) { return (
{host.initials}
{host.name}
{host.role}
{host.main}
); } function Footer() { const links = [ { label: "Apple Podcasts", href: "https://podcasts.apple.com/us/podcast/leaguecast-a-league-of-legends-podcast/id503300852", icon: ( ) }, { label: "Spotify", href: "https://open.spotify.com/show/6sW5H8VZuncKg1Qr01NYX1", icon: ( ) }, { label: "YouTube", href: "https://www.youtube.com/c/Leaguecast", icon: ( ) }, { label: "RSS", href: "https://anchor.fm/s/10da1cb84/podcast/rss", icon: ( ) }, { label: "Discord", href: "https://discord.gg/cg49fGnJRK", icon: }, { label: "Contact us", href: "#", icon: ( ) }, ]; return ( ); } function PlayerBar({ ep, playing, currentTime, duration, rate = 1, onPlayPause, onSeek, onSkip, onCycleRate, thumb }) { if (!ep) return null; const pct = duration ? Math.min(100, (currentTime / duration) * 100) : 0; const fmt = (s) => { s = Math.floor(s || 0); if (s < 0 || !isFinite(s)) return "0:00"; const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const sec = String(s % 60).padStart(2, "0"); if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${sec}`; return `${m}:${sec}`; }; const handleScrub = (e) => { if (!duration) return; const rect = e.currentTarget.getBoundingClientRect(); const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)); onSeek(ratio * duration); }; return (
{ep.title}
{ep.bonus ? "Bonus episode" : `Episode ${ep.num}`} · Leaguecast
{fmt(currentTime)}
{fmt(duration)}
{onCycleRate && ( )}
); } function iconBtn() { return { width: 32, height: 32, borderRadius: 999, background: "transparent", color: "var(--fg-2)", border: 0, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", }; } Object.assign(window, { Logo, TopNav, Hero, EpisodeCard, HostCard, Footer, PlayerBar, Icon });