frontend/app/test/page.js

"use client";

import { ActionIcon, LoadingOverlay } from "@mantine/core";
import {
  IconDoorExit,
  IconInfoSquareRoundedFilled,
  IconLayoutSidebarRightCollapse,
  IconLayoutSidebarRightExpand,
} from "@tabler/icons-react";
import { useState } from "react";
import Avatar from "../components/Avatar";
import Card from "../components/Card";
import Controls from "../components/Controls";
import { HUDItem } from "../components/HUDItem";
import { TrayButton } from "../components/TrayButton";

/**
global settings: resolution
<br />
camera settings: simulcast - fps bitrate seed guidance
<br />
seed, guidance, strength, cn scale, cn start, cn end, canny low
threshold, canny_high_threshold, debug canny
 */

export default function Test() {
  const [panelHidden, setPanelHidden] = useState(false);

  return (
    <div className="flex flex-col min-h-screen">
      <div
        className={`flex-1 grid ${
          panelHidden ? "grid-cols-[0px_1fr]" : "grid-cols-[460px_1fr]"
        }`}
      >
        <aside className="overflow-y-auto max-h-screen border-r border-zinc-200 bg-white">
          <Controls />
        </aside>
        <div className="max-h-screen bg-zinc-100 flex items-center justify-center relative">
          <header className="flex flex-row justify-between px-3 absolute top-3 w-full">
            <ActionIcon
              size="lg"
              className="rounded-md bg-zinc-200 hover:bg-indigo-500 hover:text-indigo-50 text-zinc-500 transition-colors duration-300"
              onClick={() => setPanelHidden(!panelHidden)}
            >
              {panelHidden ? (
                <IconLayoutSidebarRightCollapse size={20} stroke={2} />
              ) : (
                <IconLayoutSidebarRightExpand size={20} stroke={2} />
              )}
            </ActionIcon>
            <div className="flex flex-row gap-2">
              <HUDItem label="Expiry" value="3:00" />
              <HUDItem label="FPS" value="0" />
            </div>
          </header>

          <main className="w-full h-full flex flex-col max-w-lg xl:max-w-2xl 2xl:max-w-full 2xl:flex-row items-center justify-center p-6 gap-3">
            <Card>
              <Avatar />
            </Card>
            <Card>
              <LoadingOverlay
                visible={true}
                zIndex={1000}
                className="bg-zinc-300"
              />
            </Card>
          </main>

          <footer className="absolute flex flex-row gap-2 bottom-3 right-3">
            <TrayButton Icon={IconInfoSquareRoundedFilled}>About</TrayButton>
            <TrayButton red Icon={IconDoorExit}>
              Leave
            </TrayButton>
          </footer>
        </div>
      </div>
    </div>
  );
}