You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
773 B
32 lines
773 B
2 years ago
|
import { createStyles, Group } from "@mantine/core";
|
||
|
import { FunctionComponent } from "react";
|
||
|
import ToolboxButton, { ToolboxMutateButton } from "./Button";
|
||
|
|
||
|
const useStyles = createStyles((theme) => ({
|
||
|
group: {
|
||
|
backgroundColor:
|
||
|
theme.colorScheme === "light"
|
||
|
? theme.colors.gray[3]
|
||
|
: theme.colors.dark[5],
|
||
|
},
|
||
|
}));
|
||
|
|
||
|
declare type ToolboxComp = FunctionComponent & {
|
||
|
Button: typeof ToolboxButton;
|
||
|
MutateButton: typeof ToolboxMutateButton;
|
||
|
};
|
||
|
|
||
|
const Toolbox: ToolboxComp = ({ children }) => {
|
||
|
const { classes } = useStyles();
|
||
|
return (
|
||
|
<Group p={12} position="apart" className={classes.group}>
|
||
|
{children}
|
||
|
</Group>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
Toolbox.Button = ToolboxButton;
|
||
|
Toolbox.MutateButton = ToolboxMutateButton;
|
||
|
|
||
|
export default Toolbox;
|