feat: add centering to captions and titles

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
+ * <Caption>I, am, a caption! I, AM, A CAPTION! I AM- I AM A CAPTION!! I! AM A CAPTION, DR. HAN! I am a caption!</Caption>
+ *
  */
 
 export default function Caption(ctx) {
-	const { children: caption, style, id } = ctx;
+	const { children: caption, center, style, id } = ctx;
 
 	return (
-		<p className={`${styles.caption} ${style}`} id={id}>{caption}</p>
+		<p className={classNames(styles.caption, { [styles.center]: center })} style={style} id={id}>
+			{caption}
+		</p>
 	);
 }

components/Caption/Caption.module.css

@@ -3,3 +3,8 @@
 	margin: .5rem 0;
 	line-height: 1.75;
 }
+
+.center {
+	text-align: center;
+	margin: .5rem auto;
+}

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
  * <Title element="h1">This is the title!</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,
 		},

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;
 }