44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import type { Method, Playbill } from "@proscenium/playbill";
|
|
import { AbilityCard } from "./ability";
|
|
import { Section } from "./base/section";
|
|
|
|
interface MethodSectionProps {
|
|
method: Method;
|
|
playbill: Playbill;
|
|
}
|
|
|
|
export function MethodSection({ method, playbill }: MethodSectionProps) {
|
|
const ranks = method.abilities.map((rank, i) => {
|
|
const gridTemplateColumns = new Array(Math.min(rank.length, 3))
|
|
.fill("1fr")
|
|
.join(" ");
|
|
return (
|
|
<div className="method-rank" key={i}>
|
|
<h3>Rank {i + 1}</h3>
|
|
<div className="method-rank-content" style={{ gridTemplateColumns }}>
|
|
{rank.map((abilityId) => {
|
|
const ability = playbill.abilities[abilityId];
|
|
return <AbilityCard ability={ability} key={abilityId} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<Section
|
|
type="method"
|
|
componentId={method.id}
|
|
title={method.name}
|
|
preInfo={<p className="method-curator">{method.curator}'s Method of</p>}
|
|
info={
|
|
<p
|
|
className="method-description"
|
|
dangerouslySetInnerHTML={{ __html: method.description }}
|
|
/>
|
|
}
|
|
>
|
|
<div className="method-ranks">{ranks}</div>
|
|
</Section>
|
|
);
|
|
}
|