43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
/**
|
||
* Horizontal rule rendered as a table-with-border-top so it renders
|
||
* consistently across Outlook + every webmail client.
|
||
*/
|
||
|
||
import { defaultTheme } from "../../theme/theme.js";
|
||
import { h } from "../../vnode/vnode.js";
|
||
import type { VNode } from "../../vnode/vnode.types.js";
|
||
import type { EmailDividerProps } from "./email-divider.types.js";
|
||
|
||
export function EmailDivider(props: EmailDividerProps): VNode {
|
||
const { theme = defaultTheme, color, style } = props;
|
||
const lineColor = color ?? theme.colors.border;
|
||
return h(
|
||
"table",
|
||
{
|
||
role: "presentation",
|
||
cellpadding: 0,
|
||
cellspacing: 0,
|
||
style: {
|
||
width: "100%",
|
||
margin: `${theme.spacing.md} 0`,
|
||
},
|
||
},
|
||
h(
|
||
"tr",
|
||
{},
|
||
h(
|
||
"td",
|
||
{
|
||
style: {
|
||
"border-top": `1px solid ${lineColor}`,
|
||
"font-size": "1px",
|
||
"line-height": "1px",
|
||
...(style ?? {}),
|
||
},
|
||
},
|
||
" "
|
||
)
|
||
)
|
||
);
|
||
}
|