63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { Outlet } from "react-router";
|
||
import Navbar from "./Navbar";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import api from "../utils/api";
|
||
import CurrentSessionCard from "./CurrentSessionCard";
|
||
import { ISession } from "../types/ISession";
|
||
import { AnimatePresence } from "motion/react";
|
||
import NewButton from "./NewButton";
|
||
import PlusIcon from "./icons/PlusIcon";
|
||
import useModalStore from "../stores/useModalStore";
|
||
import CreateSessionModal from "./modals/CreateSessionModal";
|
||
|
||
function Layout() {
|
||
const { data: currentStartedSessions } = useQuery({
|
||
queryKey: ["sessions", "last-started"],
|
||
queryFn: () =>
|
||
api
|
||
.get("sessions", {
|
||
searchParams: { limit: 3, status: "started" },
|
||
})
|
||
.json<ISession[]>(),
|
||
refetchInterval: 1000,
|
||
});
|
||
|
||
const { setModal, setPosition } = useModalStore();
|
||
|
||
return (
|
||
<div className="flex gap-[1.667vw] overflow-hidden">
|
||
<div className="flex-1"></div>
|
||
<div className="w-[42.5vw] flex flex-col gap-[1.667vw]">
|
||
<Navbar />
|
||
<Outlet />
|
||
</div>
|
||
<div className="flex-1 flex flex-col items-center gap-y-[0.833vw] py-[1.667vw]">
|
||
<AnimatePresence>
|
||
{currentStartedSessions?.map((session, index, { length }) => (
|
||
<CurrentSessionCard
|
||
key={session.id}
|
||
session={session}
|
||
index={length - index}
|
||
/>
|
||
))}
|
||
</AnimatePresence>
|
||
<NewButton
|
||
variant="cta"
|
||
className="w-[18.889vw]"
|
||
onClick={() => {
|
||
setPosition("right");
|
||
setModal(<CreateSessionModal targetServerId={null} />);
|
||
}}
|
||
>
|
||
<span className="w-[1.111vw] h-[1.111vw] flex items-center justify-center">
|
||
<PlusIcon />
|
||
</span>
|
||
Создать сеанс
|
||
</NewButton>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Layout;
|