src/utils/fileIcons.tsx - main - zxclovly/BlinkCode

src/utils/fileIcons.tsx
200 строк11 KB
lovlygod
Initial commit
18 апр 2026, 00:32
18 апр 2026, 00:32dce516c
import type { ReactNode } from 'react';
import {
  SiJavascript, SiTypescript, SiReact, SiHtml5, SiCss,
  SiJson, SiMarkdown, SiPython, SiSvg, SiYaml, SiGit,
  SiNodedotjs, SiVuedotjs, SiSvelte, SiRust, SiGo,
  SiPhp, SiRuby, SiSwift, SiC, SiCplusplus, SiSharp,
  SiGnubash, SiDocker, SiSass, SiLess, SiGraphql,
  SiSqlite, SiNpm, SiYarn, SiPnpm, SiBun, SiVite,
  SiWebpack, SiBabel, SiTailwindcss, SiGithub, SiGitlab,
  SiEslint, SiPrettier, SiJest, SiVitest,
} from 'react-icons/si';
import {
  VscSettingsGear, VscLock, VscKey,
} from 'react-icons/vsc';
import {
  FileText, FileCode2, Image, Music, Video,
  Archive, File, Binary, Coffee, Globe,
} from 'lucide-react';

interface FileIconInfo {
  icon: ReactNode;
  color: string;
}

const extMap: Record<string, FileIconInfo> = {
  js:   { icon: <SiJavascript size={14} />, color: '#f7df1e' },
  mjs:  { icon: <SiJavascript size={14} />, color: '#f7df1e' },
  cjs:  { icon: <SiJavascript size={14} />, color: '#f7df1e' },
  jsx:  { icon: <SiReact size={14} />, color: '#61dafb' },
  ts:   { icon: <SiTypescript size={14} />, color: '#3178c6' },
  tsx:  { icon: <SiReact size={14} />, color: '#3178c6' },
  html: { icon: <SiHtml5 size={14} />, color: '#e44d26' },
  htm:  { icon: <SiHtml5 size={14} />, color: '#e44d26' },
  css:  { icon: <SiCss size={14} />, color: '#563d7c' },
  less: { icon: <SiLess size={14} />, color: '#1d365d' },
  scss: { icon: <SiSass size={14} />, color: '#cc6699' },
  sass: { icon: <SiSass size={14} />, color: '#cc6699' },
  json: { icon: <SiJson size={14} />, color: '#f5d142' },
  md:   { icon: <SiMarkdown size={14} />, color: '#083fa1' },
  mdx:  { icon: <SiMarkdown size={14} />, color: '#083fa1' },
  py:   { icon: <SiPython size={14} />, color: '#3572a5' },
  pyw:  { icon: <SiPython size={14} />, color: '#3572a5' },
  svg:  { icon: <SiSvg size={14} />, color: '#ff9900' },
  yml:  { icon: <SiYaml size={14} />, color: '#cb171e' },
  yaml: { icon: <SiYaml size={14} />, color: '#cb171e' },
  vue:  { icon: <SiVuedotjs size={14} />, color: '#42b883' },
  svelte: { icon: <SiSvelte size={14} />, color: '#ff3e00' },
  rs:   { icon: <SiRust size={14} />, color: '#dea584' },
  go:   { icon: <SiGo size={14} />, color: '#00add8' },
  java: { icon: <SiCplusplus size={14} />, color: '#ed8b00' },
  php:  { icon: <SiPhp size={14} />, color: '#777bb4' },
  rb:   { icon: <SiRuby size={14} />, color: '#cc342d' },
  swift: { icon: <SiSwift size={14} />, color: '#fa7343' },
  c:    { icon: <SiC size={14} />, color: '#555555' },
  cpp:  { icon: <SiCplusplus size={14} />, color: '#f34b7d' },
  h:    { icon: <SiC size={14} />, color: '#555555' },
  hpp:  { icon: <SiCplusplus size={14} />, color: '#f34b7d' },
  cs:   { icon: <SiSharp size={14} />, color: '#178600' },
  sh:   { icon: <SiGnubash size={14} />, color: '#4eaa25' },
  bash: { icon: <SiGnubash size={14} />, color: '#4eaa25' },
  zsh:  { icon: <SiGnubash size={14} />, color: '#4eaa25' },
  fish: { icon: <SiGnubash size={14} />, color: '#4eaa25' },
  sql:  { icon: <SiSqlite size={14} />, color: '#e38c00' },
  graphql: { icon: <SiGraphql size={14} />, color: '#e535ab' },
  gql:  { icon: <SiGraphql size={14} />, color: '#e535ab' },
  dockerfile: { icon: <SiDocker size={14} />, color: '#2496ed' },
  txt:  { icon: <FileText size={14} />, color: '#888888' },
  xml:  { icon: <FileCode2 size={14} />, color: '#e44d26' },
  toml: { icon: <VscSettingsGear size={14} />, color: '#9c4221' },
  ini:  { icon: <VscSettingsGear size={14} />, color: '#6b7280' },
  cfg:  { icon: <VscSettingsGear size={14} />, color: '#6b7280' },
  conf: { icon: <VscSettingsGear size={14} />, color: '#6b7280' },
  lock: { icon: <VscLock size={14} />, color: '#6b7280' },
  png:  { icon: <Image size={14} />, color: '#a855f7' },
  jpg:  { icon: <Image size={14} />, color: '#a855f7' },
  jpeg: { icon: <Image size={14} />, color: '#a855f7' },
  gif:  { icon: <Image size={14} />, color: '#a855f7' },
  ico:  { icon: <Image size={14} />, color: '#a855f7' },
  webp: { icon: <Image size={14} />, color: '#a855f7' },
  bmp:  { icon: <Image size={14} />, color: '#a855f7' },
  mp3:  { icon: <Music size={14} />, color: '#1db954' },
  wav:  { icon: <Music size={14} />, color: '#1db954' },
  ogg:  { icon: <Music size={14} />, color: '#1db954' },
  mp4:  { icon: <Video size={14} />, color: '#e53e3e' },
  avi:  { icon: <Video size={14} />, color: '#e53e3e' },
  mkv:  { icon: <Video size={14} />, color: '#e53e3e' },
  mov:  { icon: <Video size={14} />, color: '#e53e3e' },
  zip:  { icon: <Archive size={14} />, color: '#f59e0b' },
  rar:  { icon: <Archive size={14} />, color: '#f59e0b' },
  gz:   { icon: <Archive size={14} />, color: '#f59e0b' },
  tar:  { icon: <Archive size={14} />, color: '#f59e0b' },
  '7z': { icon: <Archive size={14} />, color: '#f59e0b' },
  wasm: { icon: <Binary size={14} />, color: '#654ff0' },
  bin:  { icon: <Binary size={14} />, color: '#6b7280' },
  exe:  { icon: <Binary size={14} />, color: '#6b7280' },
  dll:  { icon: <Binary size={14} />, color: '#6b7280' },
  pdf:  { icon: <FileText size={14} />, color: '#e53e3e' },
  doc:  { icon: <FileText size={14} />, color: '#2b579a' },
  docx: { icon: <FileText size={14} />, color: '#2b579a' },
  xls:  { icon: <FileText size={14} />, color: '#217346' },
  xlsx: { icon: <FileText size={14} />, color: '#217346' },
  coffee: { icon: <Coffee size={14} />, color: '#6f4e37' },
  lua:  { icon: <Globe size={14} />, color: '#000080' },
  r:    { icon: <Globe size={14} />, color: '#276dc3' },
  dart: { icon: <Globe size={14} />, color: '#0175c2' },
  kotlin: { icon: <Globe size={14} />, color: '#7f52ff' },
  scala: { icon: <Globe size={14} />, color: '#dc322f' },
  erl:  { icon: <Globe size={14} />, color: '#a90533' },
  ex:   { icon: <Globe size={14} />, color: '#6e4a7e' },
  exs:  { icon: <Globe size={14} />, color: '#6e4a7e' },
  hs:   { icon: <Globe size={14} />, color: '#5e5086' },
  elm:  { icon: <Globe size={14} />, color: '#1293d8' },
  clj:  { icon: <Globe size={14} />, color: '#5881d8' },
  cljs: { icon: <Globe size={14} />, color: '#5881d8' },
};

