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 | 46x 46x 46x 46x 46x 46x 20x 18x 18x 18x | "use client";
import { cloneElement, PropsWithChildren, ReactElement } from "react";
import css from "styled-jsx/css";
import type { AsType, Heading, HeadingStyles } from "types/heading";
import { Color } from "types/heading";
const fontSizes = ["6em", "2.1em", "1.5em", "1.25em", "1em", "0.75em"];
const fontSizesMobile = ["4em", "1.8em", "1.3em", "1em", "0.8em", "0.6em"];
const lineHeights = ["100px", "40px", "30px", "24px", "20px", "16px"];
const lineHeightsMobile = ["60px", "30px", "20px", "16px", "12px", "8px"];
export function getHeadingStyles(
number: number,
element: AsType | Heading,
{ color, fontSize, margin, textAlign, multiline }: HeadingStyles
): {
className: string;
styles: ReactElement;
} {
const mediaStyles = `@media(max-width:768px){${element}{font-size:${fontSizesMobile[number - 1]};line-height:${lineHeightsMobile[number - 1]};padding:0 8px}}`;
const resolved = css.resolve`
${element} {
color: ${color ?? Color.Primary};
font-weight: ${number === 1 ? "900" : "700"};
font-size: ${fontSize ?? fontSizes[number - 1]};
margin: ${margin ?? 0};
text-align: ${textAlign ?? "left"};
-webkit-line-clamp: ${multiline ?? 3};
pointer-events: ${number === 1 ? "none" : "auto"};
user-select: ${number === 1 ? "none" : "auto"};
padding: ${number === 1 ? "0.08em 0px" : "0"};
line-height: ${fontSize ??
(number === 3 ? "28px" : lineHeights[number - 1])};
}
${mediaStyles}
`;
const stylesString = (resolved.styles.props as PropsWithChildren)
.children as string;
return {
className: resolved.className,
styles: cloneElement(resolved.styles, {
children: stylesString?.trim(),
}),
};
}
|