From 90d3e088d7e90e856bb8f406b5b70938a5e1c64e Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 19:01:47 -0500
Subject: Labs display for section Assign Labs

---
 src/components/AssignLabs/Lab.svelte | 43 ++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/AssignLabs/Lab.svelte b/src/components/AssignLabs/Lab.svelte
index 94e1d69..d3d8a6a 100644
--- a/src/components/AssignLabs/Lab.svelte
+++ b/src/components/AssignLabs/Lab.svelte
@@ -1,8 +1,43 @@
 <script lang="ts">
     import type Lab from "../../models/Lab";
-    export let datum: Lab;
+    import Icon from "../helpers/Icon.svelte";
+    export let lab: Lab;
+    export let assign: boolean = true;
 </script>
 
-<div>
-    {datum.course}
-</div>
\ No newline at end of file
+<!-- Lab box -->
+<div
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
+>
+    <!-- Lab content -->
+    <div class="flex flex-col">
+        <!-- Top Half -->
+        <div class="flex flex-row">
+            <strong class="flex-grow">{lab.course} - {lab.section}</strong>
+            {#if assign}
+                <Icon name="plus-circle" class="h-6 w-6"/>
+            {:else}
+                <Icon name="minus-circle" class=""/>
+            {/if}
+        </div>
+    </div>
+    <!-- Bottom half -->
+    <div>
+        <p class="text-xs">{lab.event.info}</p>
+        <p class="text-xs">{lab.building} {lab.room}</p>
+    </div>
+</div>
+
+<!-- <div
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
+>
+    <div class="flex flex-row items-center">
+        <div class="flex-grow">
+            <strong class="">{lab.course} - {lab.section}</strong>
+            <p class="text-xs">{lab.event.info}</p>
+            <p class="text-xs">{lab.building} {lab.room}</p>
+        </div>
+
+        <div>hi</div>
+    </div>
+</div> -->
-- 
cgit v1.2.3