صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
tati
/
critter-crossing
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

Initial commit. Create react App configs and packages config. Create simple app showing fishes

Tatiana Inama 6 سال پیش
والد
c4fb463086
کامیت
0dacff7d03
7فایلهای تغییر یافته به همراه926 افزوده شده و 21 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 773 0
      package-lock.json
  2. 6 0
      package.json
  3. 3 3
      public/index.html
  4. 2 2
      public/manifest.json
  5. 114 16
      src/App.tsx
  6. 1 0
      src/fish-data.json
  7. 27 0
      src/index.css

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 773 - 0
package-lock.json


+ 6 - 0
package.json
مشاهده فایل 

@@ -10,8 +10,11 @@
 
     "@types/node": "^12.12.35",
 
     "@types/node": "^12.12.35",
 
     "@types/react": "^16.9.34",
 
     "@types/react": "^16.9.34",
 
     "@types/react-dom": "^16.9.6",
 
     "@types/react-dom": "^16.9.6",
 
+    "antd": "^4.1.3",
 
+    "ramda": "^0.27.0",
 
     "react": "^16.13.1",
 
     "react": "^16.13.1",
 
     "react-dom": "^16.13.1",
 
     "react-dom": "^16.13.1",
 
+    "react-router-dom": "^5.1.2",
 
     "react-scripts": "3.4.1",
 
     "react-scripts": "3.4.1",
 
     "typescript": "^3.7.5"
 
     "typescript": "^3.7.5"
 
   },
 
   },
 
@@ -35,5 +38,8 @@
 
       "last 1 firefox version",
 
       "last 1 firefox version",
 
       "last 1 safari version"
 
       "last 1 safari version"
 
     ]
 
     ]
 
+  },
 
+  "devDependencies": {
 
+    "@types/react-router-dom": "^5.1.4"
 
   }
 
   }
 
 }
 
 }

+ 3 - 3
public/index.html
مشاهده فایل 

@@ -6,8 +6,8 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta
 
     <meta
 
-      name="description"
 
-      content="Web site created using create-react-app"
 
+      name="Cripedia Guide"
 
+      content="Animal Crossing: New Horizont cripedia guide"
 
     />
 
     />
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <!--
 
     <!--
 
@@ -24,7 +24,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
     -->
 
-    <title>React App</title>
 
+    <title>AC Guide</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 2 - 2
public/manifest.json
مشاهده فایل 

