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

apps/dashboard/src/lib/components/Org/Community/DeleteCommentModal.svelte

@@ -0,0 +1,30 @@
+<script>
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  export let onDelete = () => {};
+  export let onCancel = () => {};
+  export let open = false;
+</script>
+
+<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Delete comment">
+  <div>
+    <h1 class="dark:text-white text-lg">Are you sure you want to delete this comment?</h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="No, keep it"
+        onClick={onCancel}
+      />
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.CONTAINED}
+        label="Yes, delete"
+        onClick={onDelete}
+      />
+    </div>
+  </div>
+</Modal>

apps/dashboard/src/lib/components/Org/Community/Loader.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+</script>
+
+<div
+  class="h-[70px] w-full border border-gray-100 dark:bg-neutral-800 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
+>
+  <div class="w-10 flex justify-evenly flex-col px-1 mr-2 rounded-md">
+    <SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />
+    <SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />
+  </div>
+
+  <div class="w-9/12 mt-1.5 flex justify-evenly flex-col rounded-md">
+    <!-- first text -->
+    <div class="w-3/6 h-full">
+      <SkeletonText style="height: 50%; border-radius: 4px;" />
+    </div>
+    <!-- second text -->
+    <SkeletonText style="width: 10%; height: 50%; border-radius: 4px;" />
+  </div>
+
+  <div class="w-10 justify-evenly flex-col px-1 mt-1.5 ml-auto rounded-md">
+    <SkeletonPlaceholder style="width: 100%; height: 41%; border-radius: 4px;" />
+  </div>
+</div>

apps/dashboard/src/lib/components/Org/Community/index.svelte

@@ -0,0 +1,117 @@
+<script>
+  import { goto } from '$app/navigation';
+  import AddCommentIcon from 'carbon-icons-svelte/lib/AddComment.svelte';
+  import CommunityLoader from './Loader.svelte';
+  import Vote from '$lib/components/Vote/index.svelte';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import Space from '$lib/components/Space/index.svelte';
+  import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { calDateDiff } from '$lib/utils/functions/date';
+
+  export let isLMS = false;
+
+  let isLoading = false;
+  let discussions = [];
+
+  async function fetchCommunityQuestions(orgId) {
+    if (!orgId) return;
+    isLoading = true;
+
+    const { data, error } = await supabase
+      .from('community_question')
+      .select(
+        `
+        organization_id,
+        title,
+        votes,
+        created_at,
+        slug,
+        comments:community_answer(count),
+        author:organizationmember!community_question_author_id_fkey!inner(
+          profile!inner(fullname)
+        )
+      `
+      )
+      .eq('organization_id', orgId);
+    console.log('data', data);
+    console.log('error', error);
+    isLoading = false;
+
+    if (error) {
+      console.error('Error loading community', error);
+      return goto(isLMS ? '/lms' : $currentOrgPath);
+    }
+
+    discussions =
+      data?.map((discussion) => ({
+        title: discussion.title,
+        slug: discussion.slug,
+        author: discussion?.author?.profile?.fullname,
+        comments: discussion.comments?.[0]?.count || 0,
+        votes: discussion.votes,
+        createdAt: calDateDiff(discussion.created_at)
+      })) || [];
+  }
+
+  $: fetchCommunityQuestions($currentOrg.id);
+</script>
+
+<div
+  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-neutral-800"
+>
+  {#if isLoading}
+    <CommunityLoader />
+    <CommunityLoader />
+    <CommunityLoader />
+    <CommunityLoader />
+  {:else}
+    {#each discussions as discussion}
+      <div class="w-full flex border-bottom-c p-5">
+        <Vote value={discussion.votes} />
+        <div class="discussion-topic-author">
+          <h4>
+            <a
+              class="text-black dark:text-white"
+              href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}"
+            >
+              {discussion.title}
+            </a>
+          </h4>
+          <span class="text-gray-600 dark:text-white">
+            {discussion.author} asked {discussion.createdAt}
+          </span>
+        </div>
+        <Space />
+        <div class="flex items-center">
+          <AddCommentIcon size={20} />
+          <span class="ml-1">{discussion.comments}</span>
+        </div>
+      </div>
+    {:else}
+      <Box className="w-screen">
+        <CoursesEmptyIcon />
+        <h3 class="dark:text-white text-2xl my-5">No Questions asked</h3>
+        <p class="dark:text-white w-1/3 text-center">Ask a question to the community</p>
+      </Box>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  h4 {
+    font-size: 16px;
+    font-weight: 900;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    margin: 0;
+  }
+
+  .discussion-topic-author {
+    margin-right: 20px;
+  }
+  .discussion-topic-author span {
+    font-size: 12px;
+  }
+</style>