feat: update some shit

islands/Recommendations.tsx

@@ -1,9 +1,16 @@
 import { useCallback, useState } from "preact/hooks";
+import { IconWand } from "@components/icons.tsx";
 
-export function Recommendations({ id, type }: { id: string; type: string }) {
-  const [state, setState] = useState<"disabled" | "loading">(
-    "disabled",
-  );
+type RecommendationState = "disabled" | "loading";
+
+export function Recommendations(
+  { id, type, load = false }: {
+    id: string;
+    type: string;
+    load?: boolean;
+  },
+) {
+  const [state, setState] = useState<RecommendationState>("disabled");
   const [results, setResults] = useState();
 
   const startFetch = useCallback(
@@ -17,27 +24,54 @@ export function Recommendations({ id, type }: { id: string; type: string }) {
     [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 (load) {
+    startFetch();
   }
 
-  if (state === "loading") {
-    return <p>Loading...</p>;
-  }
+  return (
+    <span>
+      {results && (
+        <div
+          style={{ boxShadow: "0px 49px 33px #1412183b inset" }}
+          class="relative w-full bg-white -mt-10 pt-10 -z-50 rounded-2xl p-5"
+        >
+          <h3 class="text-2xl my-5 flex items-center gap-2">
+            Similar Movies
+          </h3>
+          <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>
+        </div>
+      )}
 
-  return <button onClick={startFetch}>load recommendations</button>;
+      {state === "loading" && !results && (
+        <div
+          style={{ boxShadow: "0px 49px 33px #1412183b inset" }}
+          class="relative w-full bg-white -mt-10 pt-10 -z-50 rounded-2xl p-5"
+        >
+          <p class="mt-5">Loading...</p>
+        </div>
+      )}
+
+      {!results && state === "disabled" &&
+        (
+          <button
+            onClick={startFetch}
+            class="ml-8 mt-2 font-thin flex items-center gap-2 text-white my-2"
+          >
+            <IconWand class="w-4" /> Similar
+          </button>
+        )}
+    </span>
+  );
 }