feat: better layout in a lot of places

routes/movies/[name].tsx

@@ -3,6 +3,7 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { getMovie, Movie } from "@lib/resource/movies.ts";
 import { RecipeHero } from "@components/RecipeHero.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { HashTags } from "@components/HashTags.tsx";
 
 export const handler: Handlers<Movie | null> = {
   async GET(_, ctx) {
@@ -24,6 +25,12 @@ export default function Greet(props: PageProps<Movie>) {
         backlink="/movies"
       />
       <KMenu type="main" context={movie} />
+      {movie.tags.length > 0 && (
+        <>
+          <br />
+          <HashTags tags={movie.tags} />
+        </>
+      )}
       <div class="px-8 text-white mt-10">
         <pre
           class="whitespace-break-spaces"

routes/movies/index.tsx

@@ -3,6 +3,7 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
 import { getAllMovies, Movie } from "@lib/resource/movies.ts";
 import { MovieCard } from "@components/MovieCard.tsx";
+import { Grid } from "@components/Grid.tsx";
 
 export const handler: Handlers<Movie[] | null> = {
   async GET(_, ctx) {
@@ -25,11 +26,11 @@ export default function Greet(props: PageProps<Movie[] | null>) {
 
         <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
       </header>
-      <div class="flex flex-wrap items-center gap-4 px-4">
+      <Grid>
         {props.data?.map((doc) => {
           return <MovieCard movie={doc} />;
         })}
-      </div>
+      </Grid>
     </MainLayout>
   );
 }