Spaces:
Sleeping
Sleeping
File size: 2,726 Bytes
dd10606 24d8b3c dd10606 76b9248 dd10606 76b9248 dd10606 76b9248 dd10606 24d8b3c dd10606 24d8b3c dd10606 76b9248 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
"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>
);
}
|