jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-09-04 21:35:33 -04:00
Code Issues Activity

update h1-h6 component

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