From 27b748802a6afedcf06929a49107b0ce81da6ae4 Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Fri, 10 Jan 2025 13:23:06 +0000
Subject: [PATCH] Made shared button component and implemented usage

---
 src/LandingPage/BottomCall.svelte   | 19 +++++++++++++------
 src/LandingPage/Splash.svelte       | 10 +++++++---
 src/shared_components/Button.svelte | 28 ++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 src/shared_components/Button.svelte

diff --git a/src/LandingPage/BottomCall.svelte b/src/LandingPage/BottomCall.svelte
index c8bd779..b268cf9 100644
--- a/src/LandingPage/BottomCall.svelte
+++ b/src/LandingPage/BottomCall.svelte
@@ -1,15 +1,22 @@
 <script>
     import "./BottomCall.scss";
+    import Button from "../shared_components/Button.svelte";
 </script>
 
 <div class="btmcall">
     <div class="btmcall-text">Interested in the project?</div>
     <div class="btmcall-buttons">
-        <div class="btmcall-button1">
-            <div class="btmcall-get-involved">Get Involved!</div>
-        </div>
-        <div class="btmcall-button2">
-            <div class="btmcall-contact-us">Contact Us</div>
-        </div>
+        <Button
+            class="btmcall-button1"
+            text="Get Involved!"
+            inner_class="btmcall-get-involved"
+            hotkey="g"
+        />
+        <Button
+            class="btmcall-button2"
+            text="Contact Us"
+            inner_class="btmcall-contact-us"
+            hotkey="c"
+        />
     </div>
 </div>
diff --git a/src/LandingPage/Splash.svelte b/src/LandingPage/Splash.svelte
index 8dac604..2fb004d 100644
--- a/src/LandingPage/Splash.svelte
+++ b/src/LandingPage/Splash.svelte
@@ -1,5 +1,6 @@
 <script>
     import "./Splash.scss";
+    import Button from "../shared_components/Button.svelte";
 </script>
 
 <div class="splash">
@@ -18,8 +19,11 @@
             the collaboration and innovation that will build the future of this
             technology.
         </div>
-        <div class="splash-button">
-            <div class="splash-get-involved">Get Involved!</div>
-        </div>
+        <Button
+            class="splash-button"
+            text="Get Involved!"
+            inner_class="splash-get-involved"
+            hotkey="g"
+        />
     </div>
 </div>
diff --git a/src/shared_components/Button.svelte b/src/shared_components/Button.svelte
new file mode 100644
index 0000000..037e512
--- /dev/null
+++ b/src/shared_components/Button.svelte
@@ -0,0 +1,28 @@
+<script>
+    export let text = "Button_Text";
+    export let inner_class = "";
+    export let redirectFunc = () => {};
+    export let hotkey = "";
+
+    function handleKeypress(event) {
+        if (
+            event.key === hotkey ||
+            event.key === "Enter" ||
+            event.key === " "
+        ) {
+            event.preventDefault();
+            redirectFunc();
+        }
+    }
+</script>
+
+<div
+    class="cursor-pointer select-none {$$props.class}"
+    style="cursor: pointer;"
+    on:click={redirectFunc}
+    on:keydown={handleKeypress}
+    tabindex="0"
+    role="button"
+>
+    <div class={inner_class}>{text}</div>
+</div>