Create the File Explorer Component

[sujitkumardebnath2025-cloud]

import React, { useState } from 'react';
import '../../styles/FileExplorer.css';

interface FileItem {
id: number;
name: string;
dateModified: string;
type: string;
size: string;
isFolder: boolean;
icon: string;
}

const FileExplorer: React.FC = () => {
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [searchTerm, setSearchTerm] = useState('');
const [currentTab, setCurrentTab] = useState('Home');

// File and folder data
const fileItems: FileItem[] = [
{ id: 1, name: 'github', dateModified: '04-12-2025 10:38 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 2, name: 'bin', dateModified: '14-12-2025 10:38 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 3, name: 'Data', dateModified: '14-12-2025 10:38 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 4, name: 'docker', dateModified: '14-12-2025 10:38 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 5, name: 'Forms', dateModified: '14-12-2025 10:46 AM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 6, name: 'Models', dateModified: '14-12-2025 10:15 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 7, name: 'obj', dateModified: '21-01-2026 11:08 AM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 8, name: 'Resources', dateModified: '14-12-2025 10:04 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 9, name: 'scripts', dateModified: '14-12-2025 10:13 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 10, name: 'Services', dateModified: '14-12-2025 11:11 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 11, name: 'Setup', dateModified: '13-12-2025 10:16 PM', type: 'File folder', size: '', isFolder: true, icon: '📁' },
{ id: 12, name: '.gitignore', dateModified: '05-12-2025 11:06 PM', type: 'Git Ignore Source', size: '1 KB', isFolder: false, icon: '📄' },
{ id: 13, name: 'ACCOUNTING_MODULE', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
{ id: 14, name: 'AccountingSchema', dateModified: '05-12-2025 10:22 PM', type: 'SQL Source File', size: '5 KB', isFolder: false, icon: '📄' },
{ id: 15, name: 'AccountingSoftwareAI.bat', dateModified: '14-12-2025 10:53 AM', type: 'Windows Batch File', size: '1 KB', isFolder: false, icon: '⚙️' },
{ id: 16, name: 'AccountingSoftwareAI.ps1', dateModified: '14-12-2025 10:59 PM', type: 'Windows PowerShell', size: '1 KB', isFolder: false, icon: '⚙️' },
{ id: 17, name: 'AccountingSoftwareAI.sln', dateModified: '14-12-2025 10:51 PM', type: 'Microsoft Visual Studio Solution', size: '2 KB', isFolder: false, icon: '💻' },
{ id: 18, name: 'AuditLogSchema', dateModified: '05-12-2025 10:22 PM', type: 'SQL Source File', size: '1 KB', isFolder: false, icon: '📄' },
{ id: 19, name: 'Constants.cs', dateModified: '14-12-2025 10:53 AM', type: 'C# Source File', size: '2 KB', isFolder: false, icon: '📄' },
{ id: 20, name: 'DELIVERABLES_SUMMARY', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '13 KB', isFolder: false, icon: '📄' },
{ id: 21, name: 'DEPLOYMENT', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
{ id: 22, name: 'FILE_INVENTORY', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
{ id: 23, name: 'GST_COMPLIANCE', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
{ id: 24, name: 'INSTALLER_TROUBLESHOOTING', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
{ id: 25, name: 'INTERACTION_CHECKLIST', dateModified: '05-12-2025 10:22 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
{ id: 26, name: 'LICENSE', dateModified: '04-12-2025 11:56 AM', type: 'File', size: '2 KB', isFolder: false, icon: '📄' },
{ id: 27, name: 'OFFLINE_INSTALLER_GUIDE', dateModified: '14-12-2025 10:53 AM', type: 'Markdown Source', size: '11 KB', isFolder: false, icon: '📄' },
{ id: 28, name: 'OFFLINE_SETUP_SUMMARY', dateModified: '12-12-2025 10:06 PM', type: 'Markdown Source', size: '9 KB', isFolder: false, icon: '📄' },
];

const quickAccessItems = [
{ name: 'Desktop', icon: '🖥️' },
{ name: 'Downloads', icon: '📥' },
{ name: 'Documents', icon: '📁' },
{ name: 'Pictures', icon: '🖼️' },
{ name: 'Videos', icon: '🎬' },
{ name: 'OneDrive', icon: '☁️' },
];

const thisPCItems = [
{ name: 'This PC', icon: '💻' },
{ name: '3D Objects', icon: '🎨' },
{ name: 'Desktop', icon: '🖥️' },
{ name: 'Documents', icon: '📁' },
{ name: 'Downloads', icon: '📥' },
{ name: 'Music', icon: '🎵' },
{ name: 'Pictures', icon: '🖼️' },
{ name: 'Videos', icon: '🎬' },
{ name: 'Local Disk (C:)', icon: '💿' },
{ name: 'New Volume (E:)', icon: '💿' },
{ name: 'New Volume (F:)', icon: '💿' },
{ name: 'Local Disk (G:)', icon: '💿' },
{ name: 'New Volume (H:)', icon: '💿' },
{ name: 'Network', icon: '🌐' },
];

const tabs = ['File', 'Home', 'Share', 'View'];

const filteredItems = fileItems.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);

const handleSelectItem = (id: number) => {
setSelectedItems(prev => {
if (prev.includes(id)) {
return prev.filter(itemId => itemId !== id);
} else {
return [...prev, id];
}
});
};

const handleSelectAll = () => {
if (selectedItems.length === filteredItems.length) {
setSelectedItems([]);
} else {
setSelectedItems(filteredItems.map(item => item.id));
}
};

const handleCut = () => {
console.log('Cut items:', selectedItems);
alert(Cut ${selectedItems.length} item(s));
};

const handleCopy = () => {
console.log('Copy items:', selectedItems);
alert(Copied ${selectedItems.length} item(s));
};

const handlePaste = () => {
console.log('Paste items');
alert('Pasted items');
};

const handleDelete = () => {
if (selectedItems.length > 0 && window.confirm(Delete ${selectedItems.length} selected item(s)?)) {
console.log('Delete items:', selectedItems);
alert(Deleted ${selectedItems.length} item(s));
}
};

const handleRename = () => {
if (selectedItems.length === 1) {
const item = fileItems.find(f => f.id === selectedItems[0]);
const newName = prompt('Enter new name:', item?.name);
if (newName) {
console.log(Renamed ${item?.name} to ${newName});
alert(Renamed to ${newName});
}
} else {
alert('Please select exactly one item to rename');
}
};

const handleNewFolder = () => {
const folderName = prompt('Enter folder name:', 'New Folder');
if (folderName) {
console.log(Created new folder: ${folderName});
alert(Created folder: ${folderName});
}
};

const handleOpen = () => {
if (selectedItems.length === 1) {
const item = fileItems.find(f => f.id === selectedItems[0]);
if (item?.isFolder) {
console.log(Opening folder: ${item.name});
alert(Opening folder: ${item.name});
} else {
console.log(Opening file: ${item?.name});
alert(Opening file: ${item?.name});
}
}
};

const getFileIcon = (type: string) => {
if (type.includes('folder')) return '📁';
if (type.includes('C#')) return '💻';
if (type.includes('Batch')) return '⚙️';
if (type.includes('PowerShell')) return '⚙️';
if (type.includes('Solution')) return '💻';
if (type.includes('Markdown')) return '📄';
if (type.includes('SQL')) return '🗄️';
return '📄';
};

return (

{/* Header Tabs */}

{tabs.map(tab => (
<button
key={tab}
className={tab ${currentTab === tab ? 'active' : ''}}
onClick={() => setCurrentTab(tab)}
>
{tab}

))}

    <div className="tab-actions">
      <button className="tab-action" onClick={handleCut}>Cut</button>
      <button className="tab-action" onClick={handleCopy}>Copy path</button>
      <button className="tab-action" onClick={handlePaste}>Paste</button>
      <button className="tab-action" onClick={handlePaste}>Paste shortcut</button>
      <button className="tab-action" onClick={handleCut}>Move</button>
      <button className="tab-action" onClick={handleCopy}>Copy</button>
      <button className="tab-action" onClick={handleDelete}>Delete</button>
      <button className="tab-action" onClick={handleRename}>Rename</button>
      <button className="tab-action" onClick={handleNewFolder}>New folder</button>
      <button className="tab-action" onClick={handleOpen}>Open</button>
      <button className="tab-action" onClick={handleSelectAll}>Select all</button>
      <button className="tab-action" onClick={() => setSelectedItems([])}>Select none</button>
      <button className="tab-action">History</button>
      <button className="tab-action">Import selection</button>
      <button className="tab-action">Export selection</button>
      <button className="tab-action">Insert selection</button>
      <button className="tab-action">Close</button>
    </div>
  </div>

  <div className="explorer-content">
    {/* Sidebar */}
    <div className="sidebar">
      <div className="sidebar-section">
        <h3 className="sidebar-title">Quick access</h3>
        <ul className="sidebar-list">
          {quickAccessItems.map(item => (
            <li key={item.name} className="sidebar-item">
              <span className="item-icon">{item.icon}</span>
              <span className="item-name">{item.name}</span>
            </li>
          ))}
        </ul>
      </div>

      <div className="sidebar-section">
        <h3 className="sidebar-title">This PC</h3>
        <ul className="sidebar-list">
          {thisPCItems.map(item => (
            <li key={item.name} className="sidebar-item">
              <span className="item-icon">{item.icon}</span>
              <span className="item-name">{item.name}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>

    {/* Main Content */}
    <div className="main-content">
      {/* Search Bar */}
      <div className="search-container">
        <div className="search-bar">
          <span className="search-icon">🔍</span>
          <input
            type="text"
            className="search-input"
            placeholder="Search AccountingSoftwareAI"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>

      {/* Files Table */}
      <div className="files-table-container">
        <table className="files-table">
          <thead>
            <tr>
              <th style={{ width: '40%' }}>
                <input
                  type="checkbox"
                  checked={selectedItems.length === filteredItems.length && filteredItems.length > 0}
                  onChange={handleSelectAll}
                  className="select-checkbox"
                />
                Name
              </th>
              <th style={{ width: '25%' }}>Date modified</th>
              <th style={{ width: '25%' }}>Type</th>
              <th style={{ width: '10%' }}>Size</th>
            </tr>
          </thead>
          <tbody>
            {filteredItems.map(item => (
              <tr
                key={item.id}
                className={`file-row ${selectedItems.includes(item.id) ? 'selected' : ''}`}
                onClick={() => handleSelectItem(item.id)}
                onDoubleClick={() => item.isFolder && handleOpen()}
              >
                <td className="file-name-cell">
                  <input
                    type="checkbox"
                    checked={selectedItems.includes(item.id)}
                    onChange={() => {}}
                    className="row-checkbox"
                  />
                  <span className="file-icon">
                    {getFileIcon(item.type)}
                  </span>
                  <span className="file-name">{item.name}</span>
                </td>
                <td className="file-date">{item.dateModified}</td>
                <td className="file-type">{item.type}</td>
                <td className="file-size">{item.size}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Footer */}
      <div className="explorer-footer">
        <div className="footer-info">
          <span>{filteredItems.length} items</span>
          <span>•</span>
          <span>{selectedItems.length} item selected</span>
        </div>
        <div className="footer-actions">
          <button className="footer-btn">📁</button>
          <button className="footer-btn">📊</button>
          <button className="footer-btn">⚙️</button>
        </div>
      </div>
    </div>
  </div>
</div>

);
};

export default FileExplorer;

[sujitkumardebnath2025-cloud]

/* File Explorer Styles */
.file-explorer {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
}

/* Tabs Container */
.tabs-container {
background-color: #f2f2f2;
border-bottom: 1px solid #dcdcdc;
}

.tabs {
display: flex;
background-color: #f2f2f2;
padding: 0 10px;
}

.tab {
padding: 12px 20px;
background: none;
border: none;
border-bottom: 3px solid transparent;
font-size: 14px;
cursor: pointer;
color: #333;
transition: all 0.2s;
}

.tab:hover {
background-color: #e6e6e6;
}

.tab.active {
border-bottom-color: #0078d4;
background-color: #ffffff;
font-weight: 600;
}

.tab-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px;
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
}

.tab-action {
padding: 4px 10px;
background-color: #f2f2f2;
border: 1px solid #dcdcdc;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
color: #333;
transition: background-color 0.2s;
}

.tab-action:hover {
background-color: #e6e6e6;
}

/* Explorer Content */
.explorer-content {
display: flex;
flex: 1;
overflow: hidden;
}

/* Sidebar */
.sidebar {
width: 250px;
background-color: #f8f8f8;
border-right: 1px solid #e0e0e0;
padding: 15px 0;
overflow-y: auto;
}

.sidebar-section {
margin-bottom: 25px;
}

.sidebar-title {
font-size: 11px;
font-weight: 600;
color: #666;
text-transform: uppercase;
padding: 5px 20px;
margin-bottom: 8px;
}

.sidebar-list {
list-style: none;
padding: 0;
margin: 0;
}

.sidebar-item {
display: flex;
align-items: center;
padding: 8px 20px;
cursor: pointer;
transition: background-color 0.2s;
color: #333;
}

.sidebar-item:hover {
background-color: #e6e6e6;
}

.item-icon {
margin-right: 10px;
font-size: 16px;
}

.item-name {
font-size: 13px;
}

/* Main Content */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* Search Container */
.search-container {
padding: 10px 20px;
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
}

.search-bar {
display: flex;
align-items: center;
background-color: #f2f2f2;
border: 1px solid #dcdcdc;
border-radius: 4px;
padding: 8px 12px;
width: 100%;
max-width: 500px;
}

.search-icon {
margin-right: 8px;
color: #666;
}

.search-input {
flex: 1;
border: none;
background: none;
outline: none;
font-size: 14px;
color: #333;
}

.search-input::placeholder {
color: #999;
}

/* Files Table */
.files-table-container {
flex: 1;
overflow-y: auto;
padding: 0 20px;
}

.files-table {
width: 100%;
border-collapse: collapse;
}

.files-table thead {
background-color: #f2f2f2;
position: sticky;
top: 0;
z-index: 10;
}

.files-table th {
padding: 10px 15px;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 1px solid #dcdcdc;
font-size: 13px;
text-transform: uppercase;
}

.files-table th:first-child {
display: flex;
align-items: center;
gap: 10px;
}

.select-checkbox {
cursor: pointer;
}

.file-row {
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s;
}

.file-row:hover {
background-color: #f8f8f8;
}

.file-row.selected {
background-color: #e3f2fd;
}

.files-table td {
padding: 8px 15px;
vertical-align: middle;
}

.file-name-cell {
display: flex;
align-items: center;
gap: 10px;
}

.row-checkbox {
cursor: pointer;
}

.file-icon {
font-size: 16px;
margin-right: 8px;
}

.file-name {
font-size: 14px;
color: #333;
}

.file-date, .file-type {
font-size: 13px;
color: #666;
}

.file-size {
font-size: 13px;
color: #666;
text-align: right;
}

/* Explorer Footer */
.explorer-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #f2f2f2;
border-top: 1px solid #e0e0e0;
}

.footer-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: #666;
}

.footer-actions {
display: flex;
gap: 5px;
}

.footer-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
border: 1px solid #dcdcdc;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
color: #333;
transition: background-color 0.2s;
}

.footer-btn:hover {
background-color: #f0f0f0;
}

/* Scrollbar Styling */
.files-table-container::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
width: 10px;
height: 10px;
}

.files-table-container::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
}

.files-table-container::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 5px;
}

.files-table-container::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}

/* Responsive Design */
@media (max-width: 1024px) {
.sidebar {
width: 200px;
}

.tab-actions {
overflow-x: auto;
}
}

@media (max-width: 768px) {
.explorer-content {
flex-direction: column;
}

.sidebar {
width: 100%;
height: 200px;
}

.tab-actions {
display: none;
}
}

srccomponentsFileExplorerFileExplorer.tsx.tsx
srcstylesFileExplorer.css.css
srcApp.tsx.tsx
srccomponentsFileExplorerContextMenu.tsx.tsx
srcstylesContextMenu.css.css
FileExplorer.tsx.tsx