@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
56 lines • 2.14 kB
JavaScript
import { useContext } from "react";
import { tokens } from "../../theme/Theme";
import { ColorModeContext } from "../../theme/Theme";
import { Box, IconButton, useTheme } from "@mui/material";
import InputBase from "@mui/material/InputBase";
import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
import SearchIcon from "@mui/icons-material/Search";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Topbar = function Topbar() {
// Theme and color settings//
var theme = useTheme();
var colors = tokens(theme.palette.mode);
var colorMode = useContext(ColorModeContext);
return /*#__PURE__*/_jsxs(Box, {
display: "none",
justifyContent: "space-between",
p: 2,
children: [/*#__PURE__*/_jsxs(Box, {
display: "flex"
// display="none"
,
backgroundColor: colors.primary[400],
borderRadius: "3px",
children: [/*#__PURE__*/_jsx(InputBase, {
sx: {
ml: 2,
flex: 1
},
placeholder: "Search"
}), /*#__PURE__*/_jsx(IconButton, {
type: "button",
sx: {
p: 1
},
children: /*#__PURE__*/_jsx(SearchIcon, {})
})]
}), /*#__PURE__*/_jsxs(Box, {
display: "flex",
children: [/*#__PURE__*/_jsx(IconButton, {
onClick: colorMode.toggleColorMode,
children: theme.palette.mode === "dark" ? /*#__PURE__*/_jsx(DarkModeOutlinedIcon, {}) : /*#__PURE__*/_jsx(LightModeOutlinedIcon, {})
}), /*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(NotificationsOutlinedIcon, {})
}), /*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {})
}), /*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(PersonOutlinedIcon, {})
})]
})]
});
};
export default Topbar;