tianji/src/client/components/CommonHeader.tsx
2024-04-07 19:43:05 +08:00

30 lines
809 B
TypeScript

import React from 'react';
import { TipIcon } from './TipIcon';
interface CommonHeaderProps {
title: string;
desc?: string;
tip?: React.ReactNode;
actions?: React.ReactNode;
}
export const CommonHeader: React.FC<CommonHeaderProps> = React.memo((props) => {
return (
<div className="flex w-full items-center">
<div className="flex flex-1 items-center">
<h1 className="text-xl font-bold">{props.title}</h1>
{props.desc && (
<span className="text-muted-foreground ml-2 self-end text-sm">
{props.desc}
</span>
)}
{props.tip && <TipIcon className="ml-1" content={props.tip} />}
</div>
{props.actions && <div className="ml-auto">{props.actions}</div>}
</div>
);
});
CommonHeader.displayName = 'CommonHeader';