69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import Button from "./ui/Button";
|
|
import DisclaimerButton from "./DisclaimerButton";
|
|
import MoreIcon from "./icons/MoreIcon";
|
|
import PrivacyPolicyButton from "./PrivacyPolicyButton";
|
|
import FullScreenButton from "./FullScreenButton";
|
|
import { useState } from "react";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
|
|
function ButtonGroup() {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
|
|
async function handleFullScreenClick() {
|
|
try {
|
|
if (isFullScreen) {
|
|
await document.exitFullscreen();
|
|
} else {
|
|
// Проверяем поддержку полноэкранного режима
|
|
if (!document.body.requestFullscreen) {
|
|
console.warn("Полноэкранный режим не поддерживается");
|
|
return;
|
|
}
|
|
await document.body.requestFullscreen();
|
|
}
|
|
} catch (error) {
|
|
console.error("Ошибка при переключении полноэкранного режима:", error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] md:max-2xl:bottom-6 md:max-2xl:right-6 bottom-8 max-md:pb-8 right-4 max-md:overflow-hidden">
|
|
<AnimatePresence>
|
|
{(innerWidth >= 768 || expanded) && (
|
|
<motion.div
|
|
initial={innerWidth < 768 ? { y: "100%", opacity: 0 } : {}}
|
|
animate={innerWidth < 768 ? { y: "0%", opacity: 1 } : {}}
|
|
exit={innerWidth < 768 ? { y: "100%", opacity: 0 } : {}}
|
|
transition={{ bounce: 0 }}
|
|
className="max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 max-md:flex-col"
|
|
>
|
|
<DisclaimerButton />
|
|
<PrivacyPolicyButton />
|
|
<FullScreenButton
|
|
isFullScreen={isFullScreen}
|
|
onFullScreenChange={setIsFullScreen}
|
|
onClick={handleFullScreenClick}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
<Button
|
|
onlyIcon
|
|
variant="secondary"
|
|
className="absolute md:hidden right-4 bottom-4"
|
|
onClick={() => setExpanded((prev) => !prev)}
|
|
>
|
|
<span className="size-5">
|
|
{expanded ? <CloseIcon /> : <MoreIcon />}
|
|
</span>
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ButtonGroup;
|