Skip to content

Commit 5d39475

Browse files
bhargavpaturu06bhargavpaturu06
authored
Merge pull request #16 from codezoned/dashboard-skeleton
Added dashboard base
2 parents 3cf389b + aa6f516 commit 5d39475

File tree

4 files changed

+125
-23
lines changed

4 files changed

+125
-23
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@ant-design/icons": "^4.2.2",
67
"@testing-library/jest-dom": "^4.2.4",
78
"@testing-library/react": "^9.3.2",
89
"@testing-library/user-event": "^7.1.2",
@@ -36,5 +37,8 @@
3637
"last 1 firefox version",
3738
"last 1 safari version"
3839
]
40+
},
41+
"devDependencies": {
42+
"ant-design": "^1.0.0"
3943
}
4044
}

‎src/components/styled/SearchInputWrapper.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components';
2+
import { Input } from 'antd';
3+
4+
const SearchWrapper = styled(Input)`
5+
padding-right: 20px;
6+
`;
7+
8+
export default SearchWrapper;

‎src/containers/DashboardContainer.js

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import * as React from 'react';
2+
import SearchWrapper from '../components/styled/SearchInputWrapper'
23
import { Auth } from 'aws-amplify';
3-
import { RouteComponentProps, withRouter } from 'react-router';
4-
import { Layout, Menu, Icon, notification } from 'antd';
4+
import { withRouter } from 'react-router';
5+
import { Layout, Menu, Icon, notification, Button, List, Card } from 'antd';
6+
import {PlusOutlined, SearchOutlined, PlusCircleFilled} from '@ant-design/icons'
57

68
/** App Theme */
79
import { colors } from '../themes/Colors';
810

911
/** App Constatns */
1012
import { AUTH_USER_TOKEN_KEY } from '../utils/constants';
11-
import { ClickParam } from 'antd/lib/menu';
1213

1314
const DashBoardContainer = props => {
1415
const [collapsed, setCollapsed] = React.useState(false);
@@ -24,9 +25,46 @@ const DashBoardContainer = props => {
2425
}
2526
};
2627

