36 lines
833 B
TypeScript
36 lines
833 B
TypeScript
|
import { css, cx } from "@emotion/css";
|
||
|
|
import type { ThematicBreak } from "@yozora/ast";
|
||
|
|
import React from "react";
|
||
|
|
import { astClasses } from "../context";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Render `thematicBreak`.
|
||
|
|
*
|
||
|
|
* @see https://www.npmjs.com/package/@yozora/ast#thematicBreak
|
||
|
|
* @see https://www.npmjs.com/package/@yozora/tokenizer-thematic-break
|
||
|
|
*/
|
||
|
|
export class ThematicBreakRenderer extends React.Component<ThematicBreak> {
|
||
|
|
public override shouldComponentUpdate(): boolean {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
public override render(): React.ReactElement {
|
||
|
|
return <hr className={cls} />;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const cls = cx(
|
||
|
|
astClasses.thematicBreak,
|
||
|
|
css({
|
||
|
|
boxSizing: "content-box",
|
||
|
|
display: "block",
|
||
|
|
height: 0,
|
||
|
|
width: "100%",
|
||
|
|
padding: 0,
|
||
|
|
border: 0,
|
||
|
|
borderBottom: `1px solid #dadada`,
|
||
|
|
outline: 0,
|
||
|
|
margin: "1.5em 0px",
|
||
|
|
}),
|
||
|
|
);
|