@@ -1,6 +1,6 @@
 
 {
 
 {
 
-  "short_name": "React App",
 
-  "name": "Create React App Sample",
 
+  "short_name": "AC Guide",
 
+  "name": "Animal Crossing cripedia guide",
 
   "icons": [
 
   "icons": [
 
     {
 
     {
 
       "src": "favicon.ico",
 
       "src": "favicon.ico",

+ 114 - 16
src/App.tsx
مشاهده فایل 

@@ -1,24 +1,122 @@
 
 import React from 'react';
 
 import React from 'react';
 
-import logo from './logo.svg';
 
+import FISHES from './fish-data.json';
 
+import { Layout, Menu, Table } from 'antd';
 
+import {
 
+  BrowserRouter as Router,
 
+  Switch,
 
+  Route,
 
+  Link } from 'react-router-dom';
 
 import './App.css';
 
 import './App.css';
 
+const { Header, Content, Footer } = Layout;
 
 
 
-function App() {
 
+const Bugs = () => {
 
+  return (
 
+    <h2> Bugs </h2>
 
+  )
 
+}
 
+
 
+// name: fish.name,
 
+// image: fish.imageLink,
 
+// price: fish.price,
 
+// location: mkLocation(fish.location),
 
+// time: mkTime(fish.time),
 
+// months: mkMonth(fish),
 
+// shadowSize: mkSize(fish.shadowSize)
 
+
 
+const Fishes = () => {
 
+  const columns = [
 
+    {
 
+      title: '',
 
+      dataIndex: 'image',
 
+      render: (image: string) => (<img src={image} alt='' className="fish-icon"/>)
 
+    },
 
+    {
 
+      title: 'Name',
 
+      dataIndex: 'name'
 
+    },
 
+    {
 
+      title: 'Location',
 
+      dataIndex: 'location',
 
+    },
 
+    {
 
+      title: 'Time',
 
+      dataIndex: 'time'
 
+    },
 
+    {
 
+      title: 'Months',
 
+      dataIndex: 'months'
 
+    },
 
+    {
 
+      title: 'Price',
 
+      dataIndex: 'price'
 
+    },
 
+    {
 
+      title: 'Size',
 
+      dataIndex: 'shadowSize'
 
+    },
 
+  ];
 
+
 
+  return (
 
+    <Table columns={columns} dataSource={FISHES} size="small">
 
+    </Table>
 
+  )
 
+}
 
+
 
+const routes = [
 
+  {
 
+    path: "/",
 
+    name: 'home',
 
+    exact: true,
 
+    component: () => <h2>Home</h2>
 
+  },
 
+  {
 
+    path: "/fishes",
 
+    name: 'fishes',
 
+    component: Fishes
 
+  },
 
+  {
 
+    path: "/bugs",
 
+    name: 'bugs',
 
+    component: Bugs
 
+  }
 
+];
 
+
 
+const App: React.FunctionComponent = () => {
 
   return (
 
   return (
 
     <div className="App">
 
     <div className="App">
 
-      <header className="App-header">
 
-        <img src={logo} className="App-logo" alt="logo" />
 
-        <p>
 
-          Edit <code>src/App.tsx</code> and save to reload.
 
-        </p>
 
-        <a
 
-          className="App-link"
 
-          href="https://reactjs.org"
 
-          target="_blank"
 
-          rel="noopener noreferrer"
 
-        >
 
-          Learn React
 
-        </a>
 
-      </header>
 
+      <Router>
 
+        <Layout className="layout">
 
+          <Header>
 
+            <Menu theme="dark" mode="horizontal">
 
+              {
 
+                routes.map((route, key) => (
 
+                  <Menu.Item key={key}>
 
+                    <Link to={route.path}>{route.name}</Link>
 
+                  </Menu.Item>
 
+                ))
 
+              }
 
+            </Menu>
 
+          </Header>
 
+          <Content style={{ padding: '0 50px' }} className="site-layout-content">
 
+            <Switch>
 
+              {
 
+                routes.map((route, key) => (
 
+                  <Route key={key} path={route.path} exact={route.exact}>
 
+                    <route.component/>
 
+                  </Route>
 
+                ))
 
+              }
 
+            </Switch>
 
+          </Content>
 
+          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
 
+        </Layout>
 
+
 
+      </Router>
 
+      {/* {
 
+        FISHES.map(fish => (
 
+          <p>{fish.name}</p>
 
+        ))
 
+      }       */}
 
     </div>
 
     </div>
 
   );
 
   );
 
 }
 
 }

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 1 - 0
src/fish-data.json


+ 27 - 0
src/index.css
مشاهده فایل 

@@ -1,3 +1,5 @@
 
+@import '~antd/dist/antd.css';
 
+
 
 body {
 
 body {
 
   margin: 0;
 
   margin: 0;
 
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
@@ -11,3 +13,28 @@ code {
 
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
     monospace;
 
     monospace;
 
 }
 
 }
 
+
 
+.App {
 
+  height: 100vh;
 
+}
 
+.layout {
 
+  height: 100%;
 
+}
 
+
 
+.site-layout-content {
 
+  background: #fff;
 
+  padding: 24px;
 
+  height: 100%;
 
+}
 
+
 
+.fish-icon {
 
+  width: 48px;
 
+  height: auto;
 
+}
 
+#components-layout-demo-top .logo {
 
+  width: 120px;
 
+  height: 31px;
 
+  background: rgba(255, 255, 255, 0.2);
 
+  margin: 16px 24px 16px 0;
 
+  float: left;
 
+}