aramjonghu-site/frontend/src/pages/Stream.tsx

import { useState, useRef, useEffect, type ReactElement } from "react";

interface StreamInfo {
    id: string;
    label: string;
}

const streams: StreamInfo[] = [
    { id: "aramstream", label: "Aram" },
    { id: "generalstream", label: "General" },
    { id: "gueststream", label: "Guest" },
];

export default function Stream(): ReactElement {
    const [activeStream, setActiveStream] = useState<string>("aramstream");
    const headerRef = useRef<HTMLHeadingElement>(null);

    useEffect(() => {
        headerRef.current?.scrollIntoView({
            behavior: "smooth",
            block: "start",
        });
    }, []);

    return (
        <div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
            <div className="w-full text-center flex flex-col flex-1">
                <h1
                    ref={headerRef}
                    className="text-4xl font-bold text-ctp-mauve mb-6"
                >
                    Stream
                </h1>

                <div className="flex justify-center gap-2 mb-4">
                    {streams.map((s) => (
                        <button
                            key={s.id}
                            onClick={() => setActiveStream(s.id)}
                            className={
                                activeStream === s.id
                                    ? "ui-btn bg-ctp-surface0 text-ctp-text"
                                    : "ui-btn ui-btn:hover"
                            }
                        >
                            {s.label}
                        </button>
                    ))}
                </div>

                <div className="stream-frame w-full mx-auto flex-1 max-h-[85vh]">
                    <iframe
                        src={`https://stream.aramjonghu.nl/${activeStream}`}
                        title={activeStream}
                        allow="autoplay; fullscreen; picture-in-picture"
                        className="w-full h-full border-0 rounded-lg"
                    />
                </div>
            </div>
        </div>
    );
}