81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { MoonOutlined, SunOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { Button, Flex, Image, Layout, Switch, Tooltip } from "antd";
|
|
import { ReactNode } from "react";
|
|
|
|
import { toggleTheme } from "features/theme/themeSlice.ts";
|
|
import useBreakPoint from "hooks/useBreakPoint.ts";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
|
import { colors, ProBlack2 } from "ThemeConstants.ts";
|
|
import LangSelect from "./components/langSelect/LangSelect.tsx";
|
|
import HeaderNav from "./HeaderNav.tsx";
|
|
import "./styles.css";
|
|
|
|
const { Content } = Layout;
|
|
type AppLayoutProps = {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export const AppLayout = ({ children }: AppLayoutProps) => {
|
|
const dispatch = useAppDispatch();
|
|
const { t } = useTranslation();
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const { isDesktop } = useBreakPoint();
|
|
|
|
return (
|
|
<>
|
|
<Layout
|
|
style={{
|
|
minHeight: "100vh",
|
|
}}
|
|
>
|
|
{isDesktop && (
|
|
<HeaderNav className="header-nav">
|
|
<Flex align="center" gap="middle">
|
|
<Tooltip>
|
|
<Button
|
|
type="text"
|
|
icon={<UserOutlined />}
|
|
className="user-icon"
|
|
/>
|
|
</Tooltip>
|
|
</Flex>
|
|
|
|
<Flex align="center" gap="middle">
|
|
<Tooltip title={t("language")}>
|
|
<div style={{ position: "relative", top: -26 }}>
|
|
<LangSelect />
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Theme">
|
|
<Switch
|
|
checkedChildren={<MoonOutlined />}
|
|
unCheckedChildren={<SunOutlined />}
|
|
checked={themeName === "light" ? true : false}
|
|
onClick={() => dispatch(toggleTheme())}
|
|
style={{
|
|
background:
|
|
themeName === "dark" ? colors.primary : ProBlack2,
|
|
borderRadius: "12px",
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
|
|
<Image
|
|
src="/me.png"
|
|
alt="user profile photo"
|
|
height={40}
|
|
width={40}
|
|
className="user-profile-image"
|
|
preview={false}
|
|
/>
|
|
</Flex>
|
|
</HeaderNav>
|
|
)}
|
|
<Content>{children}</Content>
|
|
</Layout>
|
|
</>
|
|
);
|
|
};
|