Fusion
6f41fa7cbe
- Install @phosphor-icons/react package - Create centralized Icon component with size/weight/color variants - Create icon registry with 34 icons across 5 categories - Replace all raw Unicode symbols with proper icon components - Add icons to navigation, buttons, status indicators, git operations - Add icon CSS with consistent sizing and spacing - Fix type definitions for Phosphor icon compatibility Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Icon } from "./icon";
|
|
|
|
interface WorkspaceHeaderProps {
|
|
project: {
|
|
id: string;
|
|
name: string;
|
|
description?: string | null;
|
|
};
|
|
currentRepo?: {
|
|
id: string;
|
|
name: string;
|
|
} | null;
|
|
}
|
|
|
|
export const WorkspaceHeader = ({ project, currentRepo }: WorkspaceHeaderProps) => {
|
|
return (
|
|
<div className="workspace-header">
|
|
<div className="workspace-header-left">
|
|
<div className="workspace-header-icon">
|
|
<Icon name="folder" size="lg" />
|
|
</div>
|
|
<div className="workspace-header-info">
|
|
<h1 className="workspace-header-title">{project.name}</h1>
|
|
{currentRepo && (
|
|
<span className="workspace-header-subtitle">{currentRepo.name}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="workspace-header-actions">
|
|
<Link
|
|
className="workspace-header-action-btn"
|
|
to={`/projects/${project.id}/repositories/${currentRepo?.id || ""}/history`}
|
|
>
|
|
<Icon name="history" size="sm" />
|
|
History
|
|
</Link>
|
|
<Link
|
|
className="workspace-header-action-btn"
|
|
to={`/projects/${project.id}/settings`}
|
|
>
|
|
<Icon name="settings" size="sm" />
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|