const nameMap: Record<string, FileIconInfo> = {
  '.gitignore':    { icon: <SiGit size={14} />, color: '#f05032' },
  '.gitattributes': { icon: <SiGit size={14} />, color: '#f05032' },
  '.gitmodules':   { icon: <SiGit size={14} />, color: '#f05032' },
  '.env':          { icon: <VscKey size={14} />, color: '#ecd53f' },
  '.env.local':    { icon: <VscKey size={14} />, color: '#ecd53f' },
  '.env.development': { icon: <VscKey size={14} />, color: '#ecd53f' },
  '.env.production': { icon: <VscKey size={14} />, color: '#ecd53f' },
  '.env.test':     { icon: <VscKey size={14} />, color: '#ecd53f' },
  '.eslintrc':     { icon: <SiEslint size={14} />, color: '#4b32c3' },
  '.eslintrc.js':  { icon: <SiEslint size={14} />, color: '#4b32c3' },
  '.eslintrc.json': { icon: <SiEslint size={14} />, color: '#4b32c3' },
  '.eslintrc.yml': { icon: <SiEslint size={14} />, color: '#4b32c3' },
  '.prettierrc':   { icon: <SiPrettier size={14} />, color: '#f7b93e' },
  '.prettierrc.js': { icon: <SiPrettier size={14} />, color: '#f7b93e' },
  '.prettierrc.json': { icon: <SiPrettier size={14} />, color: '#f7b93e' },
  'package.json':  { icon: <SiNpm size={14} />, color: '#cb3837' },
  'package-lock.json': { icon: <SiNpm size={14} />, color: '#cb3837' },
  'yarn.lock':     { icon: <SiYarn size={14} />, color: '#2c8ebb' },
  'pnpm-lock.yaml': { icon: <SiPnpm size={14} />, color: '#f69220' },
  'bun.lockb':     { icon: <SiBun size={14} />, color: '#fbf0df' },
  'vite.config.ts': { icon: <SiVite size={14} />, color: '#646cff' },
  'vite.config.js': { icon: <SiVite size={14} />, color: '#646cff' },
  'webpack.config.js': { icon: <SiWebpack size={14} />, color: '#8dd6f9' },
  'webpack.config.ts': { icon: <SiWebpack size={14} />, color: '#8dd6f9' },
  'tsconfig.json': { icon: <SiTypescript size={14} />, color: '#3178c6' },
  'tailwind.config.js': { icon: <SiTailwindcss size={14} />, color: '#38bdf8' },
  'tailwind.config.ts': { icon: <SiTailwindcss size={14} />, color: '#38bdf8' },
  'Dockerfile':    { icon: <SiDocker size={14} />, color: '#2496ed' },
  'docker-compose.yml': { icon: <SiDocker size={14} />, color: '#2496ed' },
  'docker-compose.yaml': { icon: <SiDocker size={14} />, color: '#2496ed' },
  'README.md':     { icon: <SiMarkdown size={14} />, color: '#083fa1' },
  'LICENSE':       { icon: <VscLock size={14} />, color: '#d4af37' },
  'Makefile':      { icon: <SiGnubash size={14} />, color: '#4eaa25' },
  'Cargo.toml':    { icon: <SiRust size={14} />, color: '#dea584' },
  'Cargo.lock':    { icon: <SiRust size={14} />, color: '#dea584' },
  'go.mod':        { icon: <SiGo size={14} />, color: '#00add8' },
  'go.sum':        { icon: <SiGo size={14} />, color: '#00add8' },
  'Gemfile':       { icon: <SiRuby size={14} />, color: '#cc342d' },
  'Rakefile':      { icon: <SiRuby size={14} />, color: '#cc342d' },
  '.babelrc':      { icon: <SiBabel size={14} />, color: '#f9dc3e' },
  'babel.config.js': { icon: <SiBabel size={14} />, color: '#f9dc3e' },
  'jest.config.js': { icon: <SiJest size={14} />, color: '#c21325' },
  'jest.config.ts': { icon: <SiJest size={14} />, color: '#c21325' },
  'vitest.config.ts': { icon: <SiVitest size={14} />, color: '#729b1b' },
  'vitest.config.js': { icon: <SiVitest size={14} />, color: '#729b1b' },
  '.github':       { icon: <SiGithub size={14} />, color: '#ffffff' },
  '.gitlab-ci.yml': { icon: <SiGitlab size={14} />, color: '#fc6d26' },
  '.npmrc':        { icon: <SiNpm size={14} />, color: '#cb3837' },
  '.nvmrc':        { icon: <SiNodedotjs size={14} />, color: '#339933' },
  '.editorconfig': { icon: <VscSettingsGear size={14} />, color: '#fff2f0' },
  '.dockerignore': { icon: <SiDocker size={14} />, color: '#2496ed' },
  'requirements.txt': { icon: <SiPython size={14} />, color: '#3572a5' },
  'Pipfile':       { icon: <SiPython size={14} />, color: '#3572a5' },
  'pyproject.toml': { icon: <SiPython size={14} />, color: '#3572a5' },
};

