67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import Link from "next/link";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
async function fetchProject(id: string) {
|
|
const res = await fetch(`/api/projects/${id}`);
|
|
if (!res.ok) throw new Error("Проект не найден");
|
|
return res.json();
|
|
}
|
|
|
|
export default function ProjectPage() {
|
|
const params = useParams<{ id: string }>();
|
|
const router = useRouter();
|
|
|
|
const { data: project, isLoading } = useQuery({
|
|
queryKey: ["project", params.id],
|
|
queryFn: () => fetchProject(params.id),
|
|
});
|
|
|
|
if (isLoading) return <div className="min-h-screen flex items-center justify-center">Загрузка...</div>;
|
|
if (!project) return <div>Проект не найден</div>;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<header className="bg-white border-b px-6 py-4 flex items-center justify-between">
|
|
<Link href="/dashboard" className="text-blue-600 hover:text-blue-800">← Назад</Link>
|
|
<h1 className="text-xl font-bold">Freelancer Match</h1>
|
|
</header>
|
|
|
|
<main className="container mx-auto px-4 py-8 max-w-3xl">
|
|
<div className="bg-white rounded-xl shadow-sm p-6 mb-6">
|
|
<h2 className="text-2xl font-bold mb-4">{project.title}</h2>
|
|
<p className="text-gray-700 whitespace-pre-wrap mb-4">{project.description}</p>
|
|
|
|
{project.category && (
|
|
<span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
|
|
{project.category}
|
|
</span>
|
|
)}
|
|
|
|
<div className="mt-4 flex gap-2 flex-wrap">
|
|
{project.required_skills.map((skill: string) => (
|
|
<span key={skill} className="px-2 py-1 bg-gray-100 rounded text-sm">{skill}</span>
|
|
))}
|
|
</div>
|
|
|
|
{(project.budget_min || project.budget_max) && (
|
|
<div className="mt-4 p-3 bg-green-50 rounded">
|
|
{project.budget_min ? `${project.budget_min.toLocaleString()}₽` : "—"} —{" "}
|
|
{project.budget_max ? `${project.budget_max.toLocaleString()}₽` : "до бесконечности"}
|
|
</div>
|
|
)}
|
|
|
|
{project.deadline && (
|
|
<p className="mt-2 text-sm text-gray-500">Дедлайн: {new Date(project.deadline).toLocaleDateString("ru-RU")}</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button onClick={() => router.push("/auth/login")}>Оставить заявку</Button>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|