35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
|
import React, { memo } from 'react';
|
||
|
|
import type { FileSystemItem as FileSystemItemType } from '../types';
|
||
|
|
import FolderIcon from './FolderIcon';
|
||
|
|
import FileIcon from './FileIcon';
|
||
|
|
|
||
|
|
interface FileItemProps {
|
||
|
|
item: FileSystemItemType;
|
||
|
|
isSelected: boolean;
|
||
|
|
onSelect: (id: string) => void;
|
||
|
|
onDoubleClick?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FileItem: React.FC<FileItemProps> = ({ item, isSelected, onSelect, onDoubleClick }) => {
|
||
|
|
const itemClasses = `grid grid-cols-12 gap-4 px-4 py-3 items-center transition-colors duration-150 cursor-pointer ${isSelected ? 'bg-indigo-600/30' : 'hover:bg-slate-700/30'
|
||
|
|
}`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => onSelect(item.id)}
|
||
|
|
onDoubleClick={onDoubleClick}
|
||
|
|
className={itemClasses}
|
||
|
|
>
|
||
|
|
<div className="col-span-6 flex items-center gap-3">
|
||
|
|
{item.type === 'folder' ? <FolderIcon /> : <FileIcon />}
|
||
|
|
<span className="text-slate-200 text-sm truncate" title={item.name}>{item.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className="col-span-3 text-right text-slate-400 text-xs font-mono">{item.modified}</div>
|
||
|
|
<div className="col-span-2 text-right text-slate-400 text-xs font-mono">{item.size || '—'}</div>
|
||
|
|
<div className="col-span-1"></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default memo(FileItem);
|