ActivityBar.tsxā¢1.85 kB
import React from 'react';
import { FilesIcon, PackageIcon, GitBranchIcon } from './icons.js';
import type { View } from '../App.js';
interface ActivityBarProps {
activeView: View;
setActiveView: (view: View) => void;
}
const ActivityBar: React.FC<ActivityBarProps> = ({ activeView, setActiveView }) => {
return (
<div style={styles.activityBar}>
<button
style={{ ...styles.iconButton, ...(activeView === 'files' ? styles.active : {}) }}
onClick={() => setActiveView('files')}
aria-label="File Explorer"
title="File Explorer"
>
<FilesIcon />
</button>
<button
style={{ ...styles.iconButton, ...(activeView === 'packages' ? styles.active : {}) }}
onClick={() => setActiveView('packages')}
aria-label="Package Manager"
title="Package Manager"
>
<PackageIcon />
</button>
<button
style={{ ...styles.iconButton, ...(activeView === 'source-control' ? styles.active : {}) }}
onClick={() => setActiveView('source-control')}
aria-label="Source Control"
title="Source Control"
>
<GitBranchIcon />
</button>
</div>
);
};
const styles: { [key: string]: React.CSSProperties } = {
activityBar: {
width: '50px',
height: '100%',
backgroundColor: 'var(--background-tertiary)',
padding: '10px 0',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
borderRight: '1px solid var(--border-color)',
},
iconButton: {
background: 'none',
border: 'none',
color: 'var(--text-secondary)',
cursor: 'pointer',
padding: '10px',
width: '100%',
position: 'relative',
},
active: {
color: 'var(--accent-secondary)',
borderLeft: '2px solid var(--accent-secondary)',
},
};
export default ActivityBar;