src/components/page/PageHeader.tsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Box, Group, Stack,Text, Title } from '@mantine/core';
import { type FC } from 'react';

type PageHeaderProps = {
  title: string;
  desc?: string;
  extra?: React.ReactNode;
};

const PageHeader: FC<PageHeaderProps> = (props) => {
  const { title, desc, extra } = props;
  return (
    <Box py="md" mb="lg">
      <Group justify="space-between" align="center">
        <Stack gap="xs">
          <Title order={2}>{title}</Title>
          {desc && (
            <Text c="gray" size="sm">
              {desc}
            </Text>
          )}
        </Stack>
        {extra}
      </Group>
    </Box>
  );
};

export default PageHeader;