feat: optimize navigation

components/RecipeCard.tsx

@@ -2,7 +2,7 @@ import { Card } from "@components/Card.tsx";
 import { Recipe } from "@lib/recipes.ts";
 
 export function RecipeCard({ recipe }: { recipe: Recipe }) {
-  const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe;
+  const { meta: { image = "/placeholder.svg" } = {} } = recipe;
 
   const imageUrl = image.startsWith("Recipes/images/")
     ? `/api/images?image=${image}&width=200&height=200`

components/RecipeHero.tsx

@@ -3,19 +3,26 @@ import { Recipe } from "@lib/recipes.ts";
 import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
 import { Star } from "@components/Stars.tsx";
 export function RecipeHero({ recipe }: { recipe: Recipe }) {
-  const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe;
+  const { meta: { image } = {} } = recipe;
 
-  const imageUrl = image.startsWith("Recipes/images/")
+  const imageUrl = image?.startsWith("Recipes/images/")
     ? `/api/images?image=${image}&width=800`
     : image;
 
   return (
-    <div class="relative w-full h-[400px] rounded-3xl overflow-hidden bg-black">
-      <img
-        src={imageUrl}
-        alt="Recipe Banner"
-        class="object-cover w-full h-full"
-      />
+    <div
+      class={`relative w-full h-[${
+        imageUrl ? 400 : 200
+      }px] rounded-3xl overflow-hidden`}
+    >
+      {imageUrl &&
+        (
+          <img
+            src={imageUrl}
+            alt="Recipe Banner"
+            class="object-cover w-full h-full"
+          />
+        )}
 
       <div class="absolute top-8 left-8 ">
         <a
@@ -40,10 +47,14 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
           </div>
         )}
 
-      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient flex gap-4 items-center pt-12">
+      <div
+        class={`absolute inset-x-0 bottom-0 py-4 px-8 py-8 ${
+          imageUrl ? "noisy-gradient" : ""
+        } flex gap-4 items-center pt-12`}
+      >
         <h2
           class="relative text-4xl font-bold z-10"
-          style={{ color: "#1F1F1F" }}
+          style={{ color: imageUrl ? "#1F1F1F" : "white" }}
         >
           {recipe.name}
         </h2>

components/Stars.tsx

@@ -4,13 +4,14 @@ import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-
 export const Star = (
   { max = 5, rating = 3 }: { max?: number; rating: number },
 ) => {
+  console.log({ max, rating });
   return (
     <div
       class="flex gap-2 px-4 py-2 rounded-2xl bg-gray-200 z-10"
       style={{ color: "#1F1F1F" }}
     >
       {Array.from({ length: max }).map((_, i) => {
-        if (rating >= i) {
+        if ((i + 1) <= rating) {
           return <IconStarFilled class="w-4 h-4" />;
         }
         return <IconStar class="w-4 h-4" />;

components/layouts/main.tsx

@@ -4,18 +4,50 @@ export type Props = {
   children: ComponentChildren;
   title?: string;
   name?: string;
+  url: URL;
   description?: string;
 };
 
-export const MainLayout = ({ children }: Props) => {
+export const MainLayout = ({ children, url }: Props) => {
+  const menu = [
+    {
+      name: "🏡 Home",
+      link: "/",
+    },
+    {
+      name: "🍽️ Recipes",
+      link: "/recipes",
+    },
+    {
+      name: "🍿 Movies",
+      link: "/movies",
+    },
+  ];
+
   return (
-    <>
+    <div class="md:grid" style={{ gridTemplateColumns: "200px 1fr" }}>
+      <aside class="p-4 hidden md:block">
+        <nav class="min-h-fit rounded-3xl p-3 grid gap-3">
+          {menu.map((m) => {
+            return (
+              <a
+                href={m.link}
+                class={`block ${
+                  m.link === url.pathname ? "bg-white text-black" : "text-white"
+                } p-3 text-xl w-full rounded-2xl`}
+              >
+                {m.name}
+              </a>
+            );
+          })}
+        </nav>
+      </aside>
       <main
-        class="max-w-2xl mx-auto lg:max-w-4xl py-5"
+        class="py-5"
         style={{ fontFamily: "Work Sans" }}
       >
         {children}
       </main>
-    </>
+    </div>
   );
 };