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>
|
||
);
|
||
}
|