80 lines
2 KiB
TypeScript
80 lines
2 KiB
TypeScript
import InlineNumber from "./InlineNumber";
|
|
import styles from "./CurrencyRow.module.css";
|
|
|
|
interface CurrencyRowProps {
|
|
gp: number;
|
|
sp: number;
|
|
cp: number;
|
|
onChange: (field: "gp" | "sp" | "cp", value: number) => void;
|
|
mode?: "view" | "edit";
|
|
}
|
|
|
|
export default function CurrencyRow({
|
|
gp,
|
|
sp,
|
|
cp,
|
|
onChange,
|
|
mode = "view",
|
|
}: CurrencyRowProps) {
|
|
return (
|
|
<div className={styles.row}>
|
|
<div className={styles.coin}>
|
|
<span className={`${styles.coinLabel} ${styles.gp}`}>GP</span>
|
|
{mode === "edit" ? (
|
|
<input
|
|
className={styles.coinInput}
|
|
type="number"
|
|
min={0}
|
|
value={gp}
|
|
onChange={(e) => onChange("gp", Number(e.target.value))}
|
|
/>
|
|
) : (
|
|
<InlineNumber
|
|
value={gp}
|
|
onChange={(v) => onChange("gp", v)}
|
|
className={styles.coinValue}
|
|
min={0}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={styles.coin}>
|
|
<span className={`${styles.coinLabel} ${styles.sp}`}>SP</span>
|
|
{mode === "edit" ? (
|
|
<input
|
|
className={styles.coinInput}
|
|
type="number"
|
|
min={0}
|
|
value={sp}
|
|
onChange={(e) => onChange("sp", Number(e.target.value))}
|
|
/>
|
|
) : (
|
|
<InlineNumber
|
|
value={sp}
|
|
onChange={(v) => onChange("sp", v)}
|
|
className={styles.coinValue}
|
|
min={0}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={styles.coin}>
|
|
<span className={`${styles.coinLabel} ${styles.cp}`}>CP</span>
|
|
{mode === "edit" ? (
|
|
<input
|
|
className={styles.coinInput}
|
|
type="number"
|
|
min={0}
|
|
value={cp}
|
|
onChange={(e) => onChange("cp", Number(e.target.value))}
|
|
/>
|
|
) : (
|
|
<InlineNumber
|
|
value={cp}
|
|
onChange={(v) => onChange("cp", v)}
|
|
className={styles.coinValue}
|
|
min={0}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|