90 lines
3.1 KiB
JavaScript
90 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Button,
|
|
ToggleButton,
|
|
ToggleButtonGroup,
|
|
Tooltip,
|
|
AppBar,
|
|
Toolbar,
|
|
Container,
|
|
Divider,
|
|
} from "@mui/material";
|
|
import KeyIcon from "@mui/icons-material/Key";
|
|
import HomeIcon from "@mui/icons-material/Home";
|
|
import BrightnessAutoIcon from "@mui/icons-material/BrightnessAuto";
|
|
import LightModeIcon from "@mui/icons-material/LightMode";
|
|
import DarkModeIcon from "@mui/icons-material/DarkMode";
|
|
|
|
function Header({ theme, onThemeChange, currentPage, onPageChange }) {
|
|
return (
|
|
<AppBar position="static" color="default" elevation={1} sx={{ borderBottom: 1, borderColor: "divider" }}>
|
|
<Container maxWidth="xl">
|
|
<Toolbar disableGutters sx={{ display: "flex", justifyContent: "space-between", height: 64 }}>
|
|
{/* Brand/Title */}
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<Typography
|
|
variant="h5"
|
|
noWrap
|
|
component="div"
|
|
sx={{
|
|
fontWeight: 700,
|
|
color: "primary.main",
|
|
letterSpacing: ".05rem",
|
|
}}
|
|
>
|
|
JMESPath Playground
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Right side controls */}
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
|
{/* API Key Management Button */}
|
|
<Tooltip title={currentPage === "main" ? "API Key Management" : "Back to Testing"}>
|
|
<Button
|
|
variant={currentPage === "apikey" ? "contained" : "text"}
|
|
color={currentPage === "apikey" ? "primary" : "primary"}
|
|
size="medium"
|
|
startIcon={currentPage === "main" ? <KeyIcon /> : <HomeIcon />}
|
|
onClick={() => onPageChange(currentPage === "main" ? "apikey" : "main")}
|
|
>
|
|
{currentPage === "main" ? "API Keys" : "Home"}
|
|
</Button>
|
|
</Tooltip>
|
|
|
|
<Divider orientation="vertical" flexItem sx={{ my: 2, mx: 1 }} />
|
|
|
|
{/* Theme switcher */}
|
|
<ToggleButtonGroup
|
|
value={theme}
|
|
exclusive
|
|
onChange={(e, nextTheme) => nextTheme && onThemeChange(nextTheme)}
|
|
aria-label="theme switcher"
|
|
size="small"
|
|
>
|
|
<Tooltip title="Follow system theme">
|
|
<ToggleButton value="auto" aria-label="Auto">
|
|
<BrightnessAutoIcon sx={{ fontSize: "1.2rem" }} />
|
|
</ToggleButton>
|
|
</Tooltip>
|
|
<Tooltip title="Light mode">
|
|
<ToggleButton value="light" aria-label="Light">
|
|
<LightModeIcon sx={{ fontSize: "1.2rem" }} />
|
|
</ToggleButton>
|
|
</Tooltip>
|
|
<Tooltip title="Dark mode">
|
|
<ToggleButton value="dark" aria-label="Dark">
|
|
<DarkModeIcon sx={{ fontSize: "1.2rem" }} />
|
|
</ToggleButton>
|
|
</Tooltip>
|
|
</ToggleButtonGroup>
|
|
</Box>
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
);
|
|
}
|
|
|
|
export default Header;
|