jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-11 03:02:56 -05:00
Code Issues Activity

all components should accept additional classnames

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-20 12:06:05 -05:00
parent 2162e9d563
commit 7e37adabc1
22 changed files with 150 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/Heading/Heading.tsx
View File

@@ -5,44 +5,45 @@ import styles from "./Heading.module.css";
type Props = HTMLAttributes<HTMLHeadingElement> & {
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
className?: string;
};
const Heading = ({ as: Component, children, ...rest }: Props) => {
const Heading = ({ as: Component, children, className, ...rest }: Props) => {
return (
<Component className={classNames(styles.heading, styles[Component])} {...rest}>
<Component className={classNames(styles.heading, styles[Component], className)} {...rest}>
{children}
</Component>
);
};
// TODO: do this less manually...
export const H1 = ({ children, ...props }: Props) => (
<Heading as="h1" {...props}>
export const H1 = ({ children, ...rest }: Props) => (
<Heading as="h1" {...rest}>
{children}
</Heading>
);
export const H2 = ({ children, ...props }: Props) => (
<Heading as="h2" {...props}>
export const H2 = ({ children, ...rest }: Props) => (
<Heading as="h2" {...rest}>
{children}
</Heading>
);
export const H3 = ({ children, ...props }: Props) => (
<Heading as="h3" {...props}>
export const H3 = ({ children, ...rest }: Props) => (
<Heading as="h3" {...rest}>
{children}
</Heading>
);
export const H4 = ({ children, ...props }: Props) => (
<Heading as="h4" {...props}>
export const H4 = ({ children, ...rest }: Props) => (
<Heading as="h4" {...rest}>
{children}
</Heading>
);
export const H5 = ({ children, ...props }: Props) => (
<Heading as="h5" {...props}>
export const H5 = ({ children, ...rest }: Props) => (
<Heading as="h5" {...rest}>
{children}
</Heading>
);
export const H6 = ({ children, ...props }: Props) => (
<Heading as="h6" {...props}>
export const H6 = ({ children, ...rest }: Props) => (
<Heading as="h6" {...rest}>
{children}
</Heading>
);