71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { ShieldIcon } from "lucide-react";
|
|
import type { Faction } from "@/payload-types";
|
|
import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";
|
|
|
|
interface FactionEntry {
|
|
faction: Faction | number;
|
|
threatLevel: "ally" | "friendly" | "neutral" | "hostile";
|
|
}
|
|
|
|
interface MissionFactionsProps {
|
|
factionsInvolved: FactionEntry[] | null;
|
|
}
|
|
|
|
const threatLevelColors: Record<string, string> = {
|
|
ally: "bg-green-500/20 text-green-400",
|
|
friendly: "bg-blue-500/20 text-blue-400",
|
|
neutral: "bg-yellow-500/20 text-yellow-400",
|
|
hostile: "bg-red-500/20 text-red-400",
|
|
};
|
|
|
|
export function MissionFactions({ factionsInvolved }: MissionFactionsProps) {
|
|
if (!factionsInvolved || factionsInvolved.length === 0) {
|
|
return (
|
|
<Item variant="outline">
|
|
<ItemHeader>
|
|
<div className="flex items-center gap-2">
|
|
<ShieldIcon className="size-4 text-muted-foreground" />
|
|
<ItemTitle>Factions</ItemTitle>
|
|
</div>
|
|
</ItemHeader>
|
|
<ItemContent>
|
|
<p className="text-sm text-muted-foreground italic">No factions assigned.</p>
|
|
</ItemContent>
|
|
</Item>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldIcon className="size-4 text-muted-foreground" />
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
|
Factions Involved
|
|
</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{factionsInvolved.map((entry, index) => {
|
|
const faction = typeof entry.faction === "object" ? entry.faction : null;
|
|
|
|
return (
|
|
<Item key={index} variant="outline">
|
|
<ItemHeader>
|
|
<ItemTitle>{faction?.name ?? `Faction #${entry.faction}`}</ItemTitle>
|
|
<span
|
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${threatLevelColors[entry.threatLevel] ?? "bg-muted text-muted-foreground"}`}
|
|
>
|
|
{entry.threatLevel}
|
|
</span>
|
|
</ItemHeader>
|
|
{faction && (
|
|
<ItemContent>
|
|
<span className="text-xs text-muted-foreground">{faction.type}</span>
|
|
</ItemContent>
|
|
)}
|
|
</Item>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|