实现resource界面

tone-page-web/app/(with-header-footer)/resource/components/ResourceCard.tsx

@@ -2,35 +2,38 @@ 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";
 
-interface ResourceCardProps {
-    resource: Resource;
-    key: string;
+interface ResourceCardProps extends React.HTMLProps<HTMLAnchorElement> {
+    r: Resource;
 }
 
-export function ResourceCard({ resource, key }: ResourceCardProps) {
+export function ResourceCard({ r, ...props }: ResourceCardProps) {
+    const [imageError, setImageError] = React.useState(false);
+
     return (
-        <a href={resource.link} target="_blank" key={key}>
+        <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>
-                            <Image
-                                src={resource.imageUrl}
+                            {!imageError && <Image
+                                src={r.imageUrl}
                                 alt="资源图片"
                                 width={90}
                                 height={90}
                                 className="rounded-md shadow"
                                 priority
                                 quality={100}
-                            />
+                                onError={() => setImageError(true)}
+                            />}
                         </div>
                         <div className="flex-1 overflow-x-hidden">
-                            <div className="font-bold text-2xl">{resource.title}</div>
-                            <div className="font-medium text-sm text-zinc-400 mt-1">{resource.description}</div>
+                            <div className="font-bold text-2xl">{r.title}</div>
+                            <div className="font-medium text-sm text-zinc-400 mt-1">{r.description}</div>
                             <div className="flex gap-2 flex-wrap mt-4">
                                 {
-                                    resource.tags.map((tag) => (
+                                    r.tags.map((tag) => (
                                         <ResourceBadge tag={tag} />
                                     ))
                                 }