26 lines
699 B
TypeScript
26 lines
699 B
TypeScript
import { Fragment, type ReactNode } from "react";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
|
|
const styles = stylex.create({
|
|
fact: {
|
|
display: "inline-block",
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Short facts joined by " · ". A narrow line breaks after a separator, and a
|
|
* fact moves to the next line whole: "1" and "occurrence" on two lines read as
|
|
* two facts. Only a fact wider than the whole line breaks inside itself.
|
|
*/
|
|
export default function FactLine({ facts }: { facts: readonly ReactNode[] }) {
|
|
return facts.map((fact, index) => (
|
|
<Fragment key={index}>
|
|
{index > 0 && " "}
|
|
<span {...stylex.props(styles.fact)}>
|
|
{fact}
|
|
{index < facts.length - 1 && " ·"}
|
|
</span>
|
|
</Fragment>
|
|
));
|
|
}
|