68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
|
import { Paper, PaperProps } from "@material-ui/core";
|
||
|
|
import { makeStyles } from "@saleor/macaw-ui";
|
||
|
|
import clsx from "clsx";
|
||
|
|
import { ReactNode } from "react";
|
||
|
|
|
||
|
|
const useStyles = makeStyles((theme) => ({
|
||
|
|
root: {
|
||
|
|
height: 96,
|
||
|
|
padding: "0 32px",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
},
|
||
|
|
leftColumn: {
|
||
|
|
marginRight: "auto",
|
||
|
|
},
|
||
|
|
rightColumn: {},
|
||
|
|
iconColumn: {
|
||
|
|
marginRight: 24,
|
||
|
|
},
|
||
|
|
appName: { fontSize: 24, margin: 0 },
|
||
|
|
appAuthor: {
|
||
|
|
fontSize: 12,
|
||
|
|
textTransform: "uppercase",
|
||
|
|
color: theme.palette.text.secondary,
|
||
|
|
fontWeight: 500,
|
||
|
|
margin: 0,
|
||
|
|
},
|
||
|
|
bottomMargin: {
|
||
|
|
marginBottom: 32,
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
name: string;
|
||
|
|
author: string;
|
||
|
|
rightColumnContent?: ReactNode;
|
||
|
|
icon?: ReactNode;
|
||
|
|
bottomMargin?: boolean;
|
||
|
|
} & PaperProps;
|
||
|
|
|
||
|
|
export function MainBar({
|
||
|
|
name,
|
||
|
|
author,
|
||
|
|
rightColumnContent,
|
||
|
|
className,
|
||
|
|
icon,
|
||
|
|
bottomMargin,
|
||
|
|
}: Props) {
|
||
|
|
const styles = useStyles();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Paper
|
||
|
|
elevation={0}
|
||
|
|
className={clsx(styles.root, className, {
|
||
|
|
[styles.bottomMargin]: bottomMargin,
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
{icon && <div className={styles.iconColumn}>{icon}</div>}
|
||
|
|
<div className={styles.leftColumn}>
|
||
|
|
<h1 className={styles.appName}>{name}</h1>
|
||
|
|
<h1 className={styles.appAuthor}>{author}</h1>
|
||
|
|
</div>
|
||
|
|
<div className={styles.rightColumn}>{rightColumnContent}</div>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
}
|