bananas-commerce-admin
Version:
What's this, an admin for apes?
86 lines • 3.21 kB
JavaScript
import React from "react";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Stack from "@mui/system/Stack";
import Brand from "../Brand";
const BrandingRoot = styled(Box, {
name: "BananasNavRail",
slot: "Branding",
})(({ theme, ownerState }) => theme.unstable_sx({
display: "flex",
flexDirection: "row",
alignItems: "center",
flexGrow: 1,
width: ownerState.fullWidth ? "100%" : "0",
}));
const StyledBrandBox = styled(Box, {
name: "BananasNavRail",
slot: "BrandBox",
})(({ theme }) => theme.unstable_sx({
minWidth: "100%",
height: "100%",
aspectRatio: "1 / 1",
bgcolor: "rgba(0, 0, 0, 0.5)",
display: "flex",
alignItems: "center",
p: 1.5,
borderRadius: 3,
"&:hover": {
bgcolor: "rgba(0, 0, 0, 0.25)",
},
'&:hover [class$="brandIconBox"]': {
transform: "scale(1.1)",
},
transition: theme.transitions.create(["background-color"], {
duration: theme.transitions.duration.shortest,
}),
}));
const StyledBrandIconBox = styled(Box, {
name: "BananasNavRail",
slot: "BrandIconBox",
})(({ theme }) => theme.unstable_sx({
width: "100%",
transition: theme.transitions.create(["transform"], {
duration: theme.transitions.duration.shortest,
}),
}));
const Branding = ({ logo, title, subtitle, version, onClick, fullWidth, sx, }) => {
const ownerState = { fullWidth };
return (React.createElement(Stack, { sx: {
width: ownerState.fullWidth ? "100%" : "0",
py: 2,
px: 1.5,
minHeight: 84,
} },
React.createElement(BrandingRoot, { ownerState: ownerState, sx: sx },
React.createElement(ButtonBase, { disableRipple: true, sx: {
justifyContent: "flex-start",
width: "100%",
aspectRatio: "1 / 1",
color: "inherit",
}, onClick: onClick },
logo ? (React.createElement(StyledBrandBox, null,
React.createElement(StyledBrandIconBox, null,
React.createElement(Brand, { LogoProps: {
style: {
maxHeight: 32,
},
}, src: logo })))) : (React.createElement(Typography, { color: "inherit", sx: {
fontWeight: "bold",
}, variant: "h4" }, title)),
React.createElement(Box, { sx: {
marginLeft: 10,
"& > *": {
textAlign: "left",
fontSize: "0.75rem",
display: "block",
lineHeight: `1em`,
},
} },
React.createElement(Typography, { color: "inherit" }, subtitle),
React.createElement(Typography, { color: "inherit" }, version))))));
};
export default Branding;
//# sourceMappingURL=Branding.js.map