export var projectFiles = {
  "/package.json": {
    code: "{\n      \"name\": \"antv-g2-example\",\n      \"version\": \"1.0.0\",\n      \"main\": \"/index.js\",\n      \"dependencies\": {\n        \"@antv/g2\": \"^5\"\n      }\n    }"
  },
  "/index.js": {
    // 入口文件是纯 JS
    code: "import { Chart } from '@antv/g2';\n\n    const chart = new Chart({\n      container: 'root',\n    });\n\n    chart.options({\n      type: 'interval',\n      autoFit: true,\n      data: [\n        { grade: '\u4E00\u5E74\u7EA7', count: 200 },\n        { grade: '\u4E8C\u5E74\u7EA7', count: 250 },\n        { grade: '\u4E09\u5E74\u7EA7', count: 300 },\n        { grade: '\u56DB\u5E74\u7EA7', count: 350 },\n      ],\n      encode: { x: 'grade', y: 'count' },\n    });\n\n    chart.render();\n    "
  },
  "/index.html": {
    code: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Vanilla JS Example</title>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <div id=\"container\"></div>\n  <script src=\"index.js\"></script>\n</body>\n</html>"
  }
};
export var code = {
  modules: {
    // package.json 文件是必须要的，其中 name, version, main, dependencies 必填
    '/package.json': {
      fpath: '/package.json',
      code: "{\n  \"name\": \"dark-card-app\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@ant-design/icons\": \"^5.2.6\",\n    \"@alipay/bigfish\": \"^4.3.0\"\n  },\n\"main\": \"src/index.jsx\"\n}\n"
    },
    // 入口文件默认是 /src/index.tsx，也可以配合 package.json main 字段指定其他入口
    '/src/index.jsx': {
      fpath: '/src/index.jsx',
      code: "import React from '@alipay/bigfish/react';\n      import ReactDOM from '@alipay/bigfish/react-dom';\nimport { ConfigProvider, theme } from '@alipay/bigfish/antd';\nimport App from './App';\nReactDOM.createRoot(document.getElementById('root')).render(\n  <React.StrictMode>\n    <ConfigProvider\n      theme={{\n        algorithm: theme.darkAlgorithm,\n        token: {\n          colorBgContainer: '#141414',\n          colorBorderSecondary: '#303030',\n        }\n      }}\n    >\n      <App />\n    </ConfigProvider>\n  </React.StrictMode>\n);\n"
    },
    '/src/App.jsx': {
      fpath: '/src/App.jsx',
      code: "import React from '@alipay/bigfish/react';\nimport { Card, Avatar, Typography, Space } from '@alipay/bigfish/antd';\nimport { UserOutlined, ClockCircleOutlined, HeartOutlined, MessageOutlined } from '@ant-design/icons';\nimport './App.less';\nimport {styled} from '@alipay/bigfish';\nconst Title = styled.div`\n  color: palevioletred;\n`;\n\nconst { Text } = Typography;\n\nconst DarkCard = () => {\n  return (\n    <div className=\"dark-card-container\">\n      <Card\n        className=\"dark-card\"\n        cover={\n          <div className=\"card-cover\">\n            <div className=\"cover-image-placeholder\" />\n          </div>\n        }\n        actions={[\n          <Space key=\"time\">\n            <ClockCircleOutlined />\n            <Text className=\"action-text\">2 hours ago</Text>\n          </Space>,\n          <Space key=\"likes\">\n            <HeartOutlined />\n            <Text className=\"action-text\">128</Text>\n          </Space>,\n          <Space key=\"comments\">\n            <MessageOutlined />\n            <Text className=\"action-text\">24</Text>\n          </Space>\n        ]}\n      >\n        <Card.Meta\n          avatar={<Avatar size={40} icon={<UserOutlined />} />}\n          title={<Title>Dark Theme Card</Title>}\n          description={\n            <Text className=\"card-description\">\n              This is a dark themed card with modern design elements.\n              Perfect for displaying content in low-light interfaces.\n            </Text>\n          }\n        />\n      </Card>\n    </div>\n  );\n};\n\nexport default DarkCard;\n"
    },
    '/src/App.less': {
      fpath: '/src/App.less',
      code: ".dark-card-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  background-color: #0a0a0a;\n  padding: 20px;\n}\n\n.dark-card {\n  width: 100%;\n  max-width: 400px;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n\n  .ant-card-head {\n    border-bottom: 1px solid #303030;\n  }\n\n  .ant-card-actions {\n    background: #1a1a1a;\n    border-top: 1px solid #303030;\n\n    > li {\n      border-right: 1px solid #303030 !important;\n    }\n  }\n}\n\n.card-cover {\n  height: 200px;\n  background: linear-gradient(135deg, #2c2c2c, #1a1a1a);\n  position: relative;\n  overflow: hidden;\n\n  .cover-image-placeholder {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background:\n      radial-gradient(circle at center, #3a3a3a 0%, #1f1f1f 100%);\n  }\n}\n\n.card-description {\n  color: rgba(255, 255, 255, 0.65) !important;\n}\n\n.action-text {\n  color: rgba(255, 255, 255, 0.45) !important;\n  font-size: 12px;\n}\n"
    }
  }
};