feat: Update PageHeader component to include action prop for enhanced flexibility

This commit is contained in:
2025-06-05 13:14:16 +02:00
parent d3874d52d0
commit c983ba9882
2 changed files with 6 additions and 5 deletions

View File

@@ -54,8 +54,7 @@ export default function ProjectViewPage({ params }) {
: daysRemaining > 0 : daysRemaining > 0
? `${daysRemaining} days left` ? `${daysRemaining} days left`
: `${Math.abs(daysRemaining)} days overdue`} : `${Math.abs(daysRemaining)} days overdue`}
</Badge> </Badge> <Link href="/projects">
<Link href="/projects">
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
<svg <svg
className="w-4 h-4 mr-2" className="w-4 h-4 mr-2"
@@ -72,7 +71,7 @@ export default function ProjectViewPage({ params }) {
</svg> </svg>
Back to Projects Back to Projects
</Button> </Button>
</Link>{" "} </Link>
<Link href={`/projects/${id}/edit`}> <Link href={`/projects/${id}/edit`}>
<Button variant="secondary">Edit Project</Button> <Button variant="secondary">Edit Project</Button>
</Link> </Link>

View File

@@ -1,13 +1,15 @@
"use client"; "use client";
const PageHeader = ({ title, description, children, className = "" }) => { const PageHeader = ({ title, description, children, action, className = "" }) => {
return ( return (
<div className={`flex justify-between items-start mb-8 ${className}`}> <div className={`flex justify-between items-start mb-8 ${className}`}>
<div className="flex-1"> <div className="flex-1">
<h1 className="text-3xl font-bold text-gray-900">{title}</h1> <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
{description && <p className="text-gray-600 mt-1">{description}</p>} {description && <p className="text-gray-600 mt-1">{description}</p>}
</div> </div>
{children && <div className="ml-6 flex-shrink-0">{children}</div>} {(children || action) && (
<div className="ml-6 flex-shrink-0">{action || children}</div>
)}
</div> </div>
); );
}; };