102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { FolderOpen, ChevronRight, Clock } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Pagination } from "@/components/ui/pagination";
|
|
import { cn } from "@/lib/utils";
|
|
import { formatUnixTimestamp } from "@/lib/date-utils";
|
|
import type { Project } from "@/lib/api";
|
|
|
|
interface ProjectListProps {
|
|
/**
|
|
* Array of projects to display
|
|
*/
|
|
projects: Project[];
|
|
/**
|
|
* Callback when a project is clicked
|
|
*/
|
|
onProjectClick: (project: Project) => void;
|
|
/**
|
|
* Optional className for styling
|
|
*/
|
|
className?: string;
|
|
}
|
|
|
|
const ITEMS_PER_PAGE = 5;
|
|
|
|
/**
|
|
* ProjectList component - Displays a paginated list of projects with hover animations
|
|
*
|
|
* @example
|
|
* <ProjectList
|
|
* projects={projects}
|
|
* onProjectClick={(project) => console.log('Selected:', project)}
|
|
* />
|
|
*/
|
|
export const ProjectList: React.FC<ProjectListProps> = ({
|
|
projects,
|
|
onProjectClick,
|
|
className,
|
|
}) => {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
// Calculate pagination
|
|
const totalPages = Math.ceil(projects.length / ITEMS_PER_PAGE);
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
const endIndex = startIndex + ITEMS_PER_PAGE;
|
|
const currentProjects = projects.slice(startIndex, endIndex);
|
|
|
|
// Reset to page 1 if projects change
|
|
React.useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [projects.length]);
|
|
|
|
return (
|
|
<div className={cn("space-y-4", className)}>
|
|
<div className="space-y-2">
|
|
{currentProjects.map((project, index) => (
|
|
<motion.div
|
|
key={project.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 0.3,
|
|
delay: index * 0.05,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
}}
|
|
>
|
|
<Card
|
|
className="transition-all hover:shadow-md hover:scale-[1.02] active:scale-[0.98] cursor-pointer"
|
|
onClick={() => onProjectClick(project)}
|
|
>
|
|
<CardContent className="flex items-center justify-between p-3">
|
|
<div className="flex items-center space-x-3 flex-1 min-w-0">
|
|
<FolderOpen className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm truncate">{project.path}</p>
|
|
<div className="flex items-center space-x-3 text-xs text-muted-foreground">
|
|
<span>
|
|
{project.sessions.length} session{project.sessions.length !== 1 ? 's' : ''}
|
|
</span>
|
|
<div className="flex items-center space-x-1">
|
|
<Clock className="h-3 w-3" />
|
|
<span>{formatUnixTimestamp(project.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={setCurrentPage}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|