Z8MB1E
28a148c06f
- Add campaigns list page with campaign cards - Add missions list page with filtering and mission cards - Add factions list page with faction cards - Add mission detail components: briefing, comms, factions, logistics, objectives, roles - Add MissionFilters for status and type filtering
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { CrosshairIcon } from "lucide-react";
|
|
|
|
interface MissionHeaderProps {
|
|
name: string;
|
|
codeName: string;
|
|
operationType: "main" | "side" | "external";
|
|
status: string;
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
Concept: "bg-muted text-muted-foreground",
|
|
Planning: "bg-muted text-muted-foreground",
|
|
Ready: "bg-blue-500/20 text-blue-400",
|
|
Scheduled: "bg-amber-500/20 text-amber-400",
|
|
Active: "bg-green-500/20 text-green-400",
|
|
Completed: "bg-emerald-500/20 text-emerald-400",
|
|
Cancelled: "bg-red-500/20 text-red-400",
|
|
};
|
|
|
|
const operationTypeColors: Record<string, string> = {
|
|
main: "bg-primary/20 text-primary",
|
|
side: "bg-muted text-muted-foreground",
|
|
external: "bg-purple-500/20 text-purple-400",
|
|
};
|
|
|
|
export function MissionHeader({
|
|
name,
|
|
codeName,
|
|
operationType,
|
|
status,
|
|
}: MissionHeaderProps) {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<CrosshairIcon className="size-4 text-muted-foreground" />
|
|
<span className="font-mono text-xs text-muted-foreground uppercase tracking-wider">
|
|
{codeName}
|
|
</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold tracking-tight">{name}</h1>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span
|
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColors[status] ?? "bg-muted text-muted-foreground"}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
<span
|
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${operationTypeColors[operationType] ?? "bg-muted text-muted-foreground"}`}
|
|
>
|
|
{operationType}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|