yuzhiran-dev
95 lines
3.1 KiB
TypeScript
95 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { apiFetch } from '../../../lib/auth';
|
|
|
|
interface Tool {
|
|
id: number;
|
|
name: string;
|
|
description?: string;
|
|
url?: string;
|
|
icon?: string;
|
|
category?: { name: string };
|
|
}
|
|
|
|
export default function ToolsRecommendPage() {
|
|
const [tools, setTools] = useState<Tool[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadTools();
|
|
}, []);
|
|
|
|
async function loadTools() {
|
|
try {
|
|
const res = await apiFetch('/tools?pageSize=10');
|
|
const data = await res.json();
|
|
setTools(data.items || []);
|
|
} catch (e) { console.error(e) }
|
|
setLoading(false);
|
|
}
|
|
|
|
if (loading) return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<Skeleton className="h-8 w-48 mb-6" />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<Skeleton className="h-32 rounded-xl" />
|
|
<Skeleton className="h-32 rounded-xl" />
|
|
<Skeleton className="h-32 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="mb-8">
|
|
<Link href="/discover" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
|
|
← 返回发现
|
|
</Link>
|
|
<h1 className="text-3xl font-bold text-foreground">工具推荐</h1>
|
|
<p className="mt-2 text-muted-foreground">精选热门AI工具</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
{tools.map((tool) => (
|
|
<Link
|
|
key={tool.id}
|
|
href={tool.url || '#'}
|
|
target="_blank"
|
|
className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow flex items-center gap-4"
|
|
>
|
|
{tool.icon ? (
|
|
<img src={tool.icon} alt={tool.name} className="w-12 h-12 rounded-lg object-cover" />
|
|
) : (
|
|
<div className="w-12 h-12 bg-brand-100 rounded-lg flex items-center justify-center text-brand-600 font-bold">
|
|
{tool.name?.[0] || 'T'}
|
|
</div>
|
|
)}
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-foreground">{tool.name}</h3>
|
|
<p className="text-sm text-muted-foreground line-clamp-1">{tool.description}</p>
|
|
{tool.category && (
|
|
<span className="inline-block mt-1 text-xs px-2 py-0.5 bg-muted rounded">
|
|
{tool.category.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{tools.length === 0 && (
|
|
<div className="text-center py-20 text-muted-foreground">
|
|
<p>暂无工具推荐</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|