Made table and workshop components; tested looping with components

src/routes/(site)/workshops/+page.svelte

@@ -1,48 +1,21 @@
-<script>
+<script lang="ts">
   import Spacing from '$lib/public/legacy/spacing.svelte';
+  import TeamTable from './team-table.svelte';
+  import Workshop from './workshop.svelte';
+  let ws = [['hi', 'now', 'hi there'], ['bye', 'yesterday', 'bye there']];
+  let teams = ["OSS", "AI", "Dev", "Algo"];
 </script>
 
+
+
 <Spacing --min="125px" --med="150px" --max="150px" />
 
-<div class="hero-container">
-  <h1>Open Source Software Workshops</h1>
-  <br><br>
-  <table>
-    <tr>
-      <th>Workshop</th>
-      <th>Timestamp</th>
-      <th class="desc">Description</th>
-    </tr>
-    <tr>
-      <td>Intro to Java</td>
-      <td>3/14/24</td>
-      <td class="desc">Best language</td>
-    </tr>
-    <tr>
-      <td>Intro to VIM</td>
-      <td>2/29/24</td>
-      <td class="desc">Best Editor</td>
-    </tr>
-  </table>
-</div>
+{#each {length: 4} as _, i}
+  <TeamTable team={teams[i]} data={ws} />
+{/each}
+
+<Spacing --min="125px" --med="150px" --max="150px" />
 
 <style>
-  .hero-container {
-    margin: 40px;
-  }
-  table {
-    border: 3px white solid;
-    margin: auto;
-  }
-  th {
-    background-color: var(--acm-abyss);
-  }
-  th, td {
-    border: 3px gray solid;
-    padding: 7px;
-  }
-  .desc {
-    padding-left: 35px;
-    padding-right: 35px;
-  }
+  
 </style>

src/routes/(site)/workshops/team-table.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Workshop from "./workshop.svelte";
+
+  export let team: string;
+  export let data: string[][]; // subsitute for later data
+</script>
+
+<div class="hero-container">
+  <h1>{team} Workshops</h1>
+  <br><br>
+  <table>
+    <tr>
+      <th>Workshop</th>
+      <th>Timestamp</th>
+      <th class="desc">Description</th>
+    </tr>
+    {#each {length: 2} as _, i}
+      <tr>
+        <Workshop title={data[i][0]} date={data[i][1]} desc={data[i][2]} />
+      </tr>
+    {/each}
+    <!-- <tr>
+      <td>Intro to VIM</td>
+      <td>2/29/24</td>
+      <td class="desc">Best Editor</td>
+    </tr> -->
+  </table>
+</div>
+
+
+<style>
+  .hero-container {
+    margin: 40px;
+  }
+  table {
+    border: 3px white solid;
+    margin: auto;
+  }
+  th {
+    background-color: var(--acm-abyss);
+  }
+  th, td {
+    border: 3px gray solid;
+    padding: 7px;
+  }
+  .desc {
+    padding-left: 35px;
+    padding-right: 35px;
+  }
+</style>

src/routes/(site)/workshops/workshop.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import EmptyContainer from "../events/empty-container.svelte";
+
+  export let title: string;
+  export let date: string;
+  export let desc: string;
+</script>
+
+<td>{title}</td>
+<td>{date}</td>
+<td class="desc">{desc}</td>
+
+<style>
+  td {
+    border: 3px gray solid;
+    padding: 7px;
+    text-align: center;
+  }
+  .desc {
+    padding-left: 35px;
+    padding-right: 35px;
+  }
+</style>