调整资源组件

tone-page-web/app/resource/components/ResourceCard.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Resource } from "@/lib/types/resource";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+interface ResourceCardProps {
+    resource: Resource;
+    key: string;
+}
+
+export function ResourceCard({ resource, key }: ResourceCardProps) {
+    return (
+        <a href={resource.link} target="_blank" key={key}>
+            <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}
+                                alt="资源图片"
+                                width={90}
+                                height={90}
+                                className="rounded-md shadow"
+                                priority
+                                quality={100}
+                            />
+                        </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="flex gap-2 flex-wrap mt-4">
+                                {
+                                    resource.tags.map((tag) => (
+                                        <div
+                                            id={tag.id}
+                                            className="text-[10px] text-zinc-500 font-medium py-[1px] px-1.5 rounded-full bg-zinc-200"
+                                            style={{ backgroundColor: tag.color }}
+                                        >{tag.name}</div>
+                                    ))
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </a>
+    )
+}

tone-page-web/app/resource/page.tsx

@@ -3,6 +3,7 @@ import {
     CardContent,
 } from "@/components/ui/card";
 import Image from "next/image";
+import { ResourceCard } from "./components/ResourceCard";
 
 export default function Resources() {
     return (
@@ -13,36 +14,21 @@ export default function Resources() {
                 ，继续使用或浏览表示您接受协议条款。</p>
 
             <div className="mt-6 sm:mt-10 md:mt-15 w-full flex flex-col md:w-auto md:mx-auto md:grid grid-cols-2 2xl:gap-x-35 lg:gap-x-20 gap-x-10 lg:gap-y-10 gap-y-5 sm:mb-10 duration-300">
-                {
+                <ResourceCard
-                    [0, 1, 2, 3, 4, 5].map(() => (
+                    key="1"
-                        <a href="" target="_blank" key={Math.random()}>
+                    resource={{
-                            <Card className="w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300">
+                        id: Math.random().toString(),
-                                <CardContent>
+                        title: "Adobe全家桶",
-                                    <div className="flex gap-6">
+                        description: "包含了macOS、Windows操作系统的Adobe全系列软件",
-                                        <div>
+                        imageUrl: "",
-                                            <Image
+                        link: "https://bing.com",
-                                                src={''}
+                        tags: [
-                                                alt="资源图片"
+                            { id: "1", name: "第三方来源", color: "" },
-                                                width={100}
+                            { id: "2", name: "macOS", color: "#dbedfd" },
-                                                height={100}
+                            { id: "3", name: "Windows", color: "#dbedfd" },
-                                                className="rounded-md shadow"
+                        ],
-                                                priority
+                    }}
-                                                quality={100}
+                />
-                                            />
-                                        </div>
-                                        <div className="flex-1 overflow-x-hidden">
-                                            <div className="font-bold text-2xl">Title 666 66 666 66 </div>
-                                            <div className="font-medium text-sm text-zinc-400">你好这是一段随机文本，你好这是一段随机文本，你好这是一段随机文本，</div>
-                                            <div className="flex gap-2 flex-wrap mt-2">
-                                                <div className="text-[10px] text-zinc-500 font-medium py-[1px] px-1.5 rounded-full bg-zinc-200">第三方来源</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </CardContent>
-                            </Card>
-                        </a>
-                    ))
-                }
             </div>
         </div>
     )

tone-page-web/lib/types/resource.ts

@@ -0,0 +1,14 @@
+export type TagType = {
+    id: string;
+    name: string;
+    color: string;
+}
+
+export interface Resource {
+    id: string;
+    title: string;
+    description: string;
+    imageUrl: string;
+    link: string;
+    tags: TagType[];
+}