28+
//Adding this temporary data till we fetch from backend
29+
const data = [
30+
{
31+
domain: 'google.co.in',
32+
email: ['abc@google.com', "test@google.com"]
33+
},
34+
{
35+
domain: 'facebook.com',
36+
email: ['abc@google.com', "test@google.com"]
37+
},
38+
{
39+
domain: 'twitter.com',
40+
email: ['abc@gmail.com', "test@gmail.com"]
41+
},
42+
{
43+
domain: 'instagram.com',
44+
email: ['abc@google.com', "test@google.com"]
45+
},
46+
{
47+
domain: 'amazon.in',
48+
email: ['abc@amazon.com', "xyz@amazon.com"]
49+
},
50+
{
51+
domain: 'flipkart.com',
52+
email: ['abc@flipkart.com', "test@flipkart.com"]
53+
},
54+
];
55+
2756
return (
28-
<Layout className="cover" id="app-header">
29-
<Layout.Sider className="cover" trigger={null} collapsible collapsed={collapsed}>
57+
<Layout className="cover" id="app-header" style={{ minHeight: '100vh' }}>
58+
<Layout.Sider className="cover" trigger={null} collapsible collapsed={collapsed} width={250} >
59+
<div style={{display:"flex", marginTop:20, marginBottom: 20}}>
60+
<Icon
61+
style={{color:colors.white, marginTop:10, marginLeft:25, marginRight:10}}
62+
className="trigger"
63+
onClick={() => setCollapsed(!collapsed)}
64+
type={collapsed ? 'menu-unfold' : 'menu-fold'}
65+
/>
66+
<SearchWrapper prefix={<SearchOutlined/>}/>
67+
</div>
3068
<div className="logo" />
3169
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
3270
<Menu.Item key="1">
@@ -43,26 +81,37 @@ const DashBoardContainer = props => {
4381
</Menu.Item>
4482
</Menu>
4583
</Layout.Sider>
46-
<Layout>
84+
<Layout style={{background: colors.white}}>
4785
<Layout.Header style={{ background: colors.white, padding: 0 }}>
48-
<Icon
49-
className="trigger"
50-
onClick={() => setCollapsed(!collapsed)}
51-
type={collapsed ? 'menu-unfold' : 'menu-fold'}
52-
/>
86+
87+
<span style={{paddingRight: 50}}> </span>
88+
<Button type="primary" >
89+
<PlusOutlined />
90+
Add New
91+
</Button>
5392
</Layout.Header>
54-
<Layout.Content
55-
style={{
56-
margin: '24px 16px',
57-
padding: 24,
58-
background: colors.white,
59-
minHeight: 280
60-
}}
61-
>
62-
<div className="text-center">
63-
<h1>Hello world</h1>
64-
</div>
65-
</Layout.Content>
93+
<List
94+
grid={{
95+
gutter: 16,
96+
xs: 1,
97+
sm: 2,
98+
md: 4,
99+
lg: 4,
100+
xl: 6,
101+
xxl: 3,
102+
}}
103+
dataSource={data}
104+
renderItem={item => (
105+
<List.Item>
106+
<Card title={item.domain} actions={[<PlusCircleFilled />]}>{<List dataSource={item.email}
107+
renderItem={emails => (
108+
<List.Item>
109+
{emails}
110+
</List.Item>)}/>}
111+
</Card>
112+
</List.Item>
113+
)}
114+
/>
66115
</Layout>
67116
</Layout>
68117
);

‎yarn.lock

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
# yarn lockfile v1
33

44

5+
"@ant-design/colors@^3.1.0":
6+
version "3.2.2"
7+
resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
8+
integrity sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==
9+
dependencies:
10+
tinycolor2 "^1.4.1"
11+
512
"@ant-design/css-animation@^1.7.2":
613
version "1.7.2"
714
resolved "https://registry.yarnpkg.com/@ant-design/css-animation/-/css-animation-1.7.2.tgz#4ee5d2ec0fb7cc0a78b44e1c82628bd4621ac7e3"
@@ -15,6 +22,23 @@
1522
ant-design-palettes "^1.1.3"
1623
babel-runtime "^6.26.0"
1724

25+
"@ant-design/icons-svg@^4.0.0":
26+
version "4.1.0"
27+
resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
28+
integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
29+
30+
"@ant-design/icons@^4.2.2":
31+
version "4.2.2"
32+
resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.2.2.tgz#6533c5a02aec49238ec4748074845ad7d85a4f5e"
33+
integrity sha512-DrVV+wcupnHS7PehJ6KiTcJtAR5c25UMgjGECCc6pUT9rsvw0AuYG+a4HDjfxEQuDqKTHwW+oX/nIvCymyLE8Q==
34+
dependencies:
35+
"@ant-design/colors" "^3.1.0"
36+
"@ant-design/icons-svg" "^4.0.0"
37+
"@babel/runtime" "^7.10.4"
38+
classnames "^2.2.6"
39+
insert-css "^2.0.0"
40+
rc-util "^5.0.1"
41+
1842
"@ant-design/icons@~1.1.15":
1943
version "1.1.16"
2044
resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-1.1.16.tgz#ac6426216934e3f4bc108f2f48f92ed66789235e"
@@ -2383,6 +2407,13 @@
23832407
dependencies:
23842408
regenerator-runtime "^0.13.4"
23852409

2410+
"@babel/runtime@^7.10.4":
2411+
version "7.11.2"
2412+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
2413+
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
2414+
dependencies:
2415+
regenerator-runtime "^0.13.4"
2416+
23862417
"@babel/template@^7.10.1", "@babel/template@^7.10.3", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
23872418
version "7.10.3"
23882419
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8"
@@ -3423,6 +3454,11 @@ ant-design-palettes@^1.1.3:
34233454
dependencies:
34243455
tinycolor2 "^1.4.1"
34253456

3457+
ant-design@^1.0.0:
3458+
version "1.0.0"
3459+
resolved "https://registry.yarnpkg.com/ant-design/-/ant-design-1.0.0.tgz#53ea0a397da976358e88bf06224fb3de756b87b4"
3460+
integrity sha1-U+oKOX2pdjWOiL8GIk+z3nVrh7Q=
3461+
34263462
antd@3.10.0:
34273463
version "3.10.0"
34283464
resolved "https://registry.yarnpkg.com/antd/-/antd-3.10.0.tgz#fb555efca416e9a1c931bb17234ae608dc41f9d1"
@@ -7159,6 +7195,11 @@ inquirer@^7.0.0:
71597195
strip-ansi "^6.0.0"
71607196
through "^2.3.6"
71617197

7198+
insert-css@^2.0.0:
7199+
version "2.0.0"
7200+
resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
7201+
integrity sha1-610Ql7dUL0x56jBg067gfQU4gPQ=
7202+
71627203
internal-ip@^4.3.0:
71637204
version "4.3.0"
71647205
resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"

0 commit comments

Comments
 (0)