feat: some shit

components/Rating.tsx

@@ -0,0 +1,34 @@
+import { IconStar, IconStarFilled } from "@components/icons.tsx";
+import { useSignal } from "@preact/signals";
+import { useState } from "preact/hooks";
+
+export const Rating = (
+  props: { max?: number; rating: number },
+) => {
+  const [rating, setRating] = useState(props.rating);
+  const [hover, setHover] = useState(0);
+  const max = useSignal(props.max || 5);
+
+  return (
+    <div
+      class="flex gap-2 px-5 rounded-2xl bg-gray-200 z-10"
+      style={{ color: "var(--foreground)", background: "var(--background)" }}
+    >
+      {Array.from({ length: max.value }).map((_, i) => {
+        return (
+          <span
+            class={`my-5 cursor-pointer opacity-${
+              (i + 1) <= rating ? 100 : (i + 1) <= hover ? 20 : 100
+            }`}
+            onMouseOver={() => setHover(i + 1)}
+            onClick={() => setRating(i + 1)}
+          >
+            {(i + 1) <= rating || (i + 1) <= hover
+              ? <IconStarFilled class="w-4 h-4" />
+              : <IconStar class="w-4 h-4" />}
+          </span>
+        );
+      })}
+    </div>
+  );
+};