feat: make author clickable

components/Card.tsx

@@ -1,9 +1,11 @@
-import { isYoutubeLink } from "@lib/string.ts";
+import { isLocalImage, isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
+import { GenericResource } from "@lib/types.ts";
 
 export function Card(
-  { link, title, image, thumbnail, backgroundSize = 100 }: {
+  { link, title, image, thumbnail, backgroundColor, backgroundSize = 100 }: {
     backgroundSize?: number;
+    backgroundColor?: string;
     thumbnail?: string;
     link?: string;
     title?: string;
@@ -12,7 +14,7 @@ export function Card(
 ) {
   const backgroundStyle = {
     backgroundSize: "cover",
-    boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
+    backgroundColor: backgroundColor,
   };
 
   if (backgroundSize !== 100) {
@@ -26,18 +28,20 @@ export function Card(
       href={link}
       style={backgroundStyle}
       data-thumb={thumbnail}
-      class="text-white rounded-3xl shadow-md relative 
+      class="text-white rounded-3xl shadow-md relative
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
   w-[37vw] h-[37vw]"
     >
       {true && (
-        <img
-          class="absolute rounded-3xl top-0 left-0 object-cover w-full h-full"
-          data-thumb-img
-          loading="lazy"
-          src={image || "/placeholder.svg"}
-        />
+        <span class="absolute top-0 left-0 overflow-hidden rounded-3xl w-full h-full">
+          <img
+            class="w-full h-full object-cover"
+            data-thumb-img
+            loading="lazy"
+            src={image || "/placeholder.svg"}
+          />
+        </span>
       )}
       <div
         class="p-4 flex flex-col justify-between relative z-10"
@@ -48,7 +52,7 @@ export function Card(
           width: "calc(100% + 0.5px)",
           marginTop: "-0.5px",
           marginLeft: "-0.5px",
-          boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
+          boxShadow: "0px -60px 40px black inset, 0px 10px 20px #fff1 inset",
         }}
       >
         <div>
@@ -63,3 +67,23 @@ export function Card(
     </a>
   );
 }
+
+export function ResourceCard(
+  { res, sublink = "movies" }: { sublink?: string; res: GenericResource },
+) {
+  const { meta: { image = "/placeholder.svg" } = {} } = res;
+
+  const imageUrl = isLocalImage(image)
+    ? `/api/images?image=${image}&width=200&height=200`
+    : image;
+
+  return (
+    <Card
+      title={res.name}
+      backgroundColor={res.meta?.average}
+      thumbnail={res.meta?.thumbnail}
+      image={imageUrl}
+      link={`/${sublink}/${res.id}`}
+    />
+  );
+}