init: push source

2025-06-19 19:24:01 +05:30
commit 8e76d016d4
136 changed files with 38177 additions and 0 deletions
--- a/src/components/ProjectList.tsx
+++ b/src/components/ProjectList.tsx
@@ -0,0 +1,102 @@
+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>
+  );
+};