diff --git a/components/Caption/Caption.js b/components/Caption/Caption.js index 2b66ce9..ce0ed0f 100644 --- a/components/Caption/Caption.js +++ b/components/Caption/Caption.js @@ -1,13 +1,23 @@ import styles from './Caption.module.css'; +import classNames from 'classnames'; + /** * A reusable component for captions. + * + * @param {boolean} center - Whether the text should be centered or not. + * + * @example + * I, am, a caption! I, AM, A CAPTION! I AM- I AM A CAPTION!! I! AM A CAPTION, DR. HAN! I am a caption! + * */ export default function Caption(ctx) { - const { children: caption, style, id } = ctx; + const { children: caption, center, style, id } = ctx; return ( -

{caption}

+

+ {caption} +

); } diff --git a/components/Caption/Caption.module.css b/components/Caption/Caption.module.css index 4bb9a54..73a54a0 100644 --- a/components/Caption/Caption.module.css +++ b/components/Caption/Caption.module.css @@ -3,3 +3,8 @@ margin: .5rem 0; line-height: 1.75; } + +.center { + text-align: center; + margin: .5rem auto; +} diff --git a/components/Title/Title.js b/components/Title/Title.js index 1a315e3..b50d810 100644 --- a/components/Title/Title.js +++ b/components/Title/Title.js @@ -1,11 +1,12 @@ import { createElement } from 'react'; +import classNames from 'classnames'; import styles from './Title.module.css'; /** * A reusable component for titles. * * @param {string} element - The element to render the title as (e.g. h1, h2, p, div). Defauts to h2. - * @param {string} style - Custom styles to apply to the title. + * @param {bool} center - Whether the text should be centered or not. * * @example * This is the title! @@ -13,7 +14,7 @@ import styles from './Title.module.css'; */ export default function Title(ctx) { - const { children: title = '', element, style, id } = ctx; + const { children: title = '', element, style, id, center } = ctx; // regex to match all start/end punctuation except for parentheses and brackets. Please never make me do this again. const punctuationRegex = { @@ -52,7 +53,7 @@ export default function Title(ctx) { const titleElement = createElement( element || 'h2', { - className: styles.title, + className: classNames(styles.title, { [styles.center]: center }), style, id, }, diff --git a/components/Title/Title.module.css b/components/Title/Title.module.css index 89afbae..ff2c473 100644 --- a/components/Title/Title.module.css +++ b/components/Title/Title.module.css @@ -4,6 +4,11 @@ color: var(--text-shade-3); } +.center { + text-align: center; + margin: 0 auto; +} + h1.title { font-size: 4rem; }