feat: implement conference to loop over peers and render

README.md

@@ -1,5 +1,7 @@
 A hello world app for Svelte + 100ms. Built with SvelteKit.
 
+Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/react-quickstart) for Svelte.
+
 ### Steps
 
 1. Svelte kit create, git init
@@ -27,4 +29,6 @@ A hello world app for Svelte + 100ms. Built with SvelteKit.
    2. Creating a few helper svelte store wrappers in hmsStores.ts for commonly used selectors
 8. Create a hmsStore.ts file with helper function to convert from hms to svelte store and create two stores for isConnected and peers in the room.
 9. Implement page.svelte, also add a leave on unload function for handling tab closing. Implement header with a logo and a leave button.
-10. Implement JoinForm, takes in name and token and calls join function
+10. Implement JoinForm, takes in name and token and calls join function
+11. Implement Conference, create a stub Peer.Svelte. Peer.svelte will use the Video.svelte file to render video and additionally show more details related to the peer.
+12. 

src/routes/Conference.svelte

@@ -1 +1,40 @@
-<p>Conference</p>
+<script>
+    import {hmsPeers} from "./hmsStores.ts";
+    import Peer from "./Peer.svelte";
+</script>
+
+
+<section class="conference-section">
+    <h2>Conference</h2>
+
+    <div class="peers-container">
+        {#each $hmsPeers as peer}
+            <Peer {peer} />
+        {/each}
+    </div>
+</section>
+
+<style>
+    .conference-section {
+        max-width: 960px;
+
+        padding: 20px 30px;
+        margin: 0 auto;
+    }
+
+    .conference-section h2 {
+        text-align: center;
+        font-size: 32px;
+
+        padding-bottom: 10px;
+
+        border-bottom: 1px solid #546e7a;
+    }
+
+    .peers-container {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(min-content, 1fr));
+        place-items: center;
+        grid-gap: 10px;
+    }
+</style>

src/routes/Peer.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let peer;
+</script>
+
+<p>
+    Peer - {peer.name}
+</p>

svelte.config.js

@@ -8,8 +8,7 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter(),
-		prerender: { enabled: false }
+		adapter: adapter()
 	}
 };