Compare commits
2 Commits
e903cbea2e
...
d9961d11a0
| Author | SHA1 | Date |
|---|---|---|
 vibin
|
d9961d11a0 | 5 years ago |
|
vibin
|
6614347f99 | 5 years ago |
19 changed files with 2678 additions and 65 deletions
@ -0,0 +1,2 @@ |
|||
import '@storybook/addon-actions/register'; |
|||
import '@storybook/addon-links/register'; |
|||
@ -0,0 +1,4 @@ |
|||
import { configure } from '@storybook/react'; |
|||
|
|||
// automatically import all files ending in *.stories.js
|
|||
configure(require.context('../src/stories', true, /\.stories\.js$/), module); |
|||
|
After Width: | Height: | Size: 307 B |
|
After Width: | Height: | Size: 645 B |
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,22 @@ |
|||
import React from 'react'; |
|||
import {ReactComponent as Pages} from '../assets/Pages.svg'; |
|||
import {ReactComponent as Post} from '../assets/Post.svg'; |
|||
|
|||
/** @jsx jsx */ |
|||
import { css, jsx } from '@emotion/core'; |
|||
const btnStyle = css` |
|||
width:58px; |
|||
height:58px; |
|||
border-radius: 19px; |
|||
border:0; |
|||
background-color:rgba(255,255,255,0.5); |
|||
box-shadow: |
|||
inset 2px 2px 3px 0px rgba(38,49,105,0.20), |
|||
inset 0px 0px 5px -2px RGBA(83,92,137,0.16); |
|||
`;
|
|||
export const PagesBtn = () => ( |
|||
<button css={btnStyle}><Pages /></button> |
|||
) |
|||
export const PostBtn = () =>( |
|||
<button css={btnStyle}><Post /></button> |
|||
) |
|||
@ -0,0 +1,117 @@ |
|||
import React from 'react'; |
|||
import { PagesBtn, PasteBtn } from './Button'; |
|||
|
|||
/** @jsx jsx */ |
|||
import { css, jsx } from '@emotion/core'; |
|||
const overviewCardStyle = css` |
|||
width: 300px; |
|||
height: 175px; |
|||
border-radius: 12px; |
|||
border: 1px solid rgba(200,200,200,0.2); |
|||
background-color: #EFEEEE; |
|||
box-shadow: |
|||
6px 6px 16px 0 rgba(217,210,200,0.51), |
|||
-6px -6px 26px 0 rgba(255,255,255,0.83); |
|||
`;
|
|||
const layout = css` |
|||
padding: 10px 10px 10px 30px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
`;
|
|||
const btnPositon = css` |
|||
position: relative; |
|||
float: right; |
|||
`;
|
|||
const numberStyle = css` |
|||
margin-top: 10px; |
|||
font-size: 47px; |
|||
text-shadow: 0px 0px 5px rgba(0,0,0,0.2); |
|||
font-family: sans-serif; |
|||
`;
|
|||
const text = css` |
|||
font-family: sans-serif; |
|||
font-size: 1rem; |
|||
text-shadow: 0px 0px 2px rgba(0,0,0,0.2); |
|||
`;
|
|||
const link = css` |
|||
font-family: sans-serif; |
|||
text-decoration: none; |
|||
color: rgba(0,20,255,0.9); |
|||
text-shadow: 0px 0px 2px rgba(0,0,0,0.1); |
|||
`;
|
|||
const textPosition = css` |
|||
padding-top:10px; |
|||
`;
|
|||
|
|||
export const OverviewCard = () => ( |
|||
<div css={overviewCardStyle}> |
|||
<div css={layout}> |
|||
<div css={textPosition}> |
|||
<span css={numberStyle}>1 </span> |
|||
<p css={text}>Total Posts</p> |
|||
<a href="" css={link}>View all</a> |
|||
</div> |
|||
<PagesBtn css={btnPositon}></PagesBtn> |
|||
</div> |
|||
</div> |
|||
) |
|||
|
|||
const activityCardStyle = css` |
|||
width: 100%; |
|||
height: 125px; |
|||
display:flex; |
|||
border-radius: 12px; |
|||
border: 1px solid rgba(200,200,200,0.2); |
|||
background-color: #EFEEEE; |
|||
box-shadow: |
|||
6px 6px 16px 0 rgba(217,210,200,0.51), |
|||
-6px -6px 26px 0 rgba(255,255,255,0.83); |
|||
`;
|
|||
const activityBtnPosition = css` |
|||
height:100%; |
|||
width:15%; |
|||
display:flex; |
|||
justify-content:center; |
|||
align-items:center; |
|||
`;
|
|||
const postPosition = css` |
|||
display:flex; |
|||
width:100%; |
|||
flex-direction:column; |
|||
justify-content: space-evenly; |
|||
padding:10px; |
|||
`;
|
|||
const postPositionTop = css` |
|||
width:100%; |
|||
display:flex; |
|||
justify-content: space-between; |
|||
`;
|
|||
const horizontalLine = css` |
|||
max-width:100%; |
|||
height:2px; |
|||
background-color: rgba(100,100,100,0.5); |
|||
margin:10px; |
|||
`;
|
|||
const postPositionBottom = css` |
|||
width:100%; |
|||
display:flex; |
|||
justify-content:space-between; |
|||
`;
|
|||
export const ActivityCard =() => ( |
|||
<div css={activityCardStyle}> |
|||
<div css={activityBtnPosition}> |
|||
<PagesBtn></PagesBtn> |
|||
</div> |
|||
<div css={postPosition}> |
|||
<div css={postPositionTop}> |
|||
<span css={text}>Posts</span> |
|||
<span css={text}>Month date and time</span> |
|||
</div> |
|||
<div css={horizontalLine}></div> |
|||
<div css={postPositionBottom}> |
|||
<span css={text}>Hello world!</span> |
|||
<a href="" css={link}>View all</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react'; |
|||
|
|||
/** @jsx jsx */ |
|||
import { css, jsx } from '@emotion/core'; |
|||
|
|||
export const NavBar = () => { |
|||
return( |
|||
<div> |
|||
<input type="text" placeholder="Search"/> |
|||
</div> |
|||
|
|||
); |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
import React from 'react'; |
|||
import {ReactComponent as Dashboard} from '../assets/dashboard.svg'; |
|||
|
|||
/** @jsx jsx */ |
|||
import { css, jsx } from '@emotion/core'; |
|||
const layout = css` |
|||
positon: absolute; |
|||
width:25%; |
|||
height:100vh; |
|||
`;
|
|||
const linkStyle=css` |
|||
text-decoration: none; |
|||
`;
|
|||
const listStyle=css` |
|||
list-style: none; |
|||
`;
|
|||
const listLinkStyle =css` |
|||
padding: 10px 20px 10px 20px; |
|||
cursor: pointer; |
|||
:hover{ |
|||
border: 1px solid rgba(200,200,200,0.2); |
|||
} |
|||
`;
|
|||
|
|||
export const SideNavBar = () => { |
|||
return ( |
|||
<div css={layout}> |
|||
<div> |
|||
<ul css={listStyle}> |
|||
<li css={listLinkStyle}> |
|||
<a href="" css={linkStyle}> |
|||
<Dashboard /> Dashboard |
|||
</a> |
|||
</li> |
|||
<li css={listLinkStyle}> |
|||
<a href="" css={linkStyle}>Pages |
|||
</a> |
|||
</li> |
|||
<li css={listLinkStyle}> |
|||
<a href="" css={linkStyle}>Posts |
|||
</a> |
|||
</li> |
|||
<li css={listLinkStyle}> |
|||
<a href="" css={linkStyle}>Themes |
|||
</a> |
|||
</li> |
|||
<li css={listLinkStyle}> |
|||
<a href="" css={linkStyle}>Plugins |
|||
</a> |
|||
</li> |
|||
<li css={listLinkStyle}> |
|||
<a href="" css={linkStyle}>Settings |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
import React from 'react'; |
|||
|
|||
/** @jsx jsx */ |
|||
import { css, jsx } from '@emotion/core'; |
|||
|
|||
export const BasePage = () => { |
|||
return( |
|||
<div> |
|||
|
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import React from 'react'; |
|||
import {PagesBtn , PostBtn} from '../components/Button'; |
|||
|
|||
|
|||
export default { |
|||
title: 'ButtonStyle', |
|||
} |
|||
|
|||
export const PagesButton = () => ( |
|||
<PagesBtn>pages</PagesBtn> |
|||
) |
|||
|
|||
export const PostButton = () => ( |
|||
<PostBtn>post</PostBtn> |
|||
) |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react'; |
|||
import {OverviewCard, ActivityCard} from '../components/Card'; |
|||
|
|||
|
|||
export default { |
|||
title: 'Cards', |
|||
} |
|||
|
|||
export const OverView = () => ( |
|||
<OverviewCard>hi</OverviewCard> |
|||
) |
|||
export const Activity = () => ( |
|||
<ActivityCard></ActivityCard> |
|||
) |
|||
@ -0,0 +1,10 @@ |
|||
import React from 'react'; |
|||
import {NavBar} from '../components/NavBar'; |
|||
|
|||
export default { |
|||
title: 'NavBar', |
|||
} |
|||
|
|||
export const NavigationBar = () => ( |
|||
<NavBar></NavBar> |
|||
) |
|||
@ -0,0 +1,10 @@ |
|||
import React from 'react'; |
|||
import {SideNavBar} from '../components/SideNav'; |
|||
|
|||
export default { |
|||
title: 'SideNavBar', |
|||
} |
|||
|
|||
export const SideNav =() =>( |
|||
<SideNavBar></SideNavBar> |
|||
) |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue