tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整资源组件

Browse Source
This commit is contained in:
tone
2025-04-26 21:59:05 +08:00
parent e67a7f2f01
commit 641f08a042
3 changed files with 78 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
tone-page-web/app/resource/components/ResourceCard.tsx Normal file
View File

@@ -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>
)
}

46
tone-page-web/app/resource/page.tsx
View File

@@ -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">
{
[0, 1, 2, 3, 4, 5].map(() => (
<a href="" target="_blank" key={Math.random()}>
<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={''}
alt="资源图片"
width={100}
height={100}
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>
))
}
<ResourceCard
key="1"
resource={{
id: Math.random().toString(),
title: "Adobe全家桶",
description: "包含了macOS、Windows操作系统的Adobe全系列软件",
imageUrl: "",
link: "https://bing.com",
tags: [
{ id: "1", name: "第三方来源", color: "" },
{ id: "2", name: "macOS", color: "#dbedfd" },
{ id: "3", name: "Windows", color: "#dbedfd" },
],
}}
/>
</div>
</div>
)

14
tone-page-web/lib/types/resource.ts Normal file
View File

@@ -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[];
}