Function Screen

src/App.tsx:642–652

(props: P)

    function ScreenSelector() {
        function Screen<P extends { name: string; display_name: string; selected?: boolean }>(props: P) {
            const [preview] = createInvokeResource<string>("preview_screen", { deviceName: props.name });

            return <button class={`rounded p-2 outline outline-0 ${props.selected ? "bg-blue-50 !outline-2 outline-blue-300" : "hover:bg-blue-50 hover:outline-2 hover:outline-gray-300"}`}
            onClick={(_) => {
                set_screen(props.name);
            }}>
                <img class="max-w-64 rounded" src={`data:image/png;base64,${preview()}`}/>
                <span class="text-sm">{props.display_name}</span>
            </button>
        }
        return (
            <div class="flex flex-col">
                <h2 class="p-2 text-xl font-bold h-fit">Select your screen</h2>