85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import FlashIcon from "./icons/FlashIcon";
|
||
import { Session } from "../types/ISession";
|
||
import Button from "./Button";
|
||
import ChevronRightIcon from "./icons/ChevronRightIcon";
|
||
import { motion } from "motion/react";
|
||
import CurrentSessionModal from "./modals/CurrentSessionModal";
|
||
import useModalStore from "../stores/useModalStore";
|
||
import EndSessionModal from "./modals/EndSessionModal";
|
||
|
||
function CurrentSessionCard({
|
||
session,
|
||
index,
|
||
}: {
|
||
session: Session;
|
||
index: number;
|
||
}) {
|
||
const { setModal } = useModalStore();
|
||
|
||
// const queryClient = useQueryClient();
|
||
|
||
// const { mutate: endSession, isPending } = useMutation({
|
||
// mutationKey: ["sessions", session.id],
|
||
// mutationFn: () =>
|
||
// api.put(`sessions/${session.id}`, { json: { status: "ending" } }),
|
||
// onMutate: () => {
|
||
// queryClient.invalidateQueries({ queryKey: ["sessions"] });
|
||
// queryClient.invalidateQueries({ queryKey: ["last-started"] });
|
||
// queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||
// },
|
||
// onSuccess: () => {
|
||
// queryClient.invalidateQueries({ queryKey: ["last-sessions"] });
|
||
// },
|
||
// });
|
||
|
||
return (
|
||
<motion.div
|
||
key={session.id}
|
||
layout
|
||
initial={{ x: "100%" }}
|
||
animate={{ x: "0%" }}
|
||
exit={{ x: "100%" }}
|
||
transition={{ bounce: 0, delay: index * 0.1 }}
|
||
className="p-[1.389vw] rounded-[1.667vw] bg-white w-[18.889vw] flex flex-col gap-[0.833vw] shadow-[0px_4px_40px_0_rgba(0,0,0,0.05),0px_2px_2px_0_rgba(0,0,0,0.05)]"
|
||
>
|
||
<div
|
||
className="flex justify-between gap-[0.833vw] items-center cursor-pointer"
|
||
onClick={() => {
|
||
if (session.status === "started") {
|
||
setModal(<CurrentSessionModal session={session} />);
|
||
}
|
||
}}
|
||
>
|
||
<span className="size-[1.111vw] text-[#7B60F3]">
|
||
<FlashIcon />
|
||
</span>
|
||
<div className="flex flex-col items-center gap-y-[0.278vw]">
|
||
<p className="button-m font-medium text-[#7B60F3] text-center">
|
||
Текущий сеанс
|
||
</p>
|
||
<div className="flex items-center gap-[0.278vw]">
|
||
<p className="caption-s font-medium text-[#7D7D7D]">
|
||
{session.server.name}
|
||
</p>
|
||
<div className="size-[0.139vw] bg-[#7D7D7D] rounded-full" />
|
||
<p className="caption-s font-medium text-[#7D7D7D]">
|
||
{session.owner.fullname}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<span className="size-[1.111vw] text-[#7D7D7D]">
|
||
<ChevronRightIcon />
|
||
</span>
|
||
</div>
|
||
<Button
|
||
variant="critical"
|
||
onClick={() => setModal(<EndSessionModal session={session} />)}
|
||
>
|
||
Завершить сеанс
|
||
</Button>
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
export default CurrentSessionCard;
|