54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { ProgressLine } from '@/components/shared/ux/ProgressLine';
|
|
|
|
interface AdminHeaderPanelProps {
|
|
title: string;
|
|
description?: string;
|
|
actions?: React.ReactNode;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
/**
|
|
* AdminHeaderPanel
|
|
*
|
|
* Semantic header for admin pages.
|
|
* Includes title, description, actions, and a progress line for loading states.
|
|
*/
|
|
export function AdminHeaderPanel({
|
|
title,
|
|
description,
|
|
actions,
|
|
isLoading = false
|
|
}: AdminHeaderPanelProps) {
|
|
return (
|
|
<Box position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Box>
|
|
<Heading level={1} weight="bold" color="text-white">
|
|
{title}
|
|
</Heading>
|
|
{description && (
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
{actions && (
|
|
<Stack direction="row" align="center" gap={3}>
|
|
{actions}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
<Box position="absolute" bottom="0" left="0" w="full">
|
|
<ProgressLine isLoading={isLoading} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|