media-manager-next
Version:
Simple media manager to use it for uploading and managing resources (images, files, etc.). It uses MUI material design theme.
62 lines • 2.58 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const Search_1 = __importDefault(require("@mui/icons-material/Search"));
const Search = (0, styles_1.styled)('div')(({ theme }) => ({
height: '80%',
marginTop: 10,
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: (0, styles_1.alpha)(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: (0, styles_1.alpha)(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
}));
const SearchIconWrapper = (0, styles_1.styled)('div')(({ theme }) => ({
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
const StyledInputBase = (0, styles_1.styled)(material_1.InputBase)(({ theme }) => ({
height: '100%',
color: 'inherit',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
}));
const MediaModalNavBar = ({ t }) => {
return (react_1.default.createElement(material_1.AppBar, { position: "static" },
react_1.default.createElement(material_1.Container, { maxWidth: "xl", sx: { display: 'flex' } },
react_1.default.createElement(material_1.Typography, { variant: "h6", noWrap: true, component: "div", padding: 2, sx: { flexGrow: 1 } }, t('navBar.title')),
react_1.default.createElement(Search, null,
react_1.default.createElement(SearchIconWrapper, null,
react_1.default.createElement(Search_1.default, null)),
react_1.default.createElement(StyledInputBase, { placeholder: t('navBar.searchPlaceholder'), inputProps: { 'aria-label': 'search' } })))));
};
exports.default = MediaModalNavBar;
//# sourceMappingURL=MediaModalNavBar.js.map