File size: 1,646 Bytes
c2c8c8d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { X } from 'lucide-react';
import { useEditorStore } from '@/stores/editorStore';
import { cn } from '@/lib/utils';
import { getFileName } from '@glmpilot/shared';
export default function EditorTabs() {
const openFiles = useEditorStore((s) => s.openFiles);
const activeFilePath = useEditorStore((s) => s.activeFilePath);
const setActive = useEditorStore((s) => s.setActive);
const removeFile = useEditorStore((s) => s.removeFile);
const files = Object.values(openFiles);
if (files.length === 0) return null;
return (
<div className="flex items-center bg-background border-b border-border overflow-x-auto">
{files.map((file) => (
<button
key={file.path}
onClick={() => setActive(file.path)}
className={cn(
'group flex items-center gap-2 px-3 py-1.5 text-xs border-r border-border transition-colors min-w-0 shrink-0',
file.path === activeFilePath
? 'bg-card text-foreground'
: 'text-muted-foreground hover:text-foreground hover:bg-card/50'
)}
>
{file.isDirty && (
<span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
)}
<span className="truncate max-w-[120px]">{getFileName(file.path)}</span>
<span
onClick={(e) => {
e.stopPropagation();
removeFile(file.path);
}}
className="opacity-0 group-hover:opacity-100 hover:bg-secondary rounded p-0.5 transition-opacity"
>
<X className="w-3 h-3" />
</span>
</button>
))}
</div>
);
}
|