feat: add example

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "antd": "^4.6.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/components/app/index.js

@@ -1,14 +1,76 @@
 import React from 'react';
+import { Layout, Menu, Breadcrumb } from 'antd';
+import {
+  UserOutlined,
+  LaptopOutlined,
+  NotificationOutlined,
+} from '@ant-design/icons';
 
-import styles from './index.module.css';
+import 'antd/dist/antd.css';
 
-const App = () => {
-  const { app } = styles;
+const { SubMenu } = Menu;
+const { Header, Content, Sider } = Layout;
 
+const App = () => {
   return (
-    <div className={app}>
-    </div>
+    <Layout>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
+          <Menu.Item key="1">nav 1</Menu.Item>
+          <Menu.Item key="2">nav 2</Menu.Item>
+          <Menu.Item key="3">nav 3</Menu.Item>
+        </Menu>
+      </Header>
+      <Layout>
+        <Sider width={200} className=".app-bg">
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            style={{ height: '100%', borderRight: 0 }}>
+            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
+              <Menu.Item key="1">option1</Menu.Item>
+              <Menu.Item key="2">option2</Menu.Item>
+              <Menu.Item key="3">option3</Menu.Item>
+              <Menu.Item key="4">option4</Menu.Item>
+            </SubMenu>
+            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
+              <Menu.Item key="5">option5</Menu.Item>
+              <Menu.Item key="6">option6</Menu.Item>
+              <Menu.Item key="7">option7</Menu.Item>
+              <Menu.Item key="8">option8</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub3"
+              icon={<NotificationOutlined />}
+              title="subnav 3">
+              <Menu.Item key="9">option9</Menu.Item>
+              <Menu.Item key="10">option10</Menu.Item>
+              <Menu.Item key="11">option11</Menu.Item>
+              <Menu.Item key="12">option12</Menu.Item>
+            </SubMenu>
+          </Menu>
+        </Sider>
+        <Layout style={{ padding: '0 24px 24px' }}>
+          <Breadcrumb style={{ margin: '16px 0' }}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+            <Breadcrumb.Item>List</Breadcrumb.Item>
+            <Breadcrumb.Item>App</Breadcrumb.Item>
+          </Breadcrumb>
+          <Content
+            className=".app-bg"
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+            }}>
+            Content
+          </Content>
+        </Layout>
+      </Layout>
+    </Layout>
   );
-}
+};
 
 export default App;

src/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import { render } from 'react-dom';
+import App from './components/app';
 import * as serviceWorker from './serviceWorker';
+import './index.css';
 
-ReactDOM.render(
+render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

src/redux/constants.js

@@ -0,0 +1,3 @@
+const actionTypes = {};
+
+export default actionTypes;

src/redux/reducers/index.js

@@ -0,0 +1,6 @@
+// import actionTypes from '../constants';
+// import initialState from '../initial-state';
+
+// const reducer = (state = initialState, { type, payload }) => {}
+
+// export default reducer;

src/store.js

@@ -0,0 +1,6 @@
+// import { createStore } from 'redux';
+// import reducer from './redux/reducers';
+
+// const store = createStore(reducer);
+
+// export default store;