init

lib/components/dashboard/elements/Button.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa';
+  import Spinner from './Spinner.svelte';
+
+  export let icon: IconDefinition | undefined = undefined;
+  export let style: 'default' | 'red' | 'white' | 'dark' | 'accent' = 'default';
+  export let onClick: void | (() => void) | ((e: MouseEvent) => void) | undefined = undefined;
+  export let tabindex: number | undefined = undefined;
+  export let disabled: boolean = false;
+  export let full: boolean = false;
+  export let xButton: boolean = false;
+  export let large: boolean = false;
+  export let small: boolean = false;
+  export let iconOnly: boolean = false;
+  export let loading: boolean = false;
+  export let title: string | undefined = undefined;
+
+  function click(e: MouseEvent) {
+    if (onClick) onClick(e);
+  }
+
+  $: isDisabled = loading || disabled;
+</script>
+
+<button
+  class="h-10 px-4 py-2 bg-button-secondary-active-solid hover:bg-button-secondary-selected active:bg-button-secondary-active-solid text-text-primary disabled:bg-button-disabled disabled:text-text-disabled transition-colors font-semibold rounded-lg justify-center items-center gap-2 inline-flex break-words line-clamp-1"
+  class:style-red={style === 'red'}
+  class:style-white={style === 'white'}
+  class:style-dark={style === 'dark'}
+  class:style-accent={style === 'accent'}
+  class:w-full={full}
+  class:x={xButton}
+  class:sm={small}
+  class:!h-12={large}
+  disabled={isDisabled}
+  class:cursor-not-allowed={isDisabled}
+  {title}
+  on:click={click}
+  {tabindex}>
+  {#if !loading}
+    {#if icon}
+      <Fa {icon} size="xs" />
+    {/if}
+    {#if xButton && !iconOnly}
+      <span class="contents"><slot /></span>
+    {:else}
+      <slot />
+    {/if}
+  {:else}
+    <Spinner small={small || xButton} />
+  {/if}
+</button>
+
+<style lang="postcss">
+  button.style-red {
+    @apply bg-red-500 hover:bg-red-400 active:bg-red-500;
+  }
+
+  button.style-white {
+    @apply bg-text-header hover:bg-text-primary active:bg-text-header text-item;
+  }
+
+  button.style-dark {
+    @apply backdrop-blur-3xl bg-button-dark-transparent-fill hover:bg-button-secondary-selected active:bg-button-dark-fill text-text-header;
+  }
+
+  button.style-accent {
+    @apply bg-accent hover:bg-accent-hover active:bg-accent-active text-text-header;
+  }
+
+  button.x {
+    @apply rounded-full font-normal h-fit min-h-[36.8px] p-3;
+  }
+
+  button.x.sm {
+    @apply py-2;
+  }
+
+  button.x > span {
+    @apply block whitespace-nowrap leading-[.8];
+  }
+</style>