Files
ForbiddenStarsApp/frontend/src/components/BottomBar.tsx
T

48 lines
1.3 KiB
TypeScript

import { Menu, Plus, Users } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useToast } from "../context/ToastContext";
import { useMe } from "../hooks/auth";
export function BottomBar({ onMenu }: { onMenu: () => void }) {
const { data: me } = useMe();
const navigate = useNavigate();
const toast = useToast();
const hasGroup = me?.active_group_id != null;
const activeGroup = me?.groups.find((g) => g.id === me?.active_group_id);
const onCreate = () => {
if (!hasGroup) {
toast.show("Вы не состоите в группе. Создайте или вступите в группу.");
navigate("/group");
return;
}
navigate("/match/new");
};
return (
<nav className="bottom-bar">
<button className="slot" onClick={() => navigate("/group")}>
<Users size={20} />
<span className="name">{activeGroup ? activeGroup.name : "Группа"}</span>
</button>
<div className="spacer" />
<button className="slot" onClick={onMenu} aria-label="Меню">
<Menu size={20} />
<span>Меню</span>
</button>
<button
className="fab"
aria-disabled={!hasGroup}
aria-label="Создать партию"
onClick={onCreate}
>
<Plus size={26} />
</button>
</nav>
);
}