61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getProjects, Project } from '../../lib/api';
|
|
|
|
export default function ProjectsPage() {
|
|
const {
|
|
data: projects,
|
|
isLoading,
|
|
isError,
|
|
error
|
|
} = useQuery<Project[], Error>({
|
|
queryKey: ['projects'],
|
|
queryFn: getProjects
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-slate-900">Projects</h1>
|
|
<p className="text-sm text-slate-600">Browse and open your existing audio projects.</p>
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className="rounded-md border border-indigo-200 px-3 py-2 text-sm text-indigo-600 hover:bg-indigo-50"
|
|
>
|
|
New Project
|
|
</Link>
|
|
</div>
|
|
|
|
{isLoading && <p className="text-slate-500">Loading projects...</p>}
|
|
{isError && <p className="text-red-600">{error.message}</p>}
|
|
|
|
{projects && projects.length === 0 && (
|
|
<div className="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center text-slate-500">
|
|
No projects yet. Create one from the backend or CLI.
|
|
</div>
|
|
)}
|
|
|
|
{projects && projects.length > 0 && (
|
|
<ul className="grid gap-4 sm:grid-cols-2">
|
|
{projects.map((project) => (
|
|
<li key={project.id} className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
|
<h2 className="text-lg font-medium text-slate-900">{project.name}</h2>
|
|
{project.description && <p className="mt-1 text-sm text-slate-600">{project.description}</p>}
|
|
<div className="mt-4 flex items-center justify-between text-sm text-slate-500">
|
|
{project.created_at && <span>Created {new Date(project.created_at).toLocaleDateString()}</span>}
|
|
<Link href={`/projects/${project.id}`} className="text-indigo-600 hover:text-indigo-500">
|
|
Open
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|