header and footer

src/Header.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Tooltip,
+  Button,
+  Box,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { useNavigate } from "react-router-dom";
+
+interface HeaderProps {
+  headerTitle: string;
+  isMobile: boolean;
+  onDrawerToggle: () => void;
+  onLogout: () => void;
+  username?: string;
+}
+
+export default function Header({
+  headerTitle,
+  isMobile,
+  onDrawerToggle,
+  onLogout,
+  username,
+}: HeaderProps) {
+  const navigate = useNavigate();
+
+  return (
+    <AppBar
+      position="fixed"
+      color="default"
+      sx={{
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        backdropFilter: "blur(8px)",
+        boxShadow: "none",
+        borderBottom: "1px solid",
+        borderColor: "divider",
+      }}
+    >
+      <Toolbar>
+        {isMobile && (
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={onDrawerToggle}
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+
+        <Typography
+          variant="h6"
+          noWrap
+          sx={{ flexGrow: 1, fontWeight: "bold" }}
+        >
+          {headerTitle}
+        </Typography>
+
+        <Box sx={{ display: { xs: "none", sm: "flex" }, alignItems: "center", mr: 2 }}>
+          <Button
+            color="inherit"
+            onClick={() => navigate("/admin/profile")}
+            sx={{ textTransform: "none", fontWeight: 500 }}
+          >
+            {username}
+          </Button>
+        </Box>
+
+        <Tooltip title="Logout">
+          <IconButton color="inherit" onClick={onLogout}>
+            <LogoutIcon />
+          </IconButton>
+        </Tooltip>
+      </Toolbar>
+    </AppBar>
+  );
+}