feat(campaigns): redesign campaign detail page with cover hero and mission thumbnails
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
parent
11afd905f5
commit
cce00861c2
1 changed files with 210 additions and 191 deletions
|
|
@ -2,7 +2,7 @@ import config from "@payload-config";
|
|||
import { getPayload } from "payload";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import type { Campaign, Faction, Mission } from "@/payload-types";
|
||||
import type { Campaign, Faction, Media, Mission } from "@/payload-types";
|
||||
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
|
|
@ -13,13 +13,7 @@ import {
|
|||
TargetIcon,
|
||||
UsersIcon,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemHeader,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item";
|
||||
import { Item, ItemContent, ItemDescription, ItemHeader, ItemTitle } from "@/components/ui/item";
|
||||
|
||||
interface CampaignDetailPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
|
|
@ -48,9 +42,7 @@ const missionStatusColors: Record<string, string> = {
|
|||
Cancelled: "bg-red-500/20 text-red-400",
|
||||
};
|
||||
|
||||
export default async function CampaignDetailPage({
|
||||
params,
|
||||
}: CampaignDetailPageProps) {
|
||||
export default async function CampaignDetailPage({ params }: CampaignDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const payload = await getPayload({ config });
|
||||
|
||||
|
|
@ -58,7 +50,7 @@ export default async function CampaignDetailPage({
|
|||
.findByID({
|
||||
collection: "campaigns",
|
||||
id: Number(id),
|
||||
depth: 0,
|
||||
depth: 1,
|
||||
})
|
||||
.catch(() => null);
|
||||
|
||||
|
|
@ -66,6 +58,12 @@ export default async function CampaignDetailPage({
|
|||
notFound();
|
||||
}
|
||||
|
||||
const coverImage =
|
||||
typeof campaign.coverImage === "object" && campaign.coverImage !== null
|
||||
? (campaign.coverImage as Media)
|
||||
: null;
|
||||
const coverImageUrl = coverImage?.url ?? null;
|
||||
|
||||
const [missionsRes, factionsRes] = await Promise.all([
|
||||
payload
|
||||
.find({
|
||||
|
|
@ -82,6 +80,7 @@ export default async function CampaignDetailPage({
|
|||
classification: true,
|
||||
ownershipAndStatus: true,
|
||||
missionRoles: true,
|
||||
coverImage: true,
|
||||
},
|
||||
})
|
||||
.catch(() => ({ docs: [] })),
|
||||
|
|
@ -120,200 +119,220 @@ export default async function CampaignDetailPage({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="p-5 flex flex-col gap-6 max-w-7xl">
|
||||
<Link
|
||||
href="/intelligence/campaigns"
|
||||
className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
|
||||
>
|
||||
<ArrowLeftIcon className="size-3" />
|
||||
Back to Campaigns
|
||||
</Link>
|
||||
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShieldIcon className="size-5 text-muted-foreground" />
|
||||
<h1 className="text-lg font-semibold">{campaign.name}</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
{campaign.status === "inProgress"
|
||||
? "In Progress"
|
||||
: campaign.status.charAt(0).toUpperCase() +
|
||||
campaign.status.slice(1)}
|
||||
</span>
|
||||
{startDate && (
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<CalendarDaysIcon className="size-3" />
|
||||
{startDate}
|
||||
{endDate ? ` — ${endDate}` : " — Present"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<header className="relative min-h-[500px] w-full overflow-hidden bg-background">
|
||||
<div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
|
||||
<Link
|
||||
href="/intelligence/campaigns"
|
||||
className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
<ArrowLeftIcon className="size-3" />
|
||||
Back to Campaigns
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{coverImageUrl ? (
|
||||
<img
|
||||
src={coverImageUrl}
|
||||
alt=""
|
||||
fetchPriority="high"
|
||||
className="absolute inset-0 size-full object-cover opacity-70"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-muted/40 to-background" />
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />
|
||||
|
||||
<p className="text-sm text-muted-foreground">{campaign.summary}</p>
|
||||
<div className="absolute top-4 right-4 z-20 flex gap-2">
|
||||
<span
|
||||
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
{campaign.status === "inProgress"
|
||||
? "In Progress"
|
||||
: campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||||
{/* ── Main Content (2/3) ──────────────────────────── */}
|
||||
<div className="xl:col-span-2 flex flex-col gap-6">
|
||||
{campaign.description && (
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<ItemTitle>Description</ItemTitle>
|
||||
</ItemHeader>
|
||||
<ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
|
||||
<RichText data={campaign.description} />
|
||||
</ItemContent>
|
||||
</Item>
|
||||
)}
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Missions
|
||||
</h2>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{missions.length} mission{missions.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 md:p-10 lg:p-12 text-center">
|
||||
<h1
|
||||
id="campaign-title"
|
||||
className="text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
|
||||
>
|
||||
{campaign.name}
|
||||
</h1>
|
||||
<p className="mt-3 max-w-3xl text-lg leading-relaxed text-white/80">{campaign.summary}</p>
|
||||
{(startDate || endDate) && (
|
||||
<div className="mt-6 flex items-center gap-2 text-sm text-white/70">
|
||||
<CalendarDaysIcon className="size-4 text-white/60" />
|
||||
{startDate && <span>{startDate}</span>}
|
||||
{startDate && endDate && <span>—</span>}
|
||||
{endDate ? <span>{endDate}</span> : startDate ? <span>Present</span> : null}
|
||||
</div>
|
||||
{missions.length > 0 ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
{missions.map((mission) => (
|
||||
<Link
|
||||
key={mission.id}
|
||||
href={`/intelligence/missions/${mission.id}`}
|
||||
>
|
||||
<Item
|
||||
variant="outline"
|
||||
className="cursor-pointer group transition-all duration-200 hover:scale-[1.01]"
|
||||
>
|
||||
<ItemHeader>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{mission.codeName}
|
||||
</span>
|
||||
<ItemTitle>{mission.name}</ItemTitle>
|
||||
</div>
|
||||
<span
|
||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${
|
||||
missionStatusColors[
|
||||
mission.ownershipAndStatus.status
|
||||
] ?? "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{mission.ownershipAndStatus.status}
|
||||
</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemDescription className="line-clamp-1">
|
||||
{mission.summary}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No missions in this campaign yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||||
{/* ── Main Content (2/3) ──────────────────────────── */}
|
||||
<div className="xl:col-span-2 flex flex-col gap-6">
|
||||
{campaign.description && (
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<ItemTitle>Description</ItemTitle>
|
||||
</ItemHeader>
|
||||
<ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
|
||||
<RichText data={campaign.description} />
|
||||
</ItemContent>
|
||||
</Item>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ── Right Sidebar (1/3) ─────────────────────────── */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Campaign Stats */}
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<TargetIcon className="size-4 text-muted-foreground" />
|
||||
<ItemTitle>Campaign Stats</ItemTitle>
|
||||
<section className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Missions
|
||||
</h2>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{missions.length} mission{missions.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Total Missions</span>
|
||||
<span className="font-semibold">{missions.length}</span>
|
||||
</div>
|
||||
{Object.entries(statusCounts).map(([status, count]) => (
|
||||
<div key={status} className="flex justify-between text-sm">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`size-2 rounded-full ${missionStatusColors[status]?.split(" ")[0] ?? "bg-muted"}`}
|
||||
/>
|
||||
<span className="text-muted-foreground">{status}</span>
|
||||
</span>
|
||||
<span className="font-mono">{count}</span>
|
||||
</div>
|
||||
))}
|
||||
{campaign.startDate && (
|
||||
<div className="flex justify-between text-sm pt-1 border-t border-border/50">
|
||||
<span className="text-muted-foreground">Duration</span>
|
||||
<span>
|
||||
{startDate}
|
||||
{endDate ? ` — ${endDate}` : " — Present"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
|
||||
{/* Faction Roster */}
|
||||
{factions.length > 0 && (
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<UsersIcon className="size-4 text-muted-foreground" />
|
||||
<ItemTitle>Faction Roster</ItemTitle>
|
||||
</div>
|
||||
<Link
|
||||
href="/intelligence/factions"
|
||||
className="text-xs text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
View all
|
||||
</Link>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
{missions.length > 0 ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
{factions.map((faction) => (
|
||||
<Link
|
||||
key={faction.id}
|
||||
href="/intelligence/factions"
|
||||
className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
|
||||
>
|
||||
<ShieldIcon className="size-4 text-muted-foreground shrink-0" />
|
||||
<div className="flex flex-col gap-0.5 min-w-0 flex-1">
|
||||
<span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
|
||||
{faction.name}
|
||||
</span>
|
||||
<span
|
||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded w-fit ${factionTypeColors[faction.type] ?? "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
{faction.type === "majorFaction"
|
||||
? "Major"
|
||||
: faction.type === "minorFaction"
|
||||
? "Minor"
|
||||
: faction.type}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
|
||||
{missions.map((mission) => (
|
||||
<Link key={mission.id} href={`/intelligence/missions/${mission.id}`}>
|
||||
<Item
|
||||
variant="outline"
|
||||
className="cursor-pointer group transition-all duration-200 hover:scale-[1.01] group relative border border-transparent hover:border-white/75"
|
||||
>
|
||||
<div className="absolute inset-0 pointer-events-none opacity-25 overflow-hidden after:bg-linear-0 after:bg-linear-180 after:from-transparent after:to-black/42 after:inset-0 after:z-10 after:absolute group-hover:after:opacity-0 after:transition-opacity">
|
||||
<img
|
||||
src={(mission.coverImage as Media)?.url ?? undefined}
|
||||
className="w-full h-full aspect-video object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<ItemHeader>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{mission.codeName}
|
||||
</span>
|
||||
<ItemTitle>{mission.name}</ItemTitle>
|
||||
</div>
|
||||
<span
|
||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${
|
||||
missionStatusColors[mission.ownershipAndStatus.status] ??
|
||||
"bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{mission.ownershipAndStatus.status}
|
||||
</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemDescription className="line-clamp-1">
|
||||
{mission.summary}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No missions in this campaign yet.
|
||||
</p>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ── Right Sidebar (1/3) ─────────────────────────── */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Campaign Stats */}
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<TargetIcon className="size-4 text-muted-foreground" />
|
||||
<ItemTitle>Campaign Stats</ItemTitle>
|
||||
</div>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Total Missions</span>
|
||||
<span className="font-semibold">{missions.length}</span>
|
||||
</div>
|
||||
{Object.entries(statusCounts).map(([status, count]) => (
|
||||
<div key={status} className="flex justify-between text-sm">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`size-2 rounded-full ${missionStatusColors[status]?.split(" ")[0] ?? "bg-muted"}`}
|
||||
/>
|
||||
<span className="text-muted-foreground">{status}</span>
|
||||
</span>
|
||||
<span className="font-mono">{count}</span>
|
||||
</div>
|
||||
))}
|
||||
{campaign.startDate && (
|
||||
<div className="flex justify-between text-sm pt-1 border-t border-border/50">
|
||||
<span className="text-muted-foreground">Duration</span>
|
||||
<span>
|
||||
{startDate}
|
||||
{endDate ? ` — ${endDate}` : " — Present"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
)}
|
||||
|
||||
{/* Faction Roster */}
|
||||
{factions.length > 0 && (
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<UsersIcon className="size-4 text-muted-foreground" />
|
||||
<ItemTitle>Faction Roster</ItemTitle>
|
||||
</div>
|
||||
<Link
|
||||
href="/intelligence/factions"
|
||||
className="text-xs text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
View all
|
||||
</Link>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<div className="flex flex-col gap-2">
|
||||
{factions.map((faction) => (
|
||||
<Link
|
||||
key={faction.id}
|
||||
href="/intelligence/factions"
|
||||
className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
|
||||
>
|
||||
<ShieldIcon className="size-4 text-muted-foreground shrink-0" />
|
||||
<div className="flex flex-col gap-0.5 min-w-0 flex-1">
|
||||
<span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
|
||||
{faction.name}
|
||||
</span>
|
||||
<span
|
||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded w-fit ${factionTypeColors[faction.type] ?? "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
{faction.type === "majorFaction"
|
||||
? "Major"
|
||||
: faction.type === "minorFaction"
|
||||
? "Minor"
|
||||
: faction.type}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue