43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { FolderKanban } from "lucide-react";
|
|
|
|
import { useProjects } from "@/components/projects/projects-context";
|
|
import { ProjectCard } from "@/components/projects/project-card";
|
|
import { CreateProjectDialog } from "@/components/projects/create-project-dialog";
|
|
|
|
export function ProjectsListView() {
|
|
const { projects } = useProjects();
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-4 p-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Projects</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Each project is its own isolated board -- separate categories, groups, and to-dos from
|
|
Home and from every other project.
|
|
</p>
|
|
</div>
|
|
|
|
{projects.length === 0 && (
|
|
<div className="flex flex-col items-center gap-3 p-8 text-center">
|
|
<div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<FolderKanban className="size-8" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold">No projects yet</h2>
|
|
<p className="max-w-sm text-sm text-muted-foreground">
|
|
Create one to get its own board, separate from Home.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4">
|
|
{projects.map((project) => (
|
|
<ProjectCard key={project.id} project={project} />
|
|
))}
|
|
<CreateProjectDialog />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|