teach_sys_Demo/src/components/FileIcon/index.jsx

import "./index.css";

const FileIcon = ({ type = "doc" }) => {
  const getIconClass = () => {
    switch(type) {
      case 'pdf':
        return 'file-icon-pdf';
      case 'doc':
      case 'docx':
        return 'file-icon-doc';
      case 'ppt':
      case 'pptx':
        return 'file-icon-ppt';
      case 'excel':
      case 'xlsx':
        return 'file-icon-excel';
      default:
        return 'file-icon-default';
    }
  };

  const getIconText = () => {
    switch(type) {
      case 'pdf':
        return 'PDF';
      case 'doc':
      case 'docx':
        return 'DOC';
      case 'ppt':
      case 'pptx':
        return 'PPT';
      case 'excel':
      case 'xlsx':
        return 'XLS';
      default:
        return 'FILE';
    }
  };

  return (
    <div className={`file-icon ${getIconClass()}`}>
      <div className="file-icon-fold"></div>
      <div className="file-icon-text">{getIconText()}</div>
    </div>
  );
};

export default FileIcon;