52 lines
2.0 KiB
TypeScript
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; |