feat: allow filtering with null (no) rating

components/Card.tsx

@@ -1,15 +1,25 @@
 import { isLocalImage, isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 import { GenericResource } from "@lib/types.ts";
+import { Rating, SmallRating } from "@components/Rating.tsx";
 
 export function Card(
-  { link, title, image, thumbnail, backgroundColor, backgroundSize = 100 }: {
+  {
+    link,
+    rating,
+    title,
+    image,
+    thumbnail,
+    backgroundColor,
+    backgroundSize = 100,
+  }: {
     backgroundSize?: number;
     backgroundColor?: string;
     thumbnail?: string;
     link?: string;
     title?: string;
     image?: string;
+    rating?: number;
   },
 ) {
   const backgroundStyle = {
@@ -55,13 +65,21 @@ export function Card(
           boxShadow: "0px -60px 40px black inset, 0px 10px 20px #fff1 inset",
         }}
       >
-        <div>
+        <div class="flex-1">
           {/* Recipe Card content */}
         </div>
-        <div class="mt-2 flex items-center gap-2">
+        <div
+          class="mt-2 flex items-center gap-2"
+          style={{ textShadow: "0px 0px 10px black" }}
+        >
           {isYoutubeLink(link || "") && <IconBrandYoutube />}
           {title}
         </div>
+        {rating !== undefined && (
+          <div class="my-2">
+            <SmallRating rating={rating} />
+          </div>
+        )}
       </div>
       <div class="absolute inset-x-0 bottom-0 h-3/4" />
     </a>
@@ -81,6 +99,7 @@ export function ResourceCard(
     <Card
       title={res.name}
       backgroundColor={res.meta?.average}
+      rating={res.meta?.rating}
       thumbnail={res.meta?.thumbnail}
       image={imageUrl}
       link={`/${sublink}/${res.id}`}