CLASSROOMIO-T-31: Add audience page

Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-6
Merged-by: Digdippa Team <digdippa@gmail.com>

src/routes/_layout.svelte

@@ -248,4 +248,8 @@
   :global(.app-background-color) {
     background-color: var(--app-background-color);
   }
+
+  :global(.bx--data-table-container) {
+    width: 100%;
+  }
 </style>

src/routes/org/[slug]/audience.svelte

@@ -1 +1,31 @@
-Audience Page
+<script>
+  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  import Audience from '../../../components/Audience/index.svelte';
+
+  let isLoading = false;
+  function exportAudience() {
+    isLoading = true;
+    alert('This feature is coming soon');
+    isLoading = false;
+  }
+</script>
+
+<svelte:head>
+  <title>Audience - ClassroomIO</title>
+</svelte:head>
+
+<section class="w-full max-w-6xl mx-auto">
+  <div class="py-10 px-5">
+    <div class="flex items-center justify-between mb-10">
+      <h1 class="text-3xl font-bold">Audience</h1>
+      <PrimaryButton
+        label="Export"
+        onClick={exportAudience}
+        isDisabled={isLoading}
+        {isLoading}
+      />
+    </div>
+
+    <Audience />
+  </div>
+</section>

src/routes/org/[slug]/courses.svelte

@@ -65,7 +65,7 @@
   <title>Courses - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full">
+<section class="w-full max-w-7xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
       <h1 class="text-3xl font-bold">Courses</h1>

src/routes/org/[slug]/index.svelte

@@ -209,7 +209,7 @@
   <title>Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<div class="py-10 px-5">
+<div class="py-10 px-5 w-full max-w-7xl mx-auto">
   <div class="flex items-center justify-between mb-10">
     <h1 class="text-3xl font-bold">Dashboard</h1>
     <PrimaryButton label="Create Course" onClick={createCourse} />