26 lines
1.2 KiB
TypeScript
26 lines
1.2 KiB
TypeScript
|
import type { CSSProperties } from 'react'
|
||
|
|
import { Badge, Button, Layout, Space } from '@arco-design/web-react'
|
||
|
|
import { IconDashboard, IconPlus } from '@arco-design/web-react/icon'
|
||
|
|
import { projects } from './project-data'
|
||
|
|
import type { Project } from './project-types'
|
||
|
|
|
||
|
|
const { Sider } = Layout
|
||
|
|
|
||
|
|
export function ProjectRail({ activeProject, onSelectProject }: { activeProject: Project; onSelectProject: (project: Project) => void }) {
|
||
|
|
return (
|
||
|
|
<Sider className="project-rail" width={96}>
|
||
|
|
<Button className="dashboard-button" icon={<IconDashboard />} />
|
||
|
|
<Space className="project-stack" direction="vertical" size={12}>
|
||
|
|
{projects.map((project) => (
|
||
|
|
<Badge key={project.id} count={project.badge} dot={false} className={project.urgent ? 'project-badge urgent' : 'project-badge'}>
|
||
|
|
<button className={activeProject.id === project.id ? 'project-button active' : 'project-button'} onClick={() => onSelectProject(project)} style={{ '--project-color': project.color } as CSSProperties} title={project.name}>
|
||
|
|
{project.short}
|
||
|
|
</button>
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</Space>
|
||
|
|
<Button className="create-project" aria-label="新建项目" icon={<IconPlus />} title="新建项目" />
|
||
|
|
</Sider>
|
||
|
|
)
|
||
|
|
}
|