Files

52 lines
1.9 KiB
TypeScript
Raw Permalink Normal View History

"use client";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
async function fetchProjects() {
const res = await fetch("/api/projects?status=open");
return res.json();
}
export default function DashboardPage() {
const { data: projects, isLoading } = useQuery({ queryKey: ["projects"], queryFn: fetchProjects });
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white border-b px-6 py-4 flex items-center justify-between">
<h1 className="text-xl font-bold">Freelancer Match</h1>
<nav className="flex gap-4">
<Link href="/projects" className="text-gray-600 hover:text-blue-600">Проекты</Link>
<Link href="/ai-match" className="text-gray-600 hover:text-blue-600">AI-матчинг</Link>
</nav>
</header>
{/* Content */}
<main className="container mx-auto px-4 py-8">
<h2 className="text-2xl font-bold mb-6">Добро пожаловать!</h2>
{isLoading ? (
<p>Загрузка...</p>
) : projects && projects.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{projects.map((project) => (
<Link key={project.id} href={`/projects/${project.id}`} className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition">
<h3 className="font-semibold mb-2">{project.title}</h3>
<p className="text-gray-600 text-sm line-clamp-2">{project.description}</p>
{project.budget_max && (
<div className="mt-3 text-green-600 font-medium">
до {project.budget_max.toLocaleString()}
</div>
)}
</Link>
))}
</div>
) : (
<p className="text-gray-500">Нет доступных проектов</p>
)}
</main>
</div>
);
}