1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 05:21:17 -04:00

all components should accept additional classnames

This commit is contained in:
2022-01-20 12:06:05 -05:00
parent 2162e9d563
commit 7e37adabc1
22 changed files with 150 additions and 86 deletions

View File

@@ -5,24 +5,28 @@ import type { ReactNode } from "react";
import styles from "./CodeBlock.module.css";
type Props = {
className?: string;
children: ReactNode;
className?: string;
};
const CodeBlock = (props: Props) => {
if (props.className?.split(" ").includes("code-highlight")) {
const CodeBlock = ({ children, className, ...rest }: Props) => {
if (className?.split(" ").includes("code-highlight")) {
// full multi-line code blocks with prism highlighting and copy-to-clipboard button
return (
<div className={styles.block}>
<CopyButton source={props.children} className={styles.copy_btn} />
<code {...props} className={classNames(styles.code, props.className)}>
{props.children}
<CopyButton source={children} className={styles.copy_btn} />
<code className={classNames(styles.code, className)} {...rest}>
{children}
</code>
</div>
);
} else {
// inline code in paragraphs, headings, etc. (not highlighted)
return <code className={classNames(styles.code, styles.inline)}>{props.children}</code>;
return (
<code className={classNames(styles.code, styles.inline, className)} {...rest}>
{children}
</code>
);
}
};