From 2b58ff029107b23617d8c4b246de77876b3bf053 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 28 Sep 2022 00:21:37 +0800
Subject: feat: Move frontend into layout group (main)

This enables /book to load without the usual layout (app layout)
---
 apps/kit/src/lib/components/button.svelte | 59 +++++++++++++++++++------------
 1 file changed, 36 insertions(+), 23 deletions(-)

(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
index 5550e5e..6566cec 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -1,19 +1,23 @@
-<script lang="ts">
-    export type ButtonKind = "primary" | "secondary" | "white"
+<script context="module" lang="ts">
+    export type ButtonKind = "primary" | "secondary" | "white";
     export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+</script>
+
+<script lang="ts">
     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 id: string | undefined = undefined;
+    export let tabindex: string | undefined = undefined;
+    export let style: string | undefined = undefined;
+    export let title: string | undefined = undefined;
     export let disabled = false;
-    export let href = undefined;
-    export let text;
+    export let href: string | undefined = undefined;
+    export let text: string;
 
     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";
+    let kindClasses =
+        "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
 
     $: shared_props = {
         type: type,
@@ -22,7 +26,7 @@
         disabled: disabled || null,
         tabindex: tabindex || null,
         style: style || null,
-    };
+    } as any;
 
     $: switch (size) {
         case "xs":
@@ -44,29 +48,38 @@
 
     $: switch (kind) {
         case "secondary":
-            kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200";
+            kindClasses =
+                "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500";
             break;
         case "primary":
-            kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700";
+            kindClasses =
+                "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
             break;
         case "white":
-            kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50";
+            kindClasses =
+                "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500";
             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">
+    <!--@ts-ignore-->
+    <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"
+    >
         {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">
+    <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"
+    >
         {text}
     </button>
-{/if}
\ No newline at end of file
+{/if}
-- 
cgit v1.3