FileExplorer

FileExplorer.tsx

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

type FileExplorerProps = {
  rootDirectory: string;
}

type FileExplorerState = {
  currentDirectory: string;
  files: string[];
}

const FileExplorer = (props: FileExplorerProps) => {
  const { rootDirectory } = props;
  const [state, setState] = useState<FileExplorerState>({
    currentDirectory: rootDirectory,
    files: ['file1.txt', 'file2.png', 'file3.pdf']
  });

  const handleDirectoryClick = (directory: string) => {
    // Fetch files from API for the clicked directory
    setState(prevState => ({...prevState, currentDirectory: directory}));
  }

  return (
    <div className="file-explorer-container">
      <div className="file-explorer-current-directory">
        <span>Current Directory: {state.currentDirectory}</span>
      </div>
      <div className="file-explorer-files-container">
        {state.files.map(file => (
          <div key={file} className="file-explorer-file" onClick={() => console.log(`Clicked file: ${file}`)}>
            <span>{file}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FileExplorer;

FileExplorer.module.css

.file-explorer-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 8px;
  width: 400px;
  height: 400px;
}

.file-explorer-current-directory {
  margin-bottom: 8px;
}

.file-explorer-files-container {
  display: flex;
  flex-wrap: wrap;
}

.file-explorer-file {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 80px;
  border: 1px solid #ccc;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.file-explorer-file:hover {
  background-color: #f0f0f0;
}