124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
import * as React from "react";
|
|
import Stack from "@mui/material/Stack";
|
|
import Avatar from "@mui/material/Avatar";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import InputBase from "@mui/material/InputBase";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
|
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
|
|
import OptionsMenu from "../OptionsMenu";
|
|
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
|
|
|
|
export default function Header() {
|
|
const [showNotifications, setShowNotifications] = React.useState(false);
|
|
const toggleNotifications = () => {
|
|
setShowNotifications((prev) => !prev);
|
|
};
|
|
const [open, setOpen] = React.useState(true);
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const { user } = useSelector((state: RootState) => state?.profileReducer);
|
|
|
|
React.useEffect(() => {
|
|
dispatch(fetchAdminProfile());
|
|
}, [dispatch]);
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
height: "84px",
|
|
backgroundColor: "#1C1C1C",
|
|
padding: { xs: "20px 12px", sm: "20px 24px" },
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
flexDirection: { xs: "column", sm: "row" },
|
|
}}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={3}
|
|
alignItems="center"
|
|
justifyContent="flex-end"
|
|
sx={{
|
|
width: "100%",
|
|
justifyContent: { xs: "center", sm: "flex-end" },
|
|
marginTop: { xs: 2, sm: 0 },
|
|
}}
|
|
>
|
|
{/* Search Bar */}
|
|
<Box
|
|
sx={{
|
|
// width: { xs: "100%", sm: "360px" },
|
|
height: "44px",
|
|
|
|
borderRadius: "8px",
|
|
border: "1px solid #424242",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "0 12px",
|
|
}}
|
|
>
|
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
|
<InputBase
|
|
sx={{
|
|
marginLeft: 1,
|
|
flex: 1,
|
|
color: "#FFFFFF",
|
|
fontSize: { xs: "12px", sm: "14px" },
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Notification and Profile Section */}
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
alignItems="center"
|
|
sx={{
|
|
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
|
|
}}
|
|
>
|
|
<NotificationsNoneIcon onClick={toggleNotifications} />
|
|
<Avatar
|
|
alt="User Avatar"
|
|
src="/avatar.png"
|
|
sx={{ width: 36, height: 36 }}
|
|
/>
|
|
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
|
{user?.name || "No Admin"}
|
|
</Typography>
|
|
|
|
<OptionsMenu />
|
|
</Stack>
|
|
|
|
{showNotifications && (
|
|
<Box
|
|
sx={{
|
|
p: 2,
|
|
position: "absolute",
|
|
top: "55px",
|
|
right: { xs: "10px", sm: "280px" },
|
|
bgcolor: "#FFFFFF",
|
|
boxShadow: 1,
|
|
borderRadius: 1,
|
|
zIndex: 1300,
|
|
cursor: "pointer",
|
|
width: "250px",
|
|
}}
|
|
>
|
|
{/* <Typography variant="h6" color="text.primary">
|
|
Notifications
|
|
</Typography> */}
|
|
<Typography variant="body2" color="text.secondary">
|
|
No notifications yet
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|