more posts button

src/lib/IO/Button.svelte

@@ -1,23 +1,49 @@
 <script lang="ts">
+    import { ButtonType } from "$lib/IO/ButtonType.ts";
     import { onMount } from "svelte";
 
-    export let text : string = 'button';
-    export let color : string;
+    export let type : ButtonType = ButtonType.Primary;
+    let cssName : string;
+
+    const buttonTypeColors = {
+        [ButtonType.Primary]: '--primary',
+        [ButtonType.Secondary]: '--secondary',
+        [ButtonType.Accent]: '--accent',
+    };
 
     onMount(() => {
-        if (!color || color.length === 0)
-        {
-            color = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
-        }
+        cssName = buttonTypeColors[type];
     });
 </script>
 
-<button style="--button-color: {color};" class="button">
-    {text}
+<button class="button" style="--button-color: var({cssName});">
+    <div class="content">
+        <slot name="content">
+            Click Me!
+        </slot>
+    </div>
 </button>
 
 <style>
     .button {
+        width: 100%;
+        border-radius: 6px;
+        border: none;
         background-color: var(--button-color);
+
+        display: flex;
+        justify-content: center;
+        font-size: 1.5em;
+    }
+
+    .button:hover {
+        cursor: pointer;
+    }
+
+    .content {
+        width: 100%;
+        color: var(--text1);
+
+        padding: 0.8em 4em;
     }
 </style>

src/lib/IO/ButtonType.ts

@@ -0,0 +1,5 @@
+export enum ButtonType {
+    Primary,
+    Secondary,
+    Accent
+}