feat: 🚀 😃 convert repo into a monorepo 🚀 😃 (#51)

* Merge main into turbo-monrepo * feat: rename apps * feat: remove supbase videos and serve all from project * feat: move supabase to root * feat: update README * docs: update link
2023-11-25 21:56:02 +00:00
parent 03ca379094
commit 41e29014ef
806 changed files with 85853 additions and 5746 deletions
@@ -0,0 +1,62 @@
+<script>
+  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
+  import { optionImage } from '$lib/utils/constants/quiz';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+
+  export let currentQuestion = {
+    label: ''
+  };
+  export let currentError = {};
+  export let optionHasError = () => false;
+  export let isPreview = false;
+</script>
+
+{#if isPreview}
+  <h1 class="text-white mb-5 font-bold">{currentQuestion.label}</h1>
+{:else}
+  <TextField
+    placeholder="Start typing your question"
+    bind:value={currentQuestion.label}
+    className="w-full my-4"
+    errorMessage={currentError.isLabelEmpty && 'This field is required'}
+    isRequired={true}
+    bgColor="bg-white"
+  />
+{/if}
+
+<!-- Options -->
+<div class="flex justify-between w-full flex-wrap">
+  {#each currentQuestion.options || [] as option}
+    <div class="w-2/5 bg-white dark:bg-neutral-800 rounded p-5 mb-5 relative">
+      <img src={optionImage[option.id]} alt={option.id} />
+
+      {#if isPreview}
+        <p class="mt-5">{option.label}</p>
+      {:else}
+        <TextField
+          bind:value={option.label}
+          placeholder="Type answer"
+          bgColor="bg-white"
+          className="mt-3"
+          isDisabled={currentQuestion.type === 'boolean'}
+          errorMessage={optionHasError(option.id, currentError.options) && 'Please enter a label'}
+        />
+        <div class="flex justify-end absolute top-2 right-2">
+          <IconButton
+            value={option.id}
+            onClick={() => (option.isCorrect = !option.isCorrect)}
+            buttonClassName={option.isCorrect && 'success'}
+          >
+            {#if option.isCorrect}
+              <CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
+            {:else}
+              <CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
+            {/if}
+          </IconButton>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>