feat: show rating

components/Stars.tsx

@@ -0,0 +1,20 @@
+import IconStar from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star.tsx";
+import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-filled.tsx";
+
+export const Star = (
+  { max = 5, rating = 3 }: { max?: number; rating: number },
+) => {
+  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) {
+          return <IconStarFilled class="w-4 h-4" />;
+        }
+        return <IconStar class="w-4 h-4" />;
+      })}
+    </div>
+  );
+};