From a9072370ca1eb9a5cce928b1d487db0f307edea6 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 20 Sep 2022 15:24:27 +0800
Subject: feat: Move old apps into it's own directory

---
 apps/kit/src/lib/components/button.svelte | 72 +++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 apps/kit/src/lib/components/button.svelte

(limited to 'apps/kit/src/lib/components/button.svelte')

diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
new file mode 100644
index 0000000..5550e5e
--- /dev/null
+++ b/apps/kit/src/lib/components/button.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    export type ButtonKind = "primary" | "secondary" | "white"
+    export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+    export let kind = "primary" as ButtonKind;
+    export let size = "sm" as ButtonSize;
+    export let type: "button" | "submit" | "reset" = "button";
+    export let id = undefined;
+    export let tabindex = undefined;
+    export let style = undefined;
+    export let title = undefined;
+    export let disabled = false;
+    export let href = undefined;
+    export let text;
+
+    let sizeClasses = "px-3 py-2 text-xs";
+    let kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
+
+    $: shared_props = {
+        type: type,
+        id: id || null,
+        title: title || null,
+        disabled: disabled || null,
+        tabindex: tabindex || null,
+        style: style || null,
+    };
+
+    $: switch (size) {
+        case "xs":
+            sizeClasses = "px-2.5 py-1.5 text-xs";
+            break;
+        case "sm":
+            sizeClasses = "px-3 py-2 text-sm";
+            break;
+        case "md":
+            sizeClasses = "px-4 py-2 text-sm";
+            break;
+        case "lg":
+            sizeClasses = "px-4 py-2 text-base";
+            break;
+        case "xl":
+            sizeClasses = "px-6 py-3 text-base";
+            break;
+    }
+
+    $: switch (kind) {
+        case "secondary":
+            kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200";
+            break;
+        case "primary":
+            kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700";
+            break;
+        case "white":
+            kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50";
+            break;
+    }
+</script>
+{#if href && !disabled}
+    <a {...shared_props}
+       {href}
+       on:click
+       {type}
+       class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
+        {text}
+    </a>
+{:else}
+    <button {...shared_props}
+            on:click
+            {type}
+            class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
+        {text}
+    </button>
+{/if}
\ No newline at end of file
-- 
cgit v1.3