68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { Panel } from "../components/ui";
|
|
import { getChampionById } from "../features/champions/championLookup";
|
|
|
|
export function ChampionDetailPage() {
|
|
const { championId } = useParams();
|
|
const champion = getChampionById(championId);
|
|
|
|
if (!champion) {
|
|
return (
|
|
<div className="page-stack">
|
|
<Panel title="Champion not found" subtitle="The requested mock champion does not exist.">
|
|
<Link className="text-link" to="/champions">
|
|
Return to champions
|
|
</Link>
|
|
</Panel>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="page-stack">
|
|
<section className="champion-detail-hero">
|
|
<div className="champion-portrait" style={{ "--champion-accent": champion.accentColor } as CSSProperties}>
|
|
{champion.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<span className="eyebrow">{champion.role}</span>
|
|
<h2>{champion.name}</h2>
|
|
<p>{champion.shortDescription}</p>
|
|
<div className="tag-row">
|
|
{champion.tags.map((tag) => (
|
|
<span key={tag}>{tag}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="dashboard-grid">
|
|
<Panel title="Combat Profile" subtitle="Placeholder values for future tuning">
|
|
<dl className="stat-list">
|
|
<div>
|
|
<dt>Difficulty</dt>
|
|
<dd>{champion.difficulty}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Primary Role</dt>
|
|
<dd>{champion.role}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Theme Hint</dt>
|
|
<dd>{champion.accentColor ?? "Default accent"}</dd>
|
|
</div>
|
|
</dl>
|
|
</Panel>
|
|
|
|
<Panel title="Future Detail Modules" subtitle="Prepared but not implemented">
|
|
<p>Abilities, skins, progression, lore, and build recommendations can be added as independent modules.</p>
|
|
<Link className="action-link action-link-inline" to="/champions">
|
|
Back to overview
|
|
</Link>
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|