const defaultIcon: FileIconInfo = { icon: <File size={14} />, color: '#888888' };

export function getFileIcon(fileName: string): FileIconInfo {
  if (nameMap[fileName]) return nameMap[fileName];
  const ext = fileName.startsWith('.') ? fileName.slice(1) : (fileName.split('.').pop()?.toLowerCase() || '');
  if (extMap[ext]) return extMap[ext];
  return defaultIcon;
}

export function getLanguageFromFileName(fileName: string): string {
  const ext = fileName.split('.').pop()?.toLowerCase() || '';
  const map: Record<string, string> = {
    js: 'javascript', jsx: 'javascript', ts: 'typescript', tsx: 'typescript',
    html: 'html', htm: 'html', css: 'css', scss: 'scss', less: 'less',
    json: 'json', md: 'markdown', mdx: 'markdown', py: 'python',
    svg: 'xml', xml: 'xml', yml: 'yaml', yaml: 'yaml', txt: 'plaintext',
    sh: 'shell', bash: 'shell', zsh: 'shell', fish: 'shell',
    sql: 'sql', graphql: 'graphql', gql: 'graphql',
    vue: 'html', svelte: 'html', rs: 'rust', go: 'go',
    java: 'java', php: 'php', rb: 'ruby', swift: 'swift',
    c: 'c', cpp: 'cpp', cs: 'csharp', coffee: 'coffeescript',
    lua: 'lua', r: 'r', dart: 'dart', kotlin: 'kotlin',
    scala: 'scala', hs: 'haskell', ex: 'elixir', clj: 'clojure',
    toml: 'ini', ini: 'ini', conf: 'ini',
  };
  return map[ext] || 'plaintext';
}