From 925cd19315c74a0c5131c729310e3a93c607c31c Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 3 Jun 2025 15:54:18 +0800
Subject: [PATCH] updated

---
 src/components/ButtonComponent/Button.sass | 14 ++++++++++++++
 src/components/ButtonComponent/Button.tsx  | 17 +++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/components/ButtonComponent/Button.sass
 create mode 100644 src/components/ButtonComponent/Button.tsx

diff --git a/src/components/ButtonComponent/Button.sass b/src/components/ButtonComponent/Button.sass
new file mode 100644
index 0000000..a0bdef1
--- /dev/null
+++ b/src/components/ButtonComponent/Button.sass
@@ -0,0 +1,14 @@
+@use '/src/styles/variables.sass' as vars
+
+.button
+  background-color: #5e825f
+  border: none
+  border-radius: 4px
+  color: white
+  padding: 1rem 2rem
+  text-align: center
+  text-decoration: none
+  display: inline-block
+  font-size: 16px
+  margin: 4px 2px
+  cursor: pointer
diff --git a/src/components/ButtonComponent/Button.tsx b/src/components/ButtonComponent/Button.tsx
new file mode 100644
index 0000000..6a47a74
--- /dev/null
+++ b/src/components/ButtonComponent/Button.tsx
@@ -0,0 +1,17 @@
+import './Button.sass'
+import { Show } from 'solid-js'
+
+export default (props: { label?: string; to?: string; onClick?: () => void; }) => {
+  return <>
+    <Show when={props.to}>
+      <a href={props.to} aria-label={props.label}>
+        <button class="button">{props.label || 'Click Me!'}</button>
+      </a>
+    </Show>
+
+    <Show when={!props.to}>
+      <button class="button" onClick={props.onClick}>{props.label || 'Click Me!'}</button>
+    </Show>
+
+  </>
+}
\ No newline at end of file