Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 19x 19x 19x 15x 19x 19x | import {
createElement,
DetailedHTMLProps,
forwardRef,
HtmlHTMLAttributes,
PropsWithChildren,
ReactElement,
} from "react";
import css from "styled-jsx/css";
import type { HeadingProps } from "types/heading";
import { getHeadingStyles } from "utils";
const Heading = forwardRef(
(
{
number,
as: element = `h${number}`,
color,
fontSize,
margin,
textAlign,
multiline,
children,
...props
}: PropsWithChildren<HeadingProps> &
DetailedHTMLProps<
HtmlHTMLAttributes<HTMLHeadingElement>,
HTMLHeadingElement
>,
ref
): ReactElement => {
const { className, styles } = getHeadingStyles(number, element, {
color,
fontSize,
margin,
textAlign,
multiline,
});
const defaultStyles = css.resolve`
${element} {
display: -webkit-box;
font-family: Lato, sans-serif;
letter-spacing: -0.04em;
line-break: anywhere;
max-width: 100%;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
text-transform: none;
white-space: unset;
z-index: 999999;
-webkit-box-orient: vertical;
width: 100%;
}
`;
return (
<>
{createElement(
element,
{
className: `${className} ${defaultStyles.className}`,
ref,
...props,
},
children
)}
{defaultStyles.styles}
{styles}
</>
);
}
);
export default Heading;
Heading.displayName = "Heading";
|