Create PosterList component

src/lib/Poster.svelte

@@ -5,10 +5,12 @@
   export let poster: string;
 </script>
 
-<div>
-  <img src={poster} alt="poster" />
-  <!-- <span>{content.title}</span> -->
-</div>
+<li>
+  <div>
+    <img src={poster} alt="poster" />
+    <!-- <span>{content.title}</span> -->
+  </div>
+</li>
 
 <style lang="scss">
   div {

src/lib/PosterList.svelte

@@ -0,0 +1,23 @@
+<div>
+  <ul>
+    <slot />
+  </ul>
+</div>
+
+<style lang="scss">
+  div {
+    display: flex;
+    justify-content: center;
+  }
+
+  ul {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    gap: 10px;
+    list-style: none;
+    flex-wrap: wrap;
+    margin: 20px;
+    max-width: 1200px;
+  }
+</style>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Poster from "@/lib/Poster.svelte";
+  import PosterList from "@/lib/PosterList.svelte";
 
   export let data: import("./$types").PageData;
 </script>
@@ -8,26 +9,8 @@
   <title>Watcharr</title>
 </svelte:head>
 
-<div>
-  <ul>
-    {#each data.watched as w}
-      <li><Poster poster={w.poster} /></li>
-    {/each}
-  </ul>
-</div>
-
-<style lang="scss">
-  div {
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-
-    ul {
-      display: flex;
-      flex-flow: row;
-      gap: 10px;
-      list-style: none;
-      flex-wrap: wrap;
-    }
-  }
-</style>
+<PosterList>
+  {#each data.watched as w}
+    <Poster poster={w.poster} />
+  {/each}
+</PosterList>

src/routes/search/[query]/+page.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import Poster from "@/lib/Poster.svelte";
+  import PosterList from "@/lib/PosterList.svelte";
   import type { ContentSearch } from "./+page";
 
   export let data: ContentSearch;
 </script>
 
-<div>
-  <ul>
-    {#each data.results as w}
-      <li><Poster poster={"https://image.tmdb.org/t/p/w500" + w.poster_path} /></li>
-    {/each}
-  </ul>
-</div>
+<PosterList>
+  {#each data.results as w}
+    <Poster poster={"https://image.tmdb.org/t/p/w500" + w.poster_path} />
+  {/each}
+</PosterList>