1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import React from "react";
import type { Project, Session, Phase } from "../types";
interface HeaderProps {
projects: Project[];
sessions: Session[];
selectedProject: Project | null;
selectedSession: Session | null;
onSelectProject: (project: Project | null) => void;
onSelectSession: (session: Session | null) => void;
onCreateProject: () => void;
onCreateSession: () => void;
}
const phaseLabels: Record<Phase, string> = {
research: "Research",
plan: "Plan",
implement: "Implement",
};
const phases: Phase[] = ["research", "plan", "implement"];
export function Header({
projects,
sessions,
selectedProject,
selectedSession,
onSelectProject,
onSelectSession,
onCreateProject,
onCreateSession,
}: HeaderProps) {
return (
<header className="header">
<div className="header-left">
<select
value={selectedProject?.id || ""}
onChange={(e) => {
const project = projects.find((p) => p.id === e.target.value);
onSelectProject(project || null);
onSelectSession(null);
}}
>
<option value="">Select Project...</option>
{projects.map((p) => (
<option key={p.id} value={p.id}>
{p.name}
</option>
))}
</select>
<button onClick={onCreateProject}>+ Project</button>
{selectedProject && (
<>
<select
value={selectedSession?.id || ""}
onChange={(e) => {
const session = sessions.find((s) => s.id === e.target.value);
onSelectSession(session || null);
}}
>
<option value="">Select Session...</option>
{sessions.map((s) => (
<option key={s.id} value={s.id}>
{s.name}
</option>
))}
</select>
<button onClick={onCreateSession}>+ Session</button>
</>
)}
</div>
<div className="header-right">
{selectedSession && (
<div className="phase-indicator">
{phases.map((phase) => {
const phaseIndex = phases.indexOf(phase);
const currentIndex = phases.indexOf(selectedSession.phase);
const isComplete = phaseIndex < currentIndex;
const isActive = phase === selectedSession.phase;
return (
<span
key={phase}
className={`phase-step ${isActive ? "active" : ""} ${
isComplete ? "complete" : ""
}`}
>
{phaseLabels[phase]}
</span>
);
})}
</div>
)}
</div>
</header>
);
}
|
