67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
|
export interface RecentProjectsListProps {
|
|||
|
|
projects: string[];
|
|||
|
|
onOpenProject: (path: string) => void;
|
|||
|
|
onForgetProject: (path: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function RecentProjectsList({
|
|||
|
|
projects,
|
|||
|
|
onOpenProject,
|
|||
|
|
onForgetProject,
|
|||
|
|
}: RecentProjectsListProps) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ marginTop: "12px" }}>
|
|||
|
|
<div style={{ fontSize: "0.9em", color: "#666" }}>Recent projects</div>
|
|||
|
|
<ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0" }}>
|
|||
|
|
{projects.map((project) => {
|
|||
|
|
const displayName =
|
|||
|
|
project.split("/").filter(Boolean).pop() ?? project;
|
|||
|
|
return (
|
|||
|
|
<li key={project} style={{ marginBottom: "6px" }}>
|
|||
|
|
<div
|
|||
|
|
style={{ display: "flex", gap: "6px", alignItems: "center" }}
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => onOpenProject(project)}
|
|||
|
|
style={{
|
|||
|
|
flex: 1,
|
|||
|
|
textAlign: "left",
|
|||
|
|
padding: "8px 10px",
|
|||
|
|
borderRadius: "6px",
|
|||
|
|
border: "1px solid #ddd",
|
|||
|
|
background: "#f7f7f7",
|
|||
|
|
cursor: "pointer",
|
|||
|
|
fontFamily: "monospace",
|
|||
|
|
fontSize: "0.9em",
|
|||
|
|
}}
|
|||
|
|
title={project}
|
|||
|
|
>
|
|||
|
|
{displayName}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
aria-label={`Forget ${displayName}`}
|
|||
|
|
onClick={() => onForgetProject(project)}
|
|||
|
|
style={{
|
|||
|
|
width: "32px",
|
|||
|
|
height: "32px",
|
|||
|
|
borderRadius: "6px",
|
|||
|
|
border: "1px solid #ddd",
|
|||
|
|
background: "#fff",
|
|||
|
|
cursor: "pointer",
|
|||
|
|
fontSize: "1.1em",
|
|||
|
|
lineHeight: 1,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|