logan
2d73661dd1
Add the Loki query UI, access policies, ingress insights, alert and registry settings, and their backend APIs. Include the related Kubernetes deployment and collector updates required by the integrated application. Validated with go test ./..., npm run build, and npm run lint.
36 lines
899 B
TypeScript
36 lines
899 B
TypeScript
import { memo } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface PageHeaderProps {
|
|
title?: string
|
|
description?: string
|
|
action?: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* 页面头部组件
|
|
* 标题+描述+操作按钮的统一布局
|
|
* 替换各页面中重复的 header 结构
|
|
*/
|
|
export const PageHeader = memo(function PageHeader({
|
|
title,
|
|
description,
|
|
action,
|
|
className,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
|
|
<div className="min-w-0">
|
|
{title && <h2 className="text-lg font-semibold text-foreground">{title}</h2>}
|
|
{description && (
|
|
<p className={cn('text-sm text-muted-foreground', title && 'mt-0.5')}>{description}</p>
|
|
)}
|
|
</div>
|
|
{action && <div className="flex-shrink-0">{action}</div>}
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default PageHeader
|