3 files changed, 87 insertions, 0 deletions
diff --git a/src/components/helpers/LabBox.svelte b/src/components/helpers/LabBox.svelte
new file mode 100644
index 0000000..8e78798
--- /dev/null
+++ b/src/components/helpers/LabBox.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type Lab from "../../models/Lab";
+  import Icon from "./Icon.svelte";
+  export let lab: Lab;
+  export let iconClick = () => {};
+  export let iconName: string;
+</script>
+
+<!-- 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">CSCE {lab.course} - {lab.section}</strong>
+      <Icon
+        name={iconName}
+        class="h-6 w-6"
+        handleClick={() => {
+          iconClick();
+        }}
+      />
+    </div>
+  </div>
+  <!-- Bottom half -->
+  <div>
+    <p class="text-xs">{lab.event.info}</p>
+    <p class="text-xs">{lab.building} {lab.room}</p>
+  </div>
+</div>
diff --git a/src/components/helpers/PTBox.svelte b/src/components/helpers/PTBox.svelte
new file mode 100644
index 0000000..646ba09
--- /dev/null
+++ b/src/components/helpers/PTBox.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type PeerTeacher from "../../models/PeerTeacher";
+    import Icon from "./Icon.svelte";
+    export let pt: PeerTeacher;
+
+    let modalID = () => {
+        return `my-modal-${pt.id}`;
+    }
+</script>
+
+<!-- PT Box -->
+<div
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden group"
+>
+    <!-- Top half, name and button -->
+    <div class="flex flex-row items-center ">
+        <!-- Left half, name -->
+        <strong class="flex-grow text-sm">{pt.name}</strong>
+
+        <!-- Right half, button -->
+        <!-- The button to open modal -->
+        <label for={modalID()} class="">
+            <Icon name="info" class="h-6 w-6" />
+        </label>
+
+        <!-- Modal PT event info -->
+        <input type="checkbox" id={modalID()} class="modal-toggle" />
+        <label for={modalID()} class="modal cursor-pointer">
+            <label class="modal-box relative bg-slate-300" for="">
+                <h3 class="text-lg font-bold font-serif underline">
+                    {pt.name}
+                </h3>
+                {#each pt.events as e}
+                    <p class="py-2">
+                        {e.info}
+                    </p>
+                {/each}
+            </label>
+        </label>
+    </div>
+
+    <!-- Bottom half, hours -->
+    <div class="">Hours: {pt.lab_hours}</div>
+</div>
diff --git a/src/components/helpers/UploadButton.svelte b/src/components/helpers/UploadButton.svelte
new file mode 100644
index 0000000..a592a25
--- /dev/null
+++ b/src/components/helpers/UploadButton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let accept = "";
+  export let multiple = false;
+  export let files: FileList | null = null;
+  export let color = "";
+</script>
+
+<label class="btn {color}">
+  Upload
+  <input type="file" {accept} {multiple} bind:files hidden />
+</label>