40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface SectionHeaderProps {
|
|
icon: React.ElementType;
|
|
title: string;
|
|
description?: string;
|
|
action?: React.ReactNode;
|
|
color?: string;
|
|
}
|
|
|
|
/**
|
|
* Section header component with icon, title, optional description and action.
|
|
* Used at the top of card sections throughout the app.
|
|
*/
|
|
export default function SectionHeader({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
action,
|
|
color = 'text-primary-blue'
|
|
}: SectionHeaderProps) {
|
|
return (
|
|
<div className="flex items-center justify-between p-5 border-b border-charcoal-outline bg-gradient-to-r from-iron-gray/30 to-transparent">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg bg-iron-gray/50 ${color}`}>
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="text-sm text-gray-500 mt-1 ml-12">{description}</p>
|
|
)}
|
|
</div>
|
|
{action}
|
|
</div>
|
|
);
|
|
} |