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:
52
packages/web/src/components/InitiativeHeader.tsx
Normal file
52
packages/web/src/components/InitiativeHeader.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user