feat(18-01): create InitiativeHeader component

- Back button with ChevronLeft icon for dashboard navigation
- Card displaying initiative name, status badge, and dates
- Disabled Actions placeholder button for future Plan 04 work
- Pure presentational component receiving props
This commit is contained in:
Lukas May
2026-02-04 21:32:28 +01:00
parent 305809f0b2
commit 62409a6302

View File

@@ -0,0 +1,52 @@
import { ChevronLeft } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "@/components/StatusBadge";
export interface InitiativeHeaderProps {
initiative: {
id: string;
name: string;
status: string;
createdAt: string;
updatedAt: string;
};
onBack: () => void;
}
export function InitiativeHeader({
initiative,
onBack,
}: InitiativeHeaderProps) {
return (
<div className="flex flex-col gap-4">
{/* Top bar: back button + actions placeholder */}
<div className="flex items-center justify-between">
<Button variant="ghost" size="sm" onClick={onBack}>
<ChevronLeft className="mr-1 h-4 w-4" />
Back to Dashboard
</Button>
<Button variant="outline" size="sm" disabled>
Actions
</Button>
</div>
{/* Initiative metadata card */}
<Card>
<CardContent className="p-6">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-3">
<h1 className="text-2xl font-bold">{initiative.name}</h1>
<StatusBadge status={initiative.status} />
</div>
<p className="text-sm text-muted-foreground">
Created: {new Date(initiative.createdAt).toLocaleDateString()}
{" | "}
Updated: {new Date(initiative.updatedAt).toLocaleDateString()}
</p>
</div>
</CardContent>
</Card>
</div>
);
}