feat: move away from carbon components and TinyMCE (#597)

* feat: remove tinymce & replace org sidebar * chore: PR Fixes * chore: move ui font into src dir * remove files in vite config * use google font import for loading font * remove custom font * more fonts update * remove font bold * more removals of font bold * fix import * checkpoint * chore: checkpoint (add course & lms shadcn sidebar) * minor css improvements and try out font sans * chore: replace carbon components with shadcn's * chore: replace carbon components with shadcn _ v3 * chore: ui fixes & storybook update * feat: UI cleanup * fix: quick ui fixes * chore: update pnpm-lock.yaml with new dependencies and versions; fix output.css formatting * chore: add isloading to button * feat: add loading state to button stories * chore: feedback fixes * fix: feedback fixes * chore: remove console * fix: PR comments * fix: PR comments --------- Co-authored-by: Rotimi Best <best@classroomio.com>
2025-11-21 12:18:04 +01:00
parent 2145782385
commit cbf6ae7e63
499 changed files with 19708 additions and 15603 deletions
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Skeleton } from '@cio/ui/base/skeleton';
+
+  import { t } from '$lib/utils/functions/translations';
+
+  let { src, className, alt }: { src: string | undefined; className?: string; alt?: string } = $props();
+
+  function loadImage(src: string | undefined): Promise<void> {
+    if (!src) return Promise.reject();
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+</script>
+
+{#await loadImage(src)}
+  <div class="flex max-h-[215px] w-full items-center justify-center rounded bg-gray-100 dark:bg-neutral-800">
+    <Skeleton class={className} />
+  </div>
+{:then}
+  <img {src} {alt} class={className} />
+{:catch}
+  <div class="flex h-[200px] w-full items-center justify-center rounded bg-gray-100 dark:bg-neutral-800">
+    <p class="text-sm text-red-600">{$t('courses.course_card.error_message')}</p>
+  </div>
+{/await}