bolt.diy/app/components/ui/FileIcon.tsx

import React from 'react';
import { classNames } from '~/utils/classNames';

interface FileIconProps {
  filename: string;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function FileIcon({ filename, size = 'md', className }: FileIconProps) {
  const getFileExtension = (filename: string): string => {
    return filename.split('.').pop()?.toLowerCase() || '';
  };

  const getIconForExtension = (extension: string): string => {
    // Code files
    if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
      return 'i-ph:file-js';
    }

    if (['html', 'htm', 'xhtml'].includes(extension)) {
      return 'i-ph:file-html';
    }

    if (['css', 'scss', 'sass', 'less'].includes(extension)) {
      return 'i-ph:file-css';
    }

    if (['json', 'jsonc'].includes(extension)) {
      return 'i-ph:brackets-curly';
    }

    if (['md', 'markdown'].includes(extension)) {
      return 'i-ph:file-text';
    }

    if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
      return 'i-ph:file-py';
    }

    if (['java', 'class', 'jar'].includes(extension)) {
      return 'i-ph:file-code';
    }

    if (['php'].includes(extension)) {
      return 'i-ph:file-code';
    }

    if (['rb', 'ruby'].includes(extension)) {
      return 'i-ph:file-rs';
    }

    if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
      return 'i-ph:file-cpp';
    }

    if (['go'].includes(extension)) {
      return 'i-ph:file-rs';
    }

    if (['rs', 'rust'].includes(extension)) {
      return 'i-ph:file-rs';
    }

    if (['swift'].includes(extension)) {
      return 'i-ph:file-code';
    }

    if (['kt', 'kotlin'].includes(extension)) {
      return 'i-ph:file-code';
    }

    if (['dart'].includes(extension)) {
      return 'i-ph:file-code';
    }

    // Config files
    if (['yml', 'yaml'].includes(extension)) {
      return 'i-ph:file-cloud';
    }

    if (['xml', 'svg'].includes(extension)) {
      return 'i-ph:file-code';
    }

    if (['toml'].includes(extension)) {
      return 'i-ph:file-text';
    }

    if (['ini', 'conf', 'config'].includes(extension)) {
      return 'i-ph:file-text';
    }

    if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
      return 'i-ph:file-lock';
    }

    // Document files
    if (['pdf'].includes(extension)) {
      return 'i-ph:file-pdf';
    }

    if (['doc', 'docx'].includes(extension)) {
      return 'i-ph:file-doc';
    }

    if (['xls', 'xlsx'].includes(extension)) {
      return 'i-ph:file-xls';
    }

    if (['ppt', 'pptx'].includes(extension)) {
      return 'i-ph:file-ppt';
    }

    if (['txt'].includes(extension)) {
      return 'i-ph:file-text';
    }

    // Image files
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
      return 'i-ph:file-image';
    }

    // Audio/Video files
    if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
      return 'i-ph:file-audio';
    }

    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
      return 'i-ph:file-video';
    }

    // Archive files
    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
      return 'i-ph:file-zip';
    }

    // Special files
    if (filename === 'package.json') {
      return 'i-ph:package';
    }

    if (filename === 'tsconfig.json') {
      return 'i-ph:file-ts';
    }

    if (filename === 'README.md') {
      return 'i-ph:book-open';
    }

    if (filename === 'LICENSE') {
      return 'i-ph:scales';
    }

    if (filename === '.gitignore') {
      return 'i-ph:git-branch';
    }

    if (filename.startsWith('Dockerfile')) {
      return 'i-ph:file-code';
    }

    // Default
    return 'i-ph:file';
  };

  const getIconColorForExtension = (extension: string): string => {
    // Code files
    if (['js', 'jsx'].includes(extension)) {
      return 'text-yellow-500';
    }

    if (['ts', 'tsx'].includes(extension)) {
      return 'text-blue-500';
    }

    if (['html', 'htm', 'xhtml'].includes(extension)) {
      return 'text-orange-500';
    }

    if (['css', 'scss', 'sass', 'less'].includes(extension)) {
      return 'text-blue-400';
    }

    if (['json', 'jsonc'].includes(extension)) {
      return 'text-yellow-400';
    }

    if (['md', 'markdown'].includes(extension)) {
      return 'text-gray-500';
    }

    if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
      return 'text-green-500';
    }

    if (['java', 'class', 'jar'].includes(extension)) {
      return 'text-red-500';
    }

    if (['php'].includes(extension)) {
      return 'text-purple-500';
    }

    if (['rb', 'ruby'].includes(extension)) {
      return 'text-red-600';
    }

    if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
      return 'text-blue-600';
    }

    if (['go'].includes(extension)) {
      return 'text-cyan-500';
    }

    if (['rs', 'rust'].includes(extension)) {
      return 'text-orange-600';
    }

    if (['swift'].includes(extension)) {
      return 'text-orange-500';
    }

    if (['kt', 'kotlin'].includes(extension)) {
      return 'text-purple-400';
    }

    if (['dart'].includes(extension)) {
      return 'text-cyan-400';
    }

    // Config files
    if (['yml', 'yaml'].includes(extension)) {
      return 'text-purple-300';
    }

    if (['xml'].includes(extension)) {
      return 'text-orange-300';
    }

    if (['svg'].includes(extension)) {
      return 'text-green-400';
    }

    if (['toml'].includes(extension)) {
      return 'text-gray-500';
    }

    if (['ini', 'conf', 'config'].includes(extension)) {
      return 'text-gray-500';
    }

    if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
      return 'text-green-500';
    }

    // Document files
    if (['pdf'].includes(extension)) {
      return 'text-red-500';
    }

    if (['doc', 'docx'].includes(extension)) {
      return 'text-blue-600';
    }

    if (['xls', 'xlsx'].includes(extension)) {
      return 'text-green-600';
    }

    if (['ppt', 'pptx'].includes(extension)) {
      return 'text-red-600';
    }

    if (['txt'].includes(extension)) {
      return 'text-gray-500';
    }

    // Image files
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
      return 'text-pink-500';
    }

    // Audio/Video files
    if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
      return 'text-green-500';
    }

    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
      return 'text-blue-500';
    }

    // Archive files
    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
      return 'text-yellow-600';
    }

    // Special files
    if (filename === 'package.json') {
      return 'text-red-400';
    }

    if (filename === 'tsconfig.json') {
      return 'text-blue-500';
    }

    if (filename === 'README.md') {
      return 'text-blue-400';
    }

    if (filename === 'LICENSE') {
      return 'text-gray-500';
    }

    if (filename === '.gitignore') {
      return 'text-orange-500';
    }

    if (filename.startsWith('Dockerfile')) {
      return 'text-blue-500';
    }

    // Default
    return 'text-gray-400';
  };

  const getSizeClass = (size: 'sm' | 'md' | 'lg'): string => {
    switch (size) {
      case 'sm':
        return 'w-4 h-4';
      case 'md':
        return 'w-5 h-5';
      case 'lg':
        return 'w-6 h-6';
      default:
        return 'w-5 h-5';
    }
  };

  const extension = getFileExtension(filename);
  const icon = getIconForExtension(extension);
  const color = getIconColorForExtension(extension);
  const sizeClass = getSizeClass(size);

  return <span className={classNames(icon, color, sizeClass, className)} />;
}