import { Box, Tab, Tabs } from "@mui/material"; import { articlesStore, cityStore, languageStore } from "@shared"; import { CreateInformationTab, CreateLeftTab, CreateRightTab, LeaveAgree, } from "@widgets"; import { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; function a11yProps(index: number) { return { id: `sight-tab-${index}`, "aria-controls": `sight-tabpanel-${index}`, }; } import { useBlocker } from "react-router"; export const CreateSightPage = observer(() => { const [value, setValue] = useState(0); const { getCities } = cityStore; const { getArticles } = articlesStore; const handleChange = (_: React.SyntheticEvent, newValue: number) => { setValue(newValue); }; let blocker = useBlocker( ({ currentLocation, nextLocation }) => true && currentLocation.pathname !== nextLocation.pathname ); useEffect(() => { const fetchData = async () => { await getCities(); await getArticles(languageStore.language); }; fetchData(); }, []); return ( <Box sx={{ width: "100%", display: "flex", flexDirection: "column", minHeight: "100vh", z: 10, }} > <Box sx={{ borderBottom: 1, borderColor: "divider", display: "flex", justifyContent: "center", }} > <Tabs value={value} onChange={handleChange} aria-label="sight tabs" sx={{ width: "100%", "& .MuiTabs-flexContainer": { justifyContent: "center", }, }} > <Tab sx={{ flex: 1 }} label="Общая информация" {...a11yProps(0)} /> <Tab sx={{ flex: 1 }} label="Левый виджет" {...a11yProps(1)} /> <Tab sx={{ flex: 1 }} label="Правый виджет" {...a11yProps(2)} /> </Tabs> </Box> <div className="flex-1"> <CreateInformationTab value={value} index={0} /> <CreateLeftTab value={value} index={1} /> <CreateRightTab value={value} index={2} /> </div> {blocker.state === "blocked" ? <LeaveAgree blocker={blocker} /> : null} </Box> ); });