eeg_certs/frontend/src/OnlineClassroom/index.tsx

import { Show, createSignal } from "solid-js";
import { Search } from "../certs/Search";
import { Person } from "../types/Person";
import { FilledCard } from "../components/FilledCard";
import { LinkIcon } from "../icons/LinkIcon";
import { ClassroomUserCreation } from "./ClassroomUserCreation";

type TabType = "Vinculate" | "Create";

export function OnlineClassroom() {
    const [person, setPerson] = createSignal<Person | null>(null);

    return (
        <div class="grid grid-cols-[16rem_25rem_1fr]">
            <Search setPerson={setPerson} />
            <div>

                <ClassroomUser person={person()!} />

            </div>
        </div>
    );
}



function ClassroomUser(props: {person: Person}) {
    const [active, setActive] = createSignal<TabType>("Vinculate");

    return (
        <div>
            <FilledCard class="border border-c-outline overflow-hidden">
                <h2 class="p-3 font-bold text-xl">
                    Persona no vinculada:
                </h2>
                <ClassroomTabs active={active()} setActive={setActive} />

                <div class="bg-c-surface">
                    <Show when={active() === "Vinculate"}>
                        <ClassroomVinculation />
                    </Show>
                    <Show when={active() === "Create"}>
                        <ClassroomUserCreation />
                    </Show>
                </div>

            </FilledCard>
        </div>
    );
}

function ClassroomVinculation() {
    return (
        <div>
            <p class="py-2 px-4">
                Vincule un usuario existente:
            </p>
            <ClassroomSingleUser />
            <ClassroomSingleUser />
            <ClassroomSingleUser />
        </div>
    );
}



function ClassroomSingleUser() {
    return (
        <div
            class="hover:bg-c-surface-variant hover:text-c-on-surface-variant transition-colors
                    grid grid-cols-[auto_3rem] gap-4"
        >
            <div class="pl-4 py-2">
                NOMBRE NOMBRE APELLIDO APELLIDO
                <br />
                <div class="grid grid-cols-[auto_10rem]">
                    <span class="font-mono">
                    NNAPELLA
                    </span>
                    <div>
                        registrado:&nbsp;
                        <span class="font-mono">
                            26/05/2023
                        </span>
                    </div>
                </div>
            </div>
            <button
                title="Vincular usuario"
                class="border-2 border-c-transparent hover:border-c-primary transition-colors rounded"
            >
                <LinkIcon fill="var(--c-primary)" />
            </button>
        </div>
    );
}


function ClassroomTabs(props: {active: TabType, setActive: (v: TabType) => void}) {
    const presetsClasses = () => ((props.active === "Vinculate") ? "font-bold border-c-primary" : "border-c-transparent");
    const manualClasses = () => ((props.active === "Create") ? "font-bold border-c-primary" : "border-c-transparent");

    return (
        <div class="grid grid-cols-2">
            <button
                class={`py-2 border-b-4 ${presetsClasses()}`}
                onclick={() => props.setActive("Vinculate")}
            >
                Vincular
            </button>
            <button
                class={`py-2 border-b-4 ${manualClasses()}`}
                onclick={() => props.setActive("Create")}
            >
                Crear
            </button>
        </div>
    );
}