My Computer

export default function MyComputer({ onClose }) {
  const [history, setHistory] = useState(['My Computer']);
  const [historyIndex, setHistoryIndex] = useState(0);
  const [selectedItem, setSelectedItem] = useState(null);
  
  const currentPath = history[historyIndex];
  
  // Navigation and rendering logic
}

'My Computer': {
  name: 'My Computer',
  header: { icon: computer, title: 'My Computer' },
  component: MyComputer,
  defaultSize: { width: 660, height: 500 },
  defaultOffset: getCenter(660, 500),
  resizable: true,
  minimized: false,
  maximized: shouldMaximize(660, 500, true),
  multiInstance: false, // Only one instance allowed
}

const fileSystem = {
  'My Computer': {
    label: 'My Computer',
    icon: computer,
    items: [
      {
        name: 'Shared Documents',
        type: 'File Folder',
        icon: folder,
        group: 'Files Stored on This Computer',
        path: 'Shared Documents',
      },
      {
        name: "User's Documents",
        type: 'File Folder',
        icon: folder,
        group: 'Files Stored on This Computer',
        path: "User's Documents",
      },
      {
        name: 'Local Disk (C:)',
        type: 'Local Disk',
        icon: disk,
        group: 'Hard Disk Drives',
        path: 'C:',
        freeSpace: '32 GB',
        totalSize: '40 GB',
      },
      {
        name: 'CD Drive (D:)',
        type: 'CD Drive',
        icon: cd,
        group: 'Devices with Removable Storage',
        path: 'D:',
        totalSize: '650 MB',
      },
    ],
  },
  'Shared Documents': {
    label: 'Shared Documents',
    type: 'File Folder',
    items: [
      { name: 'My Music', type: 'Folder', icon: folder },
      { name: 'My Pictures', type: 'Folder', icon: folder },
      { name: 'My Videos', type: 'Folder', icon: folder },
    ],
  },
  "User's Documents": {
    label: "User's Documents",
    type: 'File Folder',
    items: [
      { name: 'Resume.txt', type: 'Text Document', icon: documentIcon },
      { name: 'Notes', type: 'Folder', icon: folder },
    ],
  },
  'C:': {
    label: 'Local Disk (C:)',
    type: 'Local Disk',
    items: [
      { name: 'WINDOWS', type: 'Folder', icon: folder },
      { name: 'Program Files', type: 'Folder', icon: folder },
      { name: 'Documents and Settings', type: 'Folder', icon: folder },
    ],
  },
  'D:': {
    label: 'CD Drive (D:)',
    type: 'CD Drive',
    items: [],
  },
};

const navigateTo = path => {
  if (!fileSystem[path]) return;
  const newHistory = history.slice(0, historyIndex + 1);
  newHistory.push(path);
  setHistory(newHistory);
  setHistoryIndex(newHistory.length - 1);
  setSelectedItem(null);
};

const goBack = () => {
  if (historyIndex > 0) {
    setHistoryIndex(historyIndex - 1);
    setSelectedItem(null);
  }
};

const goForward = () => {
  if (historyIndex < history.length - 1) {
    setHistoryIndex(historyIndex + 1);
    setSelectedItem(null);
  }
};

const goUp = () => {
  if (currentPath !== 'My Computer') {
    navigateTo('My Computer');
  }
};

function onClickOptionItem(item) {
  switch (item) {
    case 'Close':
      onClose();
      break;
    case 'Up One Level':
      goUp();
      break;
    case 'Back':
      goBack();
      break;
    case 'Forward':
      goForward();
      break;
    default:
      break;
  }
}

const renderDetailsPanel = () => {
  if (selectedItem) {
    return (
      <div className="com__content__left__card__content">
        <div className="com__content__left__card__text bold">
          {selectedItem.name}
        </div>
        <div className="com__content__left__card__text">
          {selectedItem.type}
        </div>
        {selectedItem.freeSpace && (
          <div className="com__content__left__card__text">
            Free Space: {selectedItem.freeSpace}
          </div>
        )}
        {selectedItem.totalSize && (
          <div className="com__content__left__card__text">
            Total Size: {selectedItem.totalSize}
          </div>
        )}
      </div>
    );
  }
  
  const folderInfo = fileSystem[currentPath];
  return (
    <div className="com__content__left__card__content">
      <div className="com__content__left__card__text bold">
        {folderInfo.label}
      </div>
      <div className="com__content__left__card__text">
        {folderInfo.type || 'System Folder'}
      </div>
    </div>
  );
};

const renderContent = () => {
  const currentData = fileSystem[currentPath];
  
  if (currentPath === 'My Computer') {
    const groups = [
      'Files Stored on This Computer',
      'Hard Disk Drives',
      'Devices with Removable Storage',
      'Other',
    ];
    
    return groups.map(group => {
      const groupItems = currentData.items.filter(i => i.group === group);
      if (groupItems.length === 0 && group !== 'Other') return null;
      
      return (
        <div key={group} className="com__content__right__card">
          <div className="com__content__right__card__header">{group}</div>
          <div className="com__content__right__card__content">
            {groupItems.map(item => (
              <div
                key={item.name}
                className={`com__content__right__card__item ${
                  selectedItem?.name === item.name ? 'selected' : ''
                }`}
                onClick={e => {
                  e.stopPropagation();
                  setSelectedItem(item);
                }}
                onDoubleClick={() => item.path && navigateTo(item.path)}
              >
                <img src={item.icon} alt={item.name} />
                <div>{item.name}</div>
              </div>
            ))}
          </div>
        </div>
      );
    });
  }
  
  // Regular folder view
  return (
    <div className="com__content__right__card">
      <div className="com__content__right__card__content">
        {currentData.items.map(item => (
          <div
            key={item.name}
            className={`com__content__right__card__item ${
              selectedItem?.name === item.name ? 'selected' : ''
            }`}
            onClick={e => {
              e.stopPropagation();
              setSelectedItem(item);
            }}
            onDoubleClick={() => item.path && navigateTo(item.path)}
          >
            <img src={item.icon} alt={item.name} />
            <div>{item.name}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

.com__content__left {
  width: 180px;
  background: linear-gradient(to bottom, #748aff 0%, #4057d3 100%);
  overflow-y: auto;
  padding: 10px;
}

.com__content__left__card__header {
  background: linear-gradient(
    to right,
    rgb(240, 240, 255) 0,
    rgb(240, 240, 255) 30%,
    rgb(168, 188, 255) 100%
  );
}

.com__content__right__card__item.selected {
  background-color: #316ac5;
  border: 1px solid #316ac5;
  color: white;
}