jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 20:05:31 -04:00
Code Issues Activity

update h1-h6 component

Browse Source
This commit is contained in:
Jake Jarvis
2022-06-10 09:55:11 -04:00
parent 31c1a070b1
commit bd4d580040
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/Heading/Heading.tsx
View File

@@ -47,31 +47,32 @@ const H = styled("h1", {
paddingBottom: "0.25em",
borderBottom: "1px solid $kindaLight",
},
false: {},
},
},
});
export type HeadingProps = ComponentProps<typeof H> & {
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
level: 1 | 2 | 3 | 4 | 5 | 6;
divider?: boolean;
};
const Heading = ({ as, id, divider, children, ...rest }: HeadingProps) => {
const Heading = ({ level, id, divider, children, ...rest }: HeadingProps) => {
return (
<H as={as} divider={divider ?? as === "h2"} id={id} {...rest}>
<H as={`h${level}`} id={id} divider={divider || level === 2} {...rest}>
{children}
{/* add anchor link to H2s and H3s. ID is either provided or automatically generated by rehype-slug. */}
{id && (as === "h2" || as === "h3") && <Anchor id={id} title={innerText(children)} />}
{id && (level === 2 || level === 3) && <Anchor id={id} title={innerText(children)} />}
</H>
);
};
export const H1 = (props: Omit<HeadingProps, "as">) => <Heading as="h1" {...props} />;
export const H2 = (props: Omit<HeadingProps, "as">) => <Heading as="h2" {...props} />;
export const H3 = (props: Omit<HeadingProps, "as">) => <Heading as="h3" {...props} />;
export const H4 = (props: Omit<HeadingProps, "as">) => <Heading as="h4" {...props} />;
export const H5 = (props: Omit<HeadingProps, "as">) => <Heading as="h5" {...props} />;
export const H6 = (props: Omit<HeadingProps, "as">) => <Heading as="h6" {...props} />;
export const H1 = (props: Omit<HeadingProps, "level">) => <Heading level={1} {...props} />;
export const H2 = (props: Omit<HeadingProps, "level">) => <Heading level={2} {...props} />;
export const H3 = (props: Omit<HeadingProps, "level">) => <Heading level={3} {...props} />;
export const H4 = (props: Omit<HeadingProps, "level">) => <Heading level={4} {...props} />;
export const H5 = (props: Omit<HeadingProps, "level">) => <Heading level={5} {...props} />;
export const H6 = (props: Omit<HeadingProps, "level">) => <Heading level={6} {...props} />;
export default Heading;