Skip to content

Commit

Permalink
Merge pull request #16 from codezoned/dashboard-skeleton
Browse files Browse the repository at this point in the history
Added dashboard base
  • Loading branch information
Bhargav061197 authored Aug 27, 2020
2 parents 3cf389b + aa6f516 commit 5d39475
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 23 deletions.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.2.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
Expand Down Expand Up @@ -36,5 +37,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"ant-design": "^1.0.0"
}
}
8 changes: 8 additions & 0 deletions src/components/styled/SearchInputWrapper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import styled from 'styled-components';
import { Input } from 'antd';

const SearchWrapper = styled(Input)`
padding-right: 20px;
`;

export default SearchWrapper;
95 changes: 72 additions & 23 deletions src/containers/DashboardContainer.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import * as React from 'react';
import SearchWrapper from '../components/styled/SearchInputWrapper'
import { Auth } from 'aws-amplify';
import { RouteComponentProps, withRouter } from 'react-router';
import { Layout, Menu, Icon, notification } from 'antd';
import { withRouter } from 'react-router';
import { Layout, Menu, Icon, notification, Button, List, Card } from 'antd';
import {PlusOutlined, SearchOutlined, PlusCircleFilled} from '@ant-design/icons'

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

/** App Constatns */
import { AUTH_USER_TOKEN_KEY } from '../utils/constants';
import { ClickParam } from 'antd/lib/menu';

const DashBoardContainer = props => {
const [collapsed, setCollapsed] = React.useState(false);
Expand All @@ -24,9 +25,46 @@ const DashBoardContainer = props => {
}
};

//Adding this temporary data till we fetch from backend
const data = [
{
domain: 'google.co.in',
email: ['abc@google.com', "test@google.com"]
},
{
domain: 'facebook.com',
email: ['abc@google.com', "test@google.com"]
},
{
domain: 'twitter.com',
email: ['abc@gmail.com', "test@gmail.com"]
},
{
domain: 'instagram.com',
email: ['abc@google.com', "test@google.com"]
},
{
domain: 'amazon.in',
email: ['abc@amazon.com', "xyz@amazon.com"]
},
{
domain: 'flipkart.com',
email: ['abc@flipkart.com', "test@flipkart.com"]
},
];

return (
<Layout className="cover" id="app-header">
<Layout.Sider className="cover" trigger={null} collapsible collapsed={collapsed}>
<Layout className="cover" id="app-header" style={{ minHeight: '100vh' }}>
<Layout.Sider className="cover" trigger={null} collapsible collapsed={collapsed} width={250} >
<div style={{display:"flex", marginTop:20, marginBottom: 20}}>
<Icon
style={{color:colors.white, marginTop:10, marginLeft:25, marginRight:10}}
className="trigger"
onClick={() => setCollapsed(!collapsed)}
type={collapsed ? 'menu-unfold' : 'menu-fold'}
/>
<SearchWrapper prefix={<SearchOutlined/>}/>
</div>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
Expand All @@ -43,26 +81,37 @@ const DashBoardContainer = props => {
</Menu.Item>
</Menu>
</Layout.Sider>
<Layout>
<Layout style={{background: colors.white}}>
<Layout.Header style={{ background: colors.white, padding: 0 }}>
<Icon
className="trigger"
onClick={() => setCollapsed(!collapsed)}
type={collapsed ? 'menu-unfold' : 'menu-fold'}
/>

<span style={{paddingRight: 50}}> </span>
<Button type="primary" >
<PlusOutlined />
Add New
</Button>
</Layout.Header>
<Layout.Content
style={{
margin: '24px 16px',
padding: 24,
background: colors.white,
minHeight: 280
}}
>
<div className="text-center">
<h1>Hello world</h1>
</div>
</Layout.Content>
<List
grid={{
gutter: 16,
xs: 1,
sm: 2,
md: 4,
lg: 4,
xl: 6,
xxl: 3,
}}
dataSource={data}
renderItem={item => (
<List.Item>
<Card title={item.domain} actions={[<PlusCircleFilled />]}>{<List dataSource={item.email}
renderItem={emails => (
<List.Item>
{emails}
</List.Item>)}/>}
</Card>
</List.Item>
)}
/>
</Layout>
</Layout>
);
Expand Down
41 changes: 41 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
# yarn lockfile v1


"@ant-design/colors@^3.1.0":
version "3.2.2"
resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
integrity sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==
dependencies:
tinycolor2 "^1.4.1"

"@ant-design/css-animation@^1.7.2":
version "1.7.2"
resolved "https://registry.yarnpkg.com/@ant-design/css-animation/-/css-animation-1.7.2.tgz#4ee5d2ec0fb7cc0a78b44e1c82628bd4621ac7e3"
Expand All @@ -15,6 +22,23 @@
ant-design-palettes "^1.1.3"
babel-runtime "^6.26.0"

"@ant-design/icons-svg@^4.0.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==

"@ant-design/icons@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.2.2.tgz#6533c5a02aec49238ec4748074845ad7d85a4f5e"
integrity sha512-DrVV+wcupnHS7PehJ6KiTcJtAR5c25UMgjGECCc6pUT9rsvw0AuYG+a4HDjfxEQuDqKTHwW+oX/nIvCymyLE8Q==
dependencies:
"@ant-design/colors" "^3.1.0"
"@ant-design/icons-svg" "^4.0.0"
"@babel/runtime" "^7.10.4"
classnames "^2.2.6"
insert-css "^2.0.0"
rc-util "^5.0.1"

"@ant-design/icons@~1.1.15":
version "1.1.16"
resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-1.1.16.tgz#ac6426216934e3f4bc108f2f48f92ed66789235e"
Expand Down Expand Up @@ -2383,6 +2407,13 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.10.4":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/template@^7.10.1", "@babel/template@^7.10.3", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
version "7.10.3"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8"
Expand Down Expand Up @@ -3423,6 +3454,11 @@ ant-design-palettes@^1.1.3:
dependencies:
tinycolor2 "^1.4.1"

ant-design@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/ant-design/-/ant-design-1.0.0.tgz#53ea0a397da976358e88bf06224fb3de756b87b4"
integrity sha1-U+oKOX2pdjWOiL8GIk+z3nVrh7Q=

antd@3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/antd/-/antd-3.10.0.tgz#fb555efca416e9a1c931bb17234ae608dc41f9d1"
Expand Down Expand Up @@ -7159,6 +7195,11 @@ inquirer@^7.0.0:
strip-ansi "^6.0.0"
through "^2.3.6"

insert-css@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
integrity sha1-610Ql7dUL0x56jBg067gfQU4gPQ=

internal-ip@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
Expand Down

0 comments on commit 5d39475

Please sign in to comment.