feat: add loading of recommendations to movie page

islands/Recommendations.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useState } from "preact/hooks";
+
+export function Recommendations({ id, type }: { id: string; type: string }) {
+  const [state, setState] = useState<"disabled" | "loading">(
+    "disabled",
+  );
+  const [results, setResults] = useState();
+
+  const startFetch = useCallback(
+    async () => {
+      if (state === "loading") return;
+      setState("loading");
+      const res = await fetch(`/api/recommendation/${type}/${id}`);
+      const json = await res.json();
+      setResults(json);
+    },
+    [id, type],
+  );
+
+  if (results) {
+    return (
+      <ul class="gap-5">
+        {results.map((res) => {
+          return (
+            <div class="flex gap-5 items-center mb-4">
+              <img
+                class="w-12 h-12 rounded-full object-cover"
+                src={`https://image.tmdb.org/t/p/original${res.poster_path}`}
+              />
+              <p>{res.title}</p>
+            </div>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  if (state === "loading") {
+    return <p>Loading...</p>;
+  }
+
+  return <button onClick={startFetch}>load recommendations</button>;
+}