26 lines
624 B
TypeScript
26 lines
624 B
TypeScript
import React from "react";
|
||
|
||
/**
|
||
* Renders a proper stacked fraction with numerator above denominator.
|
||
* Usage: <Frac n="x² − 1" d="x² − 2x + 1" />
|
||
*/
|
||
export const Frac = ({ n, d }: { n: React.ReactNode; d: React.ReactNode }) => (
|
||
<span
|
||
style={{
|
||
display: "inline-flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
verticalAlign: "middle",
|
||
lineHeight: 1.25,
|
||
margin: "0 3px",
|
||
}}
|
||
>
|
||
<span
|
||
style={{ borderBottom: "1.5px solid currentColor", padding: "0 4px 2px" }}
|
||
>
|
||
{n}
|
||
</span>
|
||
<span style={{ padding: "2px 4px 0" }}>{d}</span>
|
||
</span>
|
||
);
|