46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { X } from 'lucide-react';
|
|
import { useEditorStore } from '@/store/editor-store';
|
|
import { cn, getFileIcon } from '@/lib/utils';
|
|
|
|
export function FileTabs() {
|
|
const { openFiles, activeFileId, setActiveFile, closeFile } = useEditorStore();
|
|
|
|
if (openFiles.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center bg-surface border-b border-gray-800 overflow-x-auto">
|
|
{openFiles.map((file: any) => (
|
|
<div
|
|
key={file.id}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 border-r border-gray-800 cursor-pointer transition-colors group min-w-fit",
|
|
activeFileId === file.id
|
|
? "bg-background text-white"
|
|
: "bg-surface text-gray-400 hover:text-gray-200"
|
|
)}
|
|
onClick={() => setActiveFile(file.id)}
|
|
>
|
|
<span className="text-sm">{getFileIcon(file.name)}</span>
|
|
<span className="text-sm">{file.name}</span>
|
|
{file.isDirty && (
|
|
<span className="w-2 h-2 rounded-full bg-primary" />
|
|
)}
|
|
<button
|
|
className="ml-2 opacity-0 group-hover:opacity-100 hover:bg-gray-700 rounded p-0.5 transition-opacity"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
closeFile(file.id);
|
|
}}
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|