CLASSROOMIO-T-80: Replace sapper with sveltekit

2023-08-02 19:35:27 +01:00
parent 8ffdf319b3
commit 7dfbb05451
320 changed files with 5207 additions and 18330 deletions
@@ -0,0 +1,28 @@
+export const VARIANTS = {
+  CONTAINED: 'CONTAINED',
+  CONTAINED_INFO: 'CONTAINED_INFO',
+  CONTAINED_WHITE: 'CONTAINED_WHITE',
+  CONTAINED_DANGER: 'CONTAINED_DANGER',
+  CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
+  OUTLINED: 'OUTLINED',
+  NONE: 'NONE',
+  TEXT: 'TEXT',
+  TEXT_DANGER: 'TEXT_DANGER',
+};
+
+export const VARIANTS_CLASS = {
+  [VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white',
+  [VARIANTS.CONTAINED_WHITE]:
+    'border-none hover:border-black-300 hover:bg-blue-700 dark:hover:bg-blue-900 text-black hover:text-white bg-white',
+  [VARIANTS.CONTAINED_INFO]:
+    'border-none bg-gray-400 hover:bg-gray-600 text-white',
+  [VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
+  [VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
+  [VARIANTS.OUTLINED]:
+    'border border-blue-700 hover:border-black-300 hover:bg-blue-700 text-black hover:text-white',
+  [VARIANTS.NONE]:
+    'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
+  [VARIANTS.TEXT]: 'text-black hover:underline',
+  [VARIANTS.TEXT_DANGER]:
+    'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300',
+};
@@ -0,0 +1,42 @@
+<script>
+  import { Moon } from 'svelte-loading-spinners';
+  import { VARIANTS, VARIANTS_CLASS } from './constants';
+
+  export let label = '';
+  export let className = '';
+  export let onClick = () => {};
+  export let name = '';
+  export let type = 'button';
+  export let variant = VARIANTS.CONTAINED;
+  export let disablePadding = false;
+  export let isDisabled = false;
+  export let isLoading = false;
+
+  $: isDisabled = isLoading ? true : false;
+</script>
+
+<button
+  class="{isDisabled
+    ? 'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'
+    : 'cursor-pointer'} flex items-center h-auto {VARIANTS_CLASS[
+    isLoading ? VARIANTS.OUTLINED : variant
+  ]} {!disablePadding &&
+    'py-3 px-5'} rounded-none {className} w-fit justify-center sm:w-auto {isLoading &&
+    'py-3 border-blue-700'} {variant !== VARIANTS.TEXT &&
+    'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
+  VARIANTS.CONTAINED_WHITE
+    ? 'dark:text-white'
+    : ''}"
+  on:click={onClick}
+  {name}
+  {type}
+  disabled={isDisabled}
+>
+  {#if isLoading}
+    <Moon size="20" color="#1d4ed8" unit="px" duration="1s" />
+  {:else if !!label}
+    {label}
+  {:else}
+    <slot />
+  {/if}
+</button>