@nestbotics/nct_frontend_common_components/dist/components/common/Header.esm.js

A collection of reusable React components with theme management and styling utilities

import React, { useContext, useEffect, useState } from 'react';
import { Button, IconButton, Typography, useTheme, Modal, TextField, Box, Tooltip } from "@mui/material";
import { tokens } from "../../theme/Theme";
import { userDataContext } from '../../context/UserDataProvider';
import axios from 'axios';
import { useNavigate } from "react-router-dom";
import { CssBaseline, ThemeProvider } from "@mui/material";
import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined";
import { ColorModeContext } from "../../theme/Theme";
// Optional toast import - fallback to console if not available
var toast;
try {
  toast = require('react-hot-toast').toast;
} catch (e) {
  toast = {
    success: function success(message) {
      return console.log('Success:', message);
    },
    error: function error(message) {
      return console.error('Error:', message);
    },
    loading: function loading(message) {
      return console.log('Loading:', message);
    }
  };
}

// Optional toastify CSS import
try {
  require('react-toastify/dist/ReactToastify.css');
} catch (e) {
  // CSS not available, continue without it
}
import Profile from "./DropdownAccount";
import dayjs from 'dayjs';
import Cookies from 'js-cookie';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Header = function Header(_ref) {
  var title = _ref.title,
    subtitle = _ref.subtitle;
  var theme = useTheme();
  var colors = tokens(theme.palette.mode);
  var colorMode = useContext(ColorModeContext);
  var _useContext = useContext(userDataContext),
    user = _useContext.user;
  // console.log(theme.palette.mode)
  return (
    /*#__PURE__*/
    // Header Component of Dashboard
    _jsxs(Box, {
      mb: "4px",
      sx: {
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        backgroundColor: '#200f30eb',
        paddingX: "10px"
      },
      children: [/*#__PURE__*/_jsxs(Box, {
        children: [/*#__PURE__*/_jsx(Typography, {
          variant: "h1"
          // color={colors.grey[100]}
          ,
          fontWeight: "bold",
          sx: {
            fontWeight: "light",
            color: 'white'
          },
          children: title
        }), /*#__PURE__*/_jsx(Typography, {
          variant: "h5",
          color: colors.greenAccent[400],
          children: subtitle
        })]
      }), /*#__PURE__*/_jsx(Box, {
        children: /*#__PURE__*/_jsxs(Button, {
          sx: {
            backgroundColor: colors.blueAccent[700],
            color: colors.grey[100],
            fontSize: "14px",
            fontWeight: "bold",
            padding: "10px 20px",
            display: "none"
          },
          children: [/*#__PURE__*/_jsx(DownloadOutlinedIcon, {
            sx: {
              mr: "10px"
            }
          }), "Download Reports"]
        })
      }), /*#__PURE__*/_jsxs(Box, {
        display: "flex",
        alignItems: "baseline",
        justifyContent: "center",
        mr: "10px",
        children: [/*#__PURE__*/_jsx(IconButton, {
          onClick: colorMode.toggleColorMode
        }), /*#__PURE__*/_jsx(IconButton, {
          children: /*#__PURE__*/_jsx(Tooltip, {
            title: "Notifications",
            arrow: true,
            children: /*#__PURE__*/_jsx(NotificationsOutlinedIcon, {
              style: {
                fontSize: "1.84rem",
                color: 'white'
              }
            })
          })
        })]
      })]
    })
  );
};
export default Header;