55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import type { Item } from "@proscenium/playbill";
|
|
import { capitalize } from "lodash-es";
|
|
import { Section } from "./base/section";
|
|
import { HTML } from "./base/html";
|
|
|
|
interface ItemSectionProps {
|
|
item: Item;
|
|
}
|
|
|
|
export function ItemCard({ item }: ItemSectionProps) {
|
|
let itemTypeDescriptor = "";
|
|
|
|
switch (item.type) {
|
|
case "wielded":
|
|
itemTypeDescriptor = `Wielded (${item.hands} ${item.hands === 1 ? "Hand" : "Hands"})`;
|
|
break;
|
|
case "worn":
|
|
itemTypeDescriptor = `Worn (${item.slot})`;
|
|
break;
|
|
case "trinket":
|
|
itemTypeDescriptor = "Trinket";
|
|
break;
|
|
}
|
|
|
|
const infoParts: React.ReactNode[] = [];
|
|
|
|
if (item.affinity !== "none") {
|
|
infoParts.push(
|
|
<p key="affinity" className={`item-affinity ${item.affinity}`}>
|
|
{item.affinity} Affinity
|
|
</p>,
|
|
);
|
|
}
|
|
|
|
if (item.damage !== null && item.damage.amount > 0) {
|
|
infoParts.push(
|
|
<p key="damage" className={`item-damage ${item.damage.type}`}>
|
|
{item.damage.amount} {capitalize(item.damage.type)} Damage
|
|
</p>,
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Section
|
|
type="item"
|
|
componentId={item.id}
|
|
title={item.name}
|
|
info={<div className="item-info">{infoParts}</div>}
|
|
rightCornerTag={capitalize(item.rarity)}
|
|
leftCornerTag={itemTypeDescriptor}
|
|
>
|
|
<HTML html={item.description} />
|
|
</Section>
|
|
);
|
|
}
|