From 5a92c16446816c1c1f9a0ab2f77a16e68301b6f3 Mon Sep 17 00:00:00 2001
From: Peter <github@peter.dev.br>
Date: Tue, 21 Dec 2021 23:04:04 -0300
Subject: [PATCH] WIP: add Button component

---
 src/components/Button.module.scss | 14 ++++++++++++++
 src/components/Button.tsx         | 19 +++++++++++++++++++
 src/components/index.ts           |  2 ++
 3 files changed, 35 insertions(+)
 create mode 100644 src/components/Button.module.scss
 create mode 100644 src/components/Button.tsx

diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
new file mode 100644
index 0000000..5ba579a
--- /dev/null
+++ b/src/components/Button.module.scss
@@ -0,0 +1,14 @@
+@use "estileira/common" with ($border-radius: var(--space-xs));
+
+.button {
+  align-items: center;
+  background: transparent;
+  border: common.rem(1) solid var(--gray-2);
+  border-radius: common.$border-radius;
+  cursor: pointer;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--space-sm);
+  justify-content: space-evenly;
+  padding: var(--space-sm) var(--space-default);
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..e26de54
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,19 @@
+import type { IconType } from "react-icons";
+import styles from "./Button.module.scss";
+
+interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+  Icon?: IconType;
+}
+
+export default function Button({
+  Icon,
+  children,
+  ...buttonProps
+}: ButtonProps) {
+  return (
+    <button className={styles.button} {...buttonProps}>
+      {Icon && <Icon />}
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 2a4bb40..a089d40 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,5 @@ export { default as NumberFormatCompact } from "./NumberFormatCompact";
 export { default as Avatar } from "./avatar";
 export { default as Thumbnail, ThumbnailSize } from "./Thumbnail";
 export { default as RelativeTime } from "./RelativeTime";
+export { default as EmptyState } from "./EmptyState";
+export { default as Button } from "./Button";