alice.mosphere.at
this repo has no description
1import React, { useState } from 'react';
2import { ChevronDown, ChevronUp, Folder } from 'lucide-react';
3import SessionItem from './SessionItem';
4
5interface SessionDetail {
6 sessionId: string;
7 startTime: string;
8 endTime: string;
9 shortSummary: string;
10 accomplishments: string[];
11 filesChanged: string[];
12 toolsUsed: string[];
13}
14
15interface ProjectDetail {
16 name: string;
17 path: string;
18 sessions: SessionDetail[];
19}
20
21interface Props {
22 project: ProjectDetail;
23}
24
25export default function ProjectCard({ project }: Props) {
26 const [expanded, setExpanded] = useState(true);
27
28 return (
29 <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
30 <button
31 onClick={() => setExpanded(!expanded)}
32 className="w-full flex items-center justify-between p-3 bg-gray-50/50 hover:bg-gray-50 transition-colors text-left"
33 >
34 <div className="flex items-center gap-2">
35 <div className="p-1.5 bg-blue-100 text-blue-600 rounded">
36 <Folder size={16} />
37 </div>
38 <div>
39 <h3 className="text-sm font-bold text-slate-800">{project.name}</h3>
40 </div>
41 </div>
42 <div className="flex items-center gap-3 text-slate-500">
43 <span className="text-xs font-medium">{project.sessions.length} sessions</span>
44 {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
45 </div>
46 </button>
47
48 {expanded && (
49 <div className="px-3 pb-3">
50 <div className="mt-2 ml-1">
51 {project.sessions.map((session) => (
52 <SessionItem key={session.sessionId} session={session} />
53 ))}
54 </div>
55 </div>
56 )}
57 </div>
58 );
59}