export const REACT_APP = {
  'src': {
    'directory': {
      'vite-env.d.ts': {
        file: {
          contents: `/// <reference types="vite/client" />`
        }
      },
      'main.tsx': {
        file: {
          contents: `import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
`
        }
      },
      'App.tsx': {
        file: {
          contents: `import React, { useState } from 'react';

const App = () => {
  const [activeTab, setActiveTab] = useState('all');
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const projects = [
    { id: 1, title: "项目一", category: "web", description: "响应式网站设计" },
    { id: 2, title: "项目二", category: "mobile", description: "移动应用开发" },
    { id: 3, title: "项目三", category: "web", description: "电商平台开发" },
    { id: 4, title: "项目四", category: "mobile", description: "移动游戏设计" }
  ];

  const filteredProjects = activeTab === 'all' 
    ? projects 
    : projects.filter(project => project.category === activeTab);

  const styles = {
    container: {
      maxWidth: '1200px',
      margin: '0 auto',
      padding: '20px',
      fontFamily: 'Arial, sans-serif',
    },
    header: {
      backgroundColor: '#ffffff',
      padding: '20px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
    },
    nav: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    logo: {
      fontSize: '24px',
      fontWeight: 'bold',
      color: '#333',
    },
    menuButton: {
      display: 'none',
      '@media (max-width: 768px)': {
        display: 'block',
      },
    },
    navLinks: {
      display: 'flex',
      gap: '20px',
    },
    navLink: {
      color: '#333',
      textDecoration: 'none',
      padding: '8px 16px',
      borderRadius: '4px',
      transition: 'background-color 0.3s',
    },
    hero: {
      textAlign: 'center',
      padding: '60px 20px',
      backgroundColor: '#f5f5f5',
    },
    heroTitle: {
      fontSize: '48px',
      fontWeight: 'bold',
      marginBottom: '20px',
      color: '#333',
    },
    heroSubtitle: {
      fontSize: '20px',
      color: '#666',
      marginBottom: '30px',
    },
    button: {
      backgroundColor: '#007bff',
      color: 'white',
      border: 'none',
      padding: '12px 24px',
      borderRadius: '4px',
      cursor: 'pointer',
      fontSize: '16px',
      transition: 'background-color 0.3s',
    },
    buttonOutline: {
      backgroundColor: 'transparent',
      border: '2px solid #007bff',
      color: '#007bff',
    },
    projectsSection: {
      padding: '40px 0',
    },
    tabsContainer: {
      display: 'flex',
      justifyContent: 'center',
      gap: '10px',
      marginBottom: '30px',
    },
    tab: {
      padding: '8px 16px',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
      backgroundColor: '#eee',
    },
    activeTab: {
      backgroundColor: '#007bff',
      color: 'white',
    },
    projectsGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
      gap: '20px',
      padding: '20px',
    },
    projectCard: {
      backgroundColor: 'white',
      borderRadius: '8px',
      padding: '20px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
    },
    projectTitle: {
      fontSize: '20px',
      fontWeight: 'bold',
      marginBottom: '10px',
    },
    projectDescription: {
      color: '#666',
    },
  };

  return (
    <div>
      <header style={styles.header}>
        <nav style={styles.nav}>
          <div style={styles.logo}>Demo</div>
          <div style={styles.navLinks}>
            <a href="#" style={styles.navLink}>首页</a>
            <a href="#" style={styles.navLink}>项目</a>
            <a href="#" style={styles.navLink}>关于</a>
            <a href="#" style={styles.navLink}>联系</a>
          </div>
        </nav>
      </header>

      <section style={styles.hero}>
        <h1 style={styles.heroTitle}>欢迎来到我们的演示页面</h1>
        <p style={styles.heroSubtitle}>探索创新项目，体验卓越设计</p>
        <div style={{ display: 'flex', gap: '20px', justifyContent: 'center' }}>
          <button style={styles.button}>开始使用</button>
          <button style={{...styles.button, ...styles.buttonOutline}}>了解更多</button>
        </div>
      </section>

      <section style={styles.projectsSection}>
        <div style={styles.container}>
          <div style={styles.tabsContainer}>
            <button 
              style={{
                ...styles.tab,
                ...(activeTab === 'all' ? styles.activeTab : {})
              }}
              onClick={() => setActiveTab('all')}
            >
              全部
            </button>
            <button 
              style={{
                ...styles.tab,
                ...(activeTab === 'web' ? styles.activeTab : {})
              }}
              onClick={() => setActiveTab('web')}
            >
              Web
            </button>
            <button 
              style={{
                ...styles.tab,
                ...(activeTab === 'mobile' ? styles.activeTab : {})
              }}
              onClick={() => setActiveTab('mobile')}
            >
              Mobile
            </button>
          </div>

          <div style={styles.projectsGrid}>
            {filteredProjects.map(project => (
              <div key={project.id} style={styles.projectCard}>
                <h3 style={styles.projectTitle}>{project.title}</h3>
                <p style={styles.projectDescription}>{project.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

export default App
`
        }
      },
    }
  },
  "index.html": {
    file: {
      contents: `<!doctype html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解释结果</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>`
    }
  },
  'package.json': {
    file: {
      contents: `{
  "name": "react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}`,
    },
  },
  "tsconfig.app.json": {
    file: {
      contents: `{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}
`
    }
  },
  "tsconfig.json": {
    file: {
      contents: `{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}
`
    }
  },
  "tsconfig.node.json": {
    file: {
      contents: `{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}
`
    }
  },
  "vite.config.ts": {
    file: {
      contents: `import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})`
    }
  },
};