Merge pull request #4 from luanmenezes0/wip-03-movie-page-structure

adds movie page structure

package.json

@@ -8,13 +8,13 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "svelte": "^3.44.0",
-    "svelte-preprocess": "^4.10.4",
+    "@sveltejs/kit": "^1.0.0-next.290",
+    "svelte": "^3.46.4",
+    "svelte-preprocess": "^4.10.1",
     "typescript": "^4.6.2"
   },
   "type": "module",
   "dependencies": {
-    "open-props": "^1.3.8"
+    "open-props": "^1.3.9"
   }
 }

src/app.css

@@ -1,9 +1,9 @@
+/* Write your global styles here, in PostCSS syntax */
 @import "open-props/style";
 @import "open-props/normalize";
 
-
 #svelte {
   display: grid;
   grid-template-rows: auto 1fr auto;
   min-height: 99vh;
-}
+}

src/lib/movie/Movie.svelte

@@ -30,6 +30,7 @@
   .card {
     display: grid;
     gap: var(--size-2);
+    grid-template-rows: min-content auto auto;
     background: var(--surface-3);
     border: 1px solid var(--surface-1);
     padding: var(--size-4);
@@ -78,6 +79,7 @@
   }
 
   .watched {
-    background: #000;
+    background: var(--blue-8);
+    border-color: var(--blue-8);
   }
 </style>

src/routes/movies/[id].svelte

@@ -1,5 +1,7 @@
-<script context="module">
-  export async function load({ fetch, params }) {
+<script context="module" lang="ts">
+  import type { LoadInput } from "@sveltejs/kit/types/internal";
+
+  export async function load({ fetch, params }: LoadInput<{ id: string }>) {
     const API_KEY = "09cb613a21480e11c07496d803efc1c7";
 
     const url = new URL(`https://api.themoviedb.org/3/movie/${params.id}`);
@@ -23,17 +25,57 @@
   }
 </script>
 
-<script>
-  export let movie = {};
+<script lang="ts">
+  export let movie;
 </script>
 
-<div>
-  <h2>{movie.title}</h2>
+<div class="movie">
   <img
     src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
     alt={movie.title}
   />
-  <p>
-    {movie.overview}
-  </p>
+  <div class="content">
+    <h2>{movie.title}</h2>
+    <p>
+      {movie.overview}
+    </p>
+    <p>
+      {#each movie.genres as genre}
+        <span class="tag">{genre.name}</span>
+      {/each}
+    </p>
+  </div>
 </div>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .movie {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    justify-content: center;
+    padding-block: var(--size-6);
+  }
+
+  @media only screen and (min-width: 768px) {
+    .movie {
+      flex-direction: row;
+    }
+  }
+
+  .tag {
+    background-color: var(--blue-1);
+    color: var(--blue-4);
+    border-radius: var(--radius-4);
+    padding-inline: var(--size-2);
+    padding-block: 1px;
+    margin-inline: var(--size-1);
+    text-align: center;
+    font-size: var(--font-size-0);
+  }
+</style>