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}`}

components/Rating.tsx

@@ -2,6 +2,27 @@ import { IconStar, IconStarFilled } from "@components/icons.tsx";
 import { useSignal } from "@preact/signals";
 import { useState } from "preact/hooks";
 
+export const SmallRating = (
+  { max = 5, rating }: { max?: number; rating: number },
+) => {
+  return (
+    <div
+      class="flex gap-1 rounded"
+      style={{ filter: "drop-shadow(0px 3px 3px black)" }}
+    >
+      {Array.from({ length: max }).map((_, i) => {
+        return (
+          <span>
+            {(i + 1) <= rating
+              ? <IconStarFilled class="w-3 h-3" />
+              : <IconStar class="w-3 h-3" />}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
 export const Rating = (
   props: { max?: number; rating: number },
 ) => {