From 97e47b20cd62cbc9bd5a2e397ff29a49894dc615 Mon Sep 17 00:00:00 2001
From: Ash Monty <git@ashmonty.com>
Date: Sun, 27 Nov 2022 12:28:23 +0100
Subject: [PATCH] feat(component): add Button

---
 components/Button/Button.js         | 24 ++++++++++++++++++++++++
 components/Button/Button.module.css | 23 +++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 components/Button/Button.js
 create mode 100644 components/Button/Button.module.css

diff --git a/components/Button/Button.js b/components/Button/Button.js
new file mode 100644
index 0000000..be23bb4
--- /dev/null
+++ b/components/Button/Button.js
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+import styles from './Button.module.css';
+
+/**
+ * A reusable component for buttons.
+ *
+ * @param {boolean} isPrimary - Whether the button is primary or not. Defaults to false.
+ * @param className - An optional classname.
+ * @param {string} style - Custom styles to apply to the title.
+ *
+ * @example
+ * <Button isPrimary={true} onClick={(e) => alert(e.target.textContent)}>Pizza</Title>
+ *
+ */
+
+export default function Button(ctx) {
+	const { children, className, isPrimary, onClick } = ctx;
+	return (
+		<button className={classNames(styles.button, { [styles.primary]: isPrimary }, className)} onClick={onClick}>
+			{children}
+		</button>
+	);
+}
diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css
new file mode 100644
index 0000000..021e969
--- /dev/null
+++ b/components/Button/Button.module.css
@@ -0,0 +1,23 @@
+.button {
+	appearance: none;
+	background: var(--bg-shade-3);
+	color: var(--text-shade-3);
+	border: 0;
+	border-radius: 6px;
+	padding: 12px 48px;
+	font-size: 1rem;
+	font-family: var(--font-family);
+	cursor: pointer;
+}
+
+.button:hover {
+	background: var(--bg-shade-3-5);
+}
+
+.button.primary {
+	background: var(--accent-shade-0);
+}
+
+.button.primary:hover {
+	background: var(--accent-shade-1);
+}