admin/src/components/PageHeader.tsx

import { Box, Stack, Typography } from "@mui/material";
import type { ReactNode } from "react";

interface Props {
  title: string;
  subtitle?: string;
  action?: ReactNode;
}

export default function PageHeader({ title, subtitle, action }: Props) {
  return (
    <Stack

      direction={{ xs: "column", sm: "row" }}

      justifyContent="space-between"

      alignItems={{ xs: "flex-start", sm: "center" }}

      spacing={2}

      sx={{ mb: 3 }}

    >

      <Box>

        <Typography variant="h4">{title}</Typography>

        {subtitle && (

          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>

            {subtitle}

          </Typography>

        )}

      </Box>

      {action}

    </Stack>
  );
}