Function ScreenSelector

src/App.tsx:641–677

()

    }

    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>
                <hr class="" />
                <div class="p-2 flex flex-wrap justify-center content-start gap-2">
                    <Suspense>
                        <For each={screens()!}>
                            {(device, idx) => (
                                <Screen name={device.name} display_name={`Screen ${idx() + 1}`} selected={screen() ? screen() === device.name : device.is_selected} />
                            )}
                        </For>
                    </Suspense>
                </div>
                <button
                    onClick={() => {
                        set_popup(null);
                        recording.start();
                    }}
                    class="w-full h-full max-h-[3rem] border border-x-transparent font-bold p-2 cursor-pointer"
                >
                    Start Recording
                </button>
            </div>
        )
    }

    function ListModelSection() {
        return (