pashto-inflector/src/components/TableCell.tsx

52 lines
2.0 KiB
TypeScript

import { useState, useEffect } from "react";
import * as T from "../types";
import Pashto from "./Pashto";
import Phonetics from "./Phonetics";
const arrowDown = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-caret-down" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M3.204 5L8 10.481 12.796 5H3.204zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>;
function TableCell({ item, textOptions, center, noBorder }: {
item: T.ArrayOneOrMore<T.PsString>,
textOptions: T.TextOptions,
center?: boolean,
noBorder?: boolean,
}) {
const [version, setVersion] = useState(0);
useEffect(() => setVersion(0), [item]);
function advanceVersion() {
setVersion((version + 1) % item.length);
}
const w = item[version] || item[0];
return (
<td style={{ ...noBorder ? { border: "none" } : {} }}>
<div style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: center ? "center" : "space-between",
alignItems: "center",
}}>
<div>
<div>
<Pashto opts={textOptions}>{w}</Pashto>
</div>
<div>
<Phonetics opts={textOptions}>{w}</Phonetics>
</div>
{w.e && (Array.isArray(w.e)
? w.e.map(e => <div key={e} className="text-muted small">{e}</div>)
: <div className="text-muted">{w.e}</div>)}
</div>
{item.length > 1 &&
<button className="btn btn-sm btn-light mx-2 my-2" onClick={advanceVersion}>
ver. {version + 1}/{item.length} {arrowDown}
</button>
}
</div>
</td>
);
}
export default TableCell;