36 lines
885 B
TypeScript
36 lines
885 B
TypeScript
import * as React from "react";
|
|
import Box from "@mui/material/Box";
|
|
import Drawer from "@mui/material/Drawer";
|
|
import Button from "@mui/material/Button";
|
|
import { SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
|
|
|
|
interface Props {
|
|
outerContainerSx?: SxProps<Theme>;
|
|
children?: React.ReactNode;
|
|
isOpenDrawer: string;
|
|
drawerNewFieldHC: (str: string) => void;
|
|
}
|
|
|
|
export default function DrawerNewField({
|
|
outerContainerSx: sx,
|
|
children,
|
|
isOpenDrawer: isOpen,
|
|
drawerNewFieldHC,
|
|
}: Props) {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
return (
|
|
<>
|
|
<Drawer
|
|
anchor="right"
|
|
open={Boolean(isOpen)}
|
|
onClose={() => drawerNewFieldHC("")}
|
|
>
|
|
<Box sx={{ width: isMobile ? 320 : 450 }} role="presentation">
|
|
{children}
|
|
</Box>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}
|