Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -16,30 +16,33 @@ interface Props {
|
||||
|
||||
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
|
||||
return (
|
||||
<div className="flex items-start justify-between mb-6 gap-4">
|
||||
<div className="min-w-0">
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, fontSize: 12, color: 'var(--text-3)' }}>
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
|
||||
{i > 0 && <ChevronLeftIcon style={{ width: 12, height: 12 }} />}
|
||||
{crumb.to ? (
|
||||
<Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
|
||||
<Link to={crumb.to} style={{ color: 'var(--text-3)', textDecoration: 'none' }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: 600 }}>{crumb.label}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
|
||||
<h1 className="section-title">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
|
||||
<p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div className="shrink-0">{action}</div>}
|
||||
{action && <div style={{ flexShrink: 0 }}>{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user