feat: 调整resource为服务端渲染

apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx

@@ -1,32 +1,20 @@
 import { ResourceBadge } from "@/components/resource";
 import { Card, CardContent } from "@/components/ui/card";
 import { Resource } from "@/lib/types/resource";
-import Image from "next/image";
-import React from "react";
+import ResourceCardImage from "./ResourceCardImage";
 
 interface ResourceCardProps extends React.HTMLProps<HTMLAnchorElement> {
     r: Resource;
 }
 
 export function ResourceCard({ r, ...props }: ResourceCardProps) {
-    const [imageError, setImageError] = React.useState(false);
-
     return (
         <a href={r.link} target="_blank" {...props}>
             <Card className="w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300">
                 <CardContent>
                     <div className="flex gap-6">
                         <div>
-                            {!imageError && <Image
-                                src={r.imageUrl}
-                                alt="资源图片"
-                                width={90}
-                                height={90}
-                                className="rounded-md shadow"
-                                priority
-                                quality={80}
-                                onError={() => setImageError(true)}
-                            />}
+                            <ResourceCardImage imageUrl={r.imageUrl} />
                         </div>
                         <div className="flex-1 overflow-x-hidden">
                             <div className="font-bold text-2xl">{r.title}</div>

apps/frontend/app/(with-header-footer)/resource/components/ResourceCardImage.tsx

@@ -0,0 +1,26 @@
+'use client';
+import React from "react";
+import Image from "next/image";
+
+interface ResourceCardImage {
+    imageUrl: string;
+}
+
+export default function ResourceCardImage({ imageUrl }: ResourceCardImage) {
+    const [imageError, setImageError] = React.useState(false);
+
+    return (
+        <>
+            {!imageError && <Image
+                src={imageUrl}
+                alt="资源图片"
+                width={90}
+                height={90}
+                className="rounded-md shadow"
+                priority
+                quality={80}
+                onError={() => setImageError(true)}
+            />}
+        </>
+    )
+}