2020-1-CloudComputing-E / E_Team_KhuBox

Go to a project
Toggle navigation Toggle navigation pinning
서승완
9cdc7cb9 1 parent 7ca00676

chore: DEPRECATE REACT

Expand all
Inline Side-by-side
Showing 162 changed files with 6 additions and 2735 deletions
1 stages: 1 stages:
2 - - deploy:backend 2 + - deploy
3 - - deploy:frontend
4 3
5 variables: 4 variables:
6 PIP_CACHE_DIR: "$CI_PROJECT_DIR/.cache" 5 PIP_CACHE_DIR: "$CI_PROJECT_DIR/.cache"
...@@ -9,9 +8,9 @@ cache: ...@@ -9,9 +8,9 @@ cache:
9 paths: 8 paths:
10 - "$CI_PROJECT_DIR/.cache" 9 - "$CI_PROJECT_DIR/.cache"
11 10
12 -deploy:backend: 11 +deploy:
13 image: python:3.6.5 12 image: python:3.6.5
14 - stage: deploy:backend 13 + stage: deploy
15 cache: 14 cache:
16 paths: 15 paths:
17 - "$CI_PROJECT_DIR/khubox-api/venv" 16 - "$CI_PROJECT_DIR/khubox-api/venv"
...@@ -27,22 +26,6 @@ deploy:backend: ...@@ -27,22 +26,6 @@ deploy:backend:
27 - source venv/bin/activate 26 - source venv/bin/activate
28 - pip install -r requirements.txt 27 - pip install -r requirements.txt
29 - zappa update 28 - zappa update
30 -
31 -deploy:frontend:
32 - image: nikolaik/python-nodejs:python3.6-nodejs12-alpine
33 - stage: deploy:frontend
34 - cache:
35 - paths:
36 - - "$CI_PROJECT_DIR/.yarn"
37 - - "$CI_PROJECT_DIR/khubox-front/node_modules"
38 - script:
39 - cd $CI_PROJECT_DIR/khubox-front 29 - cd $CI_PROJECT_DIR/khubox-front
40 - - yarn config set cache-folder $CI_PROJECT_DIR/.yarn 30 + - aws s3 cp ./ s3://khubox-deploy/ --recursive --include "*" --acl public-read
41 - - yarn install
42 - - CI=false yarn build
43 - - pip install awscli
44 - - aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID
45 - - aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY
46 - - aws configure set region $AWS_DEFAULT_REGION
47 - - aws s3 cp ./build/ s3://khubox-deploy/ --recursive --include "*" --acl public-read
48 - aws cloudfront create-invalidation --distribution-id E1RC3LPJHL5VUA --paths "/*" 31 - aws cloudfront create-invalidation --distribution-id E1RC3LPJHL5VUA --paths "/*"
......
1 -# KhuBox · [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![Python 3.6.5](https://img.shields.io/badge/python-3.6.5-blue.svg)](https://www.python.org/downloads/release/python-365/) [![Node 12.16.3](https://img.shields.io/badge/node-12.16.3-brightgreen.svg)](https://nodejs.org/dist/v12.16.3/) [![build status](http://khuhub.khu.ac.kr/2020-1-CloudComputing-E/E_Team_KhuBox/badges/master/build.svg)](http://khuhub.khu.ac.kr/2020-1-CloudComputing-E/E_Team_KhuBox/commits/master) 1 +# KhuBox · [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![Python 3.6.5](https://img.shields.io/badge/python-3.6.5-blue.svg)](https://www.python.org/downloads/release/python-365/) [![build status](http://khuhub.khu.ac.kr/2020-1-CloudComputing-E/E_Team_KhuBox/badges/master/build.svg)](http://khuhub.khu.ac.kr/2020-1-CloudComputing-E/E_Team_KhuBox/commits/master)
2 2
3 2020년 1학기 경희대학교 클라우드컴퓨팅(CSE335) E조 3 2020년 1학기 경희대학교 클라우드컴퓨팅(CSE335) E조
4 4
...@@ -16,7 +16,7 @@ AWS를 활용한 Dropbox 개발 프로젝트 ...@@ -16,7 +16,7 @@ AWS를 활용한 Dropbox 개발 프로젝트
16 16
17 ## 기술 스택 17 ## 기술 스택
18 18
19 -1. Front-end : React 19 +1. Front-end : HTML5, CSS3, JavaScript, jQuery
20 20
21 2. Back-end : Django 21 2. Back-end : Django
22 22
......
1 -{
2 - "compilerOptions": {
3 - "baseUrl": "src"
4 - },
5 - "include": ["src"]
6 -}
1 -{
2 - "name": "khubox",
3 - "author": "2020-1_KHU_CloudComputing_E",
4 - "email": "16wjlee@khu.ac.kr",
5 - "licence": "MIT",
6 - "version": "0.0.1",
7 - "private": false,
8 - "scripts": {
9 - "start": "react-scripts start",
10 - "build": "react-scripts build",
11 - "test": "react-scripts test",
12 - "eject": "react-scripts eject"
13 - },
14 - "eslintConfig": {
15 - "extends": "react-app"
16 - },
17 - "browserslist": {
18 - "production": [
19 - ">0.2%",
20 - "not dead",
21 - "not op_mini all"
22 - ],
23 - "development": [
24 - "last 1 chrome version",
25 - "last 1 firefox version",
26 - "last 1 safari version"
27 - ]
28 - },
29 - "dependencies": {
30 - "@material-ui/core": "^4.2.1",
31 - "@material-ui/icons": "^4.2.1",
32 - "@material-ui/styles": "^4.2.1",
33 - "chart.js": "^2.8.0",
34 - "clsx": "^1.0.4",
35 - "history": "^4.9.0",
36 - "moment": "2.24.0",
37 - "moment-timezone": "^0.5.28",
38 - "node-sass": "^4.12.0",
39 - "prop-types": "^15.7.2",
40 - "react": "^16.8.6",
41 - "react-chartjs-2": "^2.7.6",
42 - "react-dom": "^16.8.6",
43 - "react-perfect-scrollbar": "^1.5.3",
44 - "react-router-dom": "^5.0.1",
45 - "react-scripts": "^3.0.1",
46 - "recompose": "^0.30.0",
47 - "underscore": "^1.9.1",
48 - "uuid": "^3.3.2",
49 - "validate.js": "^0.13.1"
50 - },
51 - "devDependencies": {
52 - "eslint-plugin-prettier": "^3.0.1",
53 - "eslint-plugin-react": "^7.12.4",
54 - "prettier": "^1.17.1",
55 - "prettier-eslint": "^8.8.2",
56 - "prettier-eslint-cli": "^4.7.1",
57 - "typescript": "^3.5.1"
58 - }
59 -}
1 -/* /index.html 200
...\ No newline at end of file ...\ No newline at end of file
No preview for this file type
1 -<svg width="133" height="36" viewBox="0 0 133 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2 -<g id="Group 2">
3 -<g id="flex">
4 -<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M0 18.1065C0 27.9411 8.05887 36 18.1065 36C27.9411 36 36 27.9411 36 18.1065C36 8.05887 27.9411 0 18.1065 0C8.05887 0 0 8.05887 0 18.1065ZM33.7263 18.1065C33.7263 26.6854 26.6854 33.7263 18.1065 33.7263C9.34353 33.7263 2.27368 26.714 2.27368 18.1065C2.27368 9.3146 9.3146 2.27368 18.1065 2.27368C26.714 2.27368 33.7263 9.34353 33.7263 18.1065Z" fill="white"/>
5 -<path id="Oval 3" fill-rule="evenodd" clip-rule="evenodd" d="M16.4288 13.5917C16.7107 13.359 17.0649 13.2318 17.4305 13.2318C17.7922 13.2318 18.1429 13.3564 18.4235 13.5846L22.6335 17.0082C23.0074 17.3123 23.5156 17.3923 23.9648 17.218L25.9502 16.4474C26.1292 16.3779 26.3302 16.4036 26.4851 16.517C27.0788 16.9516 28.5751 18.0497 29.1289 18.482C30.4861 19.5416 31.486 20.25 31.486 20.25C31.486 20.25 31.4686 19.8601 31.486 19.4401C31.846 10.718 25.2324 4.39017 17.8022 4.50144C10.3803 4.61568 4.38132 10.5662 4.50178 18.8354C4.51309 19.5319 4.6193 20.25 4.6193 20.25L6.50953 18.8354L8.80622 17.1806C9.12242 16.9528 9.54513 16.9393 9.87525 17.1464L10.7991 17.7261C11.0088 17.8577 11.2793 17.8402 11.4703 17.6826L16.4288 13.5917Z" fill="white"/>
6 -<path id="Oval 4" fill-rule="evenodd" clip-rule="evenodd" d="M16.6359 34.7904C18.8195 35.0437 20.6187 34.6644 21.2437 34.486C21.5288 34.4046 22.5941 34.144 22.8452 34.0596C23.6863 33.777 24.9699 33.1782 25.7013 32.7418C26.7957 32.0887 27.5685 31.4007 28.6388 30.4354C31.015 28.2924 32.625 24.3249 32.625 23.92C32.625 23.8287 28.2146 20.5068 26.9191 19.5329C26.7151 19.3796 26.4318 19.4032 26.253 19.5853C26.0843 19.7571 26.0583 20.0226 26.1911 20.2234C26.6343 20.894 27.5743 22.3246 27.6195 22.4617C27.792 22.9849 27.5465 23.2804 27.3009 23.1231C27.0553 22.9658 21.5646 19.2672 21.5646 19.2672L18.2802 16.9963C17.8686 16.7117 17.3068 17.0063 17.3068 17.5066C17.3068 17.5066 17.1957 19.1166 17.1957 20.1676C17.1957 20.5941 17.1518 21.1118 16.6359 21.246C16.3774 21.3132 15.7234 21.3527 15.7234 21.3527L10.1751 20.9334C9.79851 20.905 9.58736 21.358 9.85128 21.6281C9.85128 21.6281 17.1957 26.5849 17.1957 26.9884C17.1957 27.846 14.552 26.4718 12.4773 25.4639C9.95208 24.2372 7.14641 23.1341 6.44734 22.8633C6.34242 22.8227 6.22787 22.8316 6.13033 22.8877C5.52897 23.2335 3.35694 24.4869 3.37515 24.5407C4.0878 26.6437 5.97806 29.7235 8.8419 31.7745C9.987 32.5946 11.3079 33.3606 12.5939 33.8365C14.0645 34.3806 15.6064 34.7904 16.6359 34.7904Z" fill="white"/>
7 -</g>
8 -<path id="Devias Material Kit" d="M45.4453 25V10.7812H49.6445C50.901 10.7812 52.0143 11.0612 52.9844 11.6211C53.9609 12.181 54.7161 12.9753 55.25 14.0039C55.7839 15.0326 56.0508 16.2109 56.0508 17.5391V18.252C56.0508 19.5996 55.7806 20.7845 55.2402 21.8066C54.7064 22.8288 53.9414 23.6165 52.9453 24.1699C51.9557 24.7233 50.8197 25 49.5371 25H45.4453ZM47.916 12.7734V23.0273H49.5273C50.8229 23.0273 51.8158 22.6237 52.5059 21.8164C53.2025 21.0026 53.5573 19.8372 53.5703 18.3203V17.5293C53.5703 15.9863 53.235 14.8079 52.5645 13.9941C51.8939 13.1803 50.9206 12.7734 49.6445 12.7734H47.916ZM62.88 25.1953C61.3761 25.1953 60.1554 24.7233 59.2179 23.7793C58.2869 22.8288 57.8214 21.5658 57.8214 19.9902V19.6973C57.8214 18.6426 58.0232 17.7018 58.4269 16.875C58.837 16.0417 59.4099 15.3939 60.1456 14.9316C60.8813 14.4694 61.7016 14.2383 62.6066 14.2383C64.0454 14.2383 65.1554 14.6973 65.9366 15.6152C66.7244 16.5332 67.1183 17.832 67.1183 19.5117V20.4688H60.214C60.2856 21.3411 60.5753 22.0312 61.0831 22.5391C61.5974 23.0469 62.242 23.3008 63.0167 23.3008C64.1039 23.3008 64.9894 22.8613 65.673 21.9824L66.9523 23.2031C66.5291 23.8346 65.9627 24.3262 65.253 24.6777C64.5499 25.0228 63.7589 25.1953 62.88 25.1953ZM62.5968 16.1426C61.9457 16.1426 61.4184 16.3704 61.0148 16.8262C60.6176 17.2819 60.3637 17.9167 60.253 18.7305H64.7745V18.5547C64.7224 17.7604 64.5109 17.1615 64.1398 16.7578C63.7687 16.3477 63.2543 16.1426 62.5968 16.1426ZM72.5022 21.9922L74.7385 14.4336H77.1897L73.5276 25H71.467L67.7756 14.4336H70.2365L72.5022 21.9922ZM81.1478 25H78.7747V14.4336H81.1478V25ZM78.6283 11.6895C78.6283 11.3249 78.7422 11.0221 78.9701 10.7812C79.2044 10.5404 79.5365 10.4199 79.9661 10.4199C80.3958 10.4199 80.7279 10.5404 80.9622 10.7812C81.1966 11.0221 81.3138 11.3249 81.3138 11.6895C81.3138 12.0475 81.1966 12.347 80.9622 12.5879C80.7279 12.8223 80.3958 12.9395 79.9661 12.9395C79.5365 12.9395 79.2044 12.8223 78.9701 12.5879C78.7422 12.347 78.6283 12.0475 78.6283 11.6895ZM89.9985 25C89.8943 24.7982 89.8032 24.4694 89.725 24.0137C88.9698 24.8014 88.0454 25.1953 86.9516 25.1953C85.8904 25.1953 85.0245 24.8926 84.354 24.2871C83.6834 23.6816 83.3481 22.9329 83.3481 22.041C83.3481 20.9147 83.7648 20.0521 84.5981 19.4531C85.4379 18.8477 86.6359 18.5449 88.1918 18.5449H89.6469V17.8516C89.6469 17.3047 89.4939 16.8685 89.1879 16.543C88.8819 16.2109 88.4165 16.0449 87.7915 16.0449C87.2511 16.0449 86.8084 16.1816 86.4633 16.4551C86.1183 16.722 85.9457 17.0638 85.9457 17.4805H83.5727C83.5727 16.901 83.7648 16.3607 84.1489 15.8594C84.533 15.3516 85.0538 14.9544 85.7114 14.668C86.3754 14.3815 87.1144 14.2383 87.9282 14.2383C89.1651 14.2383 90.1515 14.5508 90.8872 15.1758C91.6228 15.7943 92.0004 16.6667 92.02 17.793V22.5586C92.02 23.5091 92.1534 24.2676 92.4204 24.834V25H89.9985ZM87.3911 23.291C87.8598 23.291 88.2993 23.1771 88.7094 22.9492C89.1261 22.7214 89.4386 22.4154 89.6469 22.0312V20.0391H88.3676C87.4887 20.0391 86.8279 20.1921 86.3852 20.498C85.9425 20.804 85.7211 21.237 85.7211 21.7969C85.7211 22.2526 85.8709 22.6172 86.1704 22.8906C86.4763 23.1576 86.8832 23.291 87.3911 23.291ZM100.373 22.1289C100.373 21.7057 100.197 21.3835 99.8453 21.1621C99.5002 20.9408 98.924 20.7454 98.1168 20.5762C97.3095 20.4069 96.6356 20.1921 96.0953 19.9316C94.9104 19.3587 94.3179 18.5286 94.3179 17.4414C94.3179 16.5299 94.702 15.7682 95.4703 15.1562C96.2385 14.5443 97.2151 14.2383 98.4 14.2383C99.663 14.2383 100.682 14.5508 101.457 15.1758C102.238 15.8008 102.628 16.6113 102.628 17.6074H100.255C100.255 17.1517 100.086 16.7741 99.7476 16.4746C99.4091 16.1686 98.9599 16.0156 98.4 16.0156C97.8791 16.0156 97.4527 16.1361 97.1207 16.377C96.7951 16.6178 96.6324 16.9401 96.6324 17.3438C96.6324 17.7083 96.7854 17.9915 97.0914 18.1934C97.3974 18.3952 98.0158 18.6003 98.9468 18.8086C99.8778 19.0104 100.607 19.2546 101.134 19.541C101.668 19.821 102.062 20.1595 102.316 20.5566C102.576 20.9538 102.707 21.4355 102.707 22.002C102.707 22.9525 102.313 23.724 101.525 24.3164C100.737 24.9023 99.7053 25.1953 98.4293 25.1953C97.5634 25.1953 96.7919 25.0391 96.1148 24.7266C95.4377 24.4141 94.9104 23.9844 94.5328 23.4375C94.1552 22.8906 93.9664 22.3014 93.9664 21.6699H96.271C96.3036 22.2298 96.5152 22.6628 96.9058 22.9688C97.2964 23.2682 97.814 23.418 98.4585 23.418C99.0835 23.418 99.5588 23.3008 99.8843 23.0664C100.21 22.8255 100.373 22.513 100.373 22.1289ZM113.963 18.8574L112.351 20.5664V25H109.881V10.7812H112.351V17.4512L113.719 15.7617L117.879 10.7812H120.867L115.584 17.0801L121.17 25H118.24L113.963 18.8574ZM124.737 25H122.364V14.4336H124.737V25ZM122.218 11.6895C122.218 11.3249 122.332 11.0221 122.559 10.7812C122.794 10.5404 123.126 10.4199 123.556 10.4199C123.985 10.4199 124.317 10.5404 124.552 10.7812C124.786 11.0221 124.903 11.3249 124.903 11.6895C124.903 12.0475 124.786 12.347 124.552 12.5879C124.317 12.8223 123.985 12.9395 123.556 12.9395C123.126 12.9395 122.794 12.8223 122.559 12.5879C122.332 12.347 122.218 12.0475 122.218 11.6895ZM130.248 11.8652V14.4336H132.113V16.1914H130.248V22.0898C130.248 22.4935 130.326 22.7865 130.482 22.9688C130.645 23.1445 130.932 23.2324 131.342 23.2324C131.615 23.2324 131.892 23.1999 132.172 23.1348V24.9707C131.632 25.1204 131.111 25.1953 130.609 25.1953C128.786 25.1953 127.875 24.1895 127.875 22.1777V16.1914H126.137V14.4336H127.875V11.8652H130.248Z" fill="white"/>
9 -</g>
10 -</svg>
1 -<!DOCTYPE html>
2 -<html lang="en" dir="ltr">
3 - <head>
4 - <meta charset="utf-8" />
5 - <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6 - <meta
7 - name="viewport"
8 - content="width=device-width, initial-scale=1, shrink-to-fit=no"
9 - />
10 - <meta name="theme-color" content="#000000" />
11 - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12 - <link
13 - href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700"
14 - rel="stylesheet"
15 - />
16 - <title>KHU Box</title>
17 - </head>
18 - <body>
19 - <noscript>You need to enable JavaScript to run this app.</noscript>
20 - <div id="root"></div>
21 - </body>
22 -</html>
1 -{
2 - "short_name": "React App",
3 - "name": "Create React App Sample",
4 - "icons": [
5 - {
6 - "src": "favicon.ico",
7 - "sizes": "64x64 32x32 24x24 16x16",
8 - "type": "image/x-icon"
9 - }
10 - ],
11 - "start_url": ".",
12 - "display": "standalone",
13 - "theme_color": "#000000",
14 - "background_color": "#ffffff"
15 -}
1 -import React, { Component } from 'react';
2 -import { Router } from 'react-router-dom';
3 -import { createBrowserHistory } from 'history';
4 -import { Chart } from 'react-chartjs-2';
5 -import { ThemeProvider } from '@material-ui/styles';
6 -import validate from 'validate.js';
7 -
8 -import { chartjs } from './helpers';
9 -import theme from './theme';
10 -import 'react-perfect-scrollbar/dist/css/styles.css';
11 -import './assets/scss/index.scss';
12 -import validators from './common/validators';
13 -import Routes from './Routes';
14 -
15 -const browserHistory = createBrowserHistory();
16 -
17 -Chart.helpers.extend(Chart.elements.Rectangle.prototype, {
18 - draw: chartjs.draw
19 -});
20 -
21 -validate.validators = {
22 - ...validate.validators,
23 - ...validators
24 -};
25 -
26 -export default class App extends Component {
27 - render() {
28 - return (
29 - <ThemeProvider theme={theme}>
30 - <Router history={browserHistory}>
31 - <Routes />
32 - </Router>
33 - </ThemeProvider>
34 - );
35 - }
36 -}
1 -import React from 'react';
2 -import { Switch, Redirect } from 'react-router-dom';
3 -
4 -import { RouteWithLayout } from './components';
5 -import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';
6 -
7 -import {
8 - Dashboard as DashboardView,
9 - RecentFileList as RecentFileListView,
10 - MyDrive as MyDriveView,
11 - SharedFileList as SharedFileView,
12 - Trash as TrashView,
13 - Icons as IconsView,
14 - Account as AccountView,
15 - Settings as SettingsView,
16 - SignUp as SignUpView,
17 - SignIn as SignInView,
18 - NotFound as NotFoundView
19 -} from './views';
20 -
21 -const Routes = () => {
22 - return (
23 - <Switch>
24 - <Redirect
25 - exact
26 - from="/"
27 - to="/my-drive"
28 - />
29 - <RouteWithLayout
30 - component={MyDriveView}
31 - exact
32 - layout={MainLayout}
33 - path="/my-drive"
34 - />
35 - <RouteWithLayout
36 - component={SharedFileView}
37 - exact
38 - layout={MainLayout}
39 - path="/share"
40 - />
41 - <RouteWithLayout
42 - component={RecentFileListView}
43 - exact
44 - layout={MainLayout}
45 - path="/recent"
46 - />
47 - <RouteWithLayout
48 - component={TrashView}
49 - exact
50 - layout={MainLayout}
51 - path="/trash"
52 - />
53 - <RouteWithLayout
54 - component={AccountView}
55 - exact
56 - layout={MainLayout}
57 - path="/account"
58 - />
59 - <RouteWithLayout
60 - component={SettingsView}
61 - exact
62 - layout={MainLayout}
63 - path="/settings"
64 - />
65 - <RouteWithLayout
66 - component={SignUpView}
67 - exact
68 - layout={MinimalLayout}
69 - path="/sign-up"
70 - />
71 - <RouteWithLayout
72 - component={SignInView}
73 - exact
74 - layout={MinimalLayout}
75 - path="/sign-in"
76 - />
77 - <RouteWithLayout
78 - component={NotFoundView}
79 - exact
80 - layout={MinimalLayout}
81 - path="/not-found"
82 - />
83 - <Redirect to="/not-found" />
84 - </Switch>
85 - );
86 -};
87 -
88 -export default Routes;
1 -* {
2 - box-sizing: border-box;
3 - margin: 0;
4 - padding: 0;
5 -}
6 -
7 -html {
8 - height: 100%;
9 - -webkit-font-smoothing: antialiased;
10 - -moz-osx-font-smoothing: grayscale;
11 -}
12 -
13 -body {
14 - background-color: #f4f6f8;
15 - height: 100%;
16 -}
17 -
18 -a {
19 - text-decoration: none;
20 -}
21 -
22 -#root {
23 - height: 100%;
24 -}
1 -const checked = (value, options) => {
2 - if (value !== true) {
3 - return options.message || 'must be checked';
4 - }
5 -};
6 -
7 -export default {
8 - checked
9 -};
1 -import React from 'react';
2 -import { Route } from 'react-router-dom';
3 -import PropTypes from 'prop-types';
4 -
5 -const RouteWithLayout = props => {
6 - const { layout: Layout, component: Component, ...rest } = props;
7 -
8 - return (
9 - <Route
10 - {...rest}
11 - render={matchProps => (
12 - <Layout>
13 - <Component {...matchProps} />
14 - </Layout>
15 - )}
16 - />
17 - );
18 -};
19 -
20 -RouteWithLayout.propTypes = {
21 - component: PropTypes.any.isRequired,
22 - layout: PropTypes.any.isRequired,
23 - path: PropTypes.string
24 -};
25 -
26 -export default RouteWithLayout;
1 -export { default } from './RouteWithLayout';
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import clsx from 'clsx';
4 -import { makeStyles } from '@material-ui/styles';
5 -import { Paper, Input } from '@material-ui/core';
6 -import SearchIcon from '@material-ui/icons/Search';
7 -
8 -const useStyles = makeStyles(theme => ({
9 - root: {
10 - borderRadius: '4px',
11 - alignItems: 'center',
12 - padding: theme.spacing(1),
13 - display: 'flex',
14 - flexBasis: 420
15 - },
16 - icon: {
17 - marginRight: theme.spacing(1),
18 - color: theme.palette.text.secondary
19 - },
20 - input: {
21 - flexGrow: 1,
22 - fontSize: '14px',
23 - lineHeight: '16px',
24 - letterSpacing: '-0.05px'
25 - }
26 -}));
27 -
28 -const SearchInput = props => {
29 - const { className, onChange, style, ...rest } = props;
30 -
31 - const classes = useStyles();
32 -
33 - return (
34 - <Paper
35 - {...rest}
36 - className={clsx(classes.root, className)}
37 - style={style}
38 - >
39 - <SearchIcon className={classes.icon} />
40 - <Input
41 - {...rest}
42 - className={classes.input}
43 - disableUnderline
44 - onChange={onChange}
45 - />
46 - </Paper>
47 - );
48 -};
49 -
50 -SearchInput.propTypes = {
51 - className: PropTypes.string,
52 - onChange: PropTypes.func,
53 - style: PropTypes.object
54 -};
55 -
56 -export default SearchInput;
1 -export { default } from './SearchInput';
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import clsx from 'clsx';
4 -import { makeStyles } from '@material-ui/styles';
5 -
6 -const useStyles = makeStyles(theme => ({
7 - root: {
8 - display: 'inline-block',
9 - borderRadius: '50%',
10 - flexGrow: 0,
11 - flexShrink: 0
12 - },
13 - sm: {
14 - height: theme.spacing(1),
15 - width: theme.spacing(1)
16 - },
17 - md: {
18 - height: theme.spacing(2),
19 - width: theme.spacing(2)
20 - },
21 - lg: {
22 - height: theme.spacing(3),
23 - width: theme.spacing(3)
24 - },
25 - neutral: {
26 - backgroundColor: theme.palette.neutral
27 - },
28 - primary: {
29 - backgroundColor: theme.palette.primary.main
30 - },
31 - info: {
32 - backgroundColor: theme.palette.info.main
33 - },
34 - warning: {
35 - backgroundColor: theme.palette.warning.main
36 - },
37 - danger: {
38 - backgroundColor: theme.palette.error.main
39 - },
40 - success: {
41 - backgroundColor: theme.palette.success.main
42 - }
43 -}));
44 -
45 -const StatusBullet = props => {
46 - const { className, size, color, ...rest } = props;
47 -
48 - const classes = useStyles();
49 -
50 - return (
51 - <span
52 - {...rest}
53 - className={clsx(
54 - {
55 - [classes.root]: true,
56 - [classes[size]]: size,
57 - [classes[color]]: color
58 - },
59 - className
60 - )}
61 - />
62 - );
63 -};
64 -
65 -StatusBullet.propTypes = {
66 - className: PropTypes.string,
67 - color: PropTypes.oneOf([
68 - 'neutral',
69 - 'primary',
70 - 'info',
71 - 'success',
72 - 'warning',
73 - 'danger'
74 - ]),
75 - size: PropTypes.oneOf(['sm', 'md', 'lg'])
76 -};
77 -
78 -StatusBullet.defaultProps = {
79 - size: 'md',
80 - color: 'default'
81 -};
82 -
83 -export default StatusBullet;
1 -export { default } from './StatusBullet'
...\ No newline at end of file ...\ No newline at end of file
1 -export { default as SearchInput } from './SearchInput';
2 -export { default as StatusBullet } from './StatusBullet';
3 -export { default as RouteWithLayout } from './RouteWithLayout';
1 -// ChartJS extension rounded bar chart
2 -// https://codepen.io/jedtrow/full/ygRYgo
3 -function draw() {
4 - const { ctx } = this._chart;
5 - const vm = this._view;
6 - let { borderWidth } = vm;
7 -
8 - let left;
9 - let right;
10 - let top;
11 - let bottom;
12 - let signX;
13 - let signY;
14 - let borderSkipped;
15 - let radius;
16 -
17 - // If radius is less than 0 or is large enough to cause drawing errors a max
18 - // radius is imposed. If cornerRadius is not defined set it to 0.
19 - let { cornerRadius } = this._chart.config.options;
20 - if (cornerRadius < 0) {
21 - cornerRadius = 0;
22 - }
23 -
24 - if (typeof cornerRadius === 'undefined') {
25 - cornerRadius = 0;
26 - }
27 -
28 - if (!vm.horizontal) {
29 - // bar
30 - left = vm.x - vm.width / 2;
31 - right = vm.x + vm.width / 2;
32 - top = vm.y;
33 - bottom = vm.base;
34 - signX = 1;
35 - signY = bottom > top ? 1 : -1;
36 - borderSkipped = vm.borderSkipped || 'bottom';
37 - } else {
38 - // horizontal bar
39 - left = vm.base;
40 - right = vm.x;
41 - top = vm.y - vm.height / 2;
42 - bottom = vm.y + vm.height / 2;
43 - signX = right > left ? 1 : -1;
44 - signY = 1;
45 - borderSkipped = vm.borderSkipped || 'left';
46 - }
47 -
48 - // Canvas doesn't allow us to stroke inside the width so we can
49 - // adjust the sizes to fit if we're setting a stroke on the line
50 - if (borderWidth) {
51 - // borderWidth shold be less than bar width and bar height.
52 - const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
53 - borderWidth = borderWidth > barSize ? barSize : borderWidth;
54 - const halfStroke = borderWidth / 2;
55 - // Adjust borderWidth when bar top position is near vm.base(zero).
56 - const borderLeft =
57 - left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
58 - const borderRight =
59 - right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
60 - const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
61 - const borderBottom =
62 - bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
63 - // not become a vertical line?
64 - if (borderLeft !== borderRight) {
65 - top = borderTop;
66 - bottom = borderBottom;
67 - }
68 - // not become a horizontal line?
69 - if (borderTop !== borderBottom) {
70 - left = borderLeft;
71 - right = borderRight;
72 - }
73 - }
74 -
75 - ctx.beginPath();
76 - ctx.fillStyle = vm.backgroundColor;
77 - ctx.strokeStyle = vm.borderColor;
78 - ctx.lineWidth = borderWidth;
79 -
80 - // Corner points, from bottom-left to bottom-right clockwise
81 - // | 1 2 |
82 - // | 0 3 |
83 - const corners = [[left, bottom], [left, top], [right, top], [right, bottom]];
84 -
85 - // Find first (starting) corner with fallback to 'bottom'
86 - const borders = ['bottom', 'left', 'top', 'right'];
87 - let startCorner = borders.indexOf(borderSkipped, 0);
88 - if (startCorner === -1) {
89 - startCorner = 0;
90 - }
91 -
92 - function cornerAt(index) {
93 - return corners[(startCorner + index) % 4];
94 - }
95 -
96 - // Draw rectangle from 'startCorner'
97 - let corner = cornerAt(0);
98 - ctx.moveTo(corner[0], corner[1]);
99 -
100 - for (let i = 1; i < 4; i += 1) {
101 - corner = cornerAt(i);
102 - let nextCornerId = i + 1;
103 - if (nextCornerId === 4) {
104 - nextCornerId = 0;
105 - }
106 -
107 - const width = corners[2][0] - corners[1][0];
108 - const height = corners[0][1] - corners[1][1];
109 - const x = corners[1][0];
110 - const y = corners[1][1];
111 -
112 - radius = cornerRadius;
113 - // Fix radius being too large
114 - if (radius > Math.abs(height) / 2) {
115 - radius = Math.floor(Math.abs(height) / 2);
116 - }
117 - if (radius > Math.abs(width) / 2) {
118 - radius = Math.floor(Math.abs(width) / 2);
119 - }
120 -
121 - if (height < 0) {
122 - // Negative values in a standard bar chart
123 - const xTl = x;
124 - const xTr = x + width;
125 - const yTl = y + height;
126 - const yTr = y + height;
127 -
128 - const xBl = x;
129 - const xBr = x + width;
130 - const yBl = y;
131 - const yBr = y;
132 -
133 - // Draw
134 - ctx.moveTo(xBl + radius, yBl);
135 - ctx.lineTo(xBr - radius, yBr);
136 - ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
137 - ctx.lineTo(xTr, yTr + radius);
138 - ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
139 - ctx.lineTo(xTl + radius, yTl);
140 - ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
141 - ctx.lineTo(xBl, yBl - radius);
142 - ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
143 - } else if (width < 0) {
144 - // Negative values in a horizontal bar chart
145 - const xTl = x + width;
146 - const xTr = x;
147 - const yTl = y;
148 - const yTr = y;
149 -
150 - const xBl = x + width;
151 - const xBr = x;
152 - const yBl = y + height;
153 - const yBr = y + height;
154 -
155 - // Draw
156 - ctx.moveTo(xBl + radius, yBl);
157 - ctx.lineTo(xBr - radius, yBr);
158 - ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
159 - ctx.lineTo(xTr, yTr + radius);
160 - ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
161 - ctx.lineTo(xTl + radius, yTl);
162 - ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
163 - ctx.lineTo(xBl, yBl - radius);
164 - ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
165 - } else {
166 - // Positive Value
167 - ctx.moveTo(x + radius, y);
168 - ctx.lineTo(x + width - radius, y);
169 - ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
170 - ctx.lineTo(x + width, y + height - radius);
171 - ctx.quadraticCurveTo(
172 - x + width,
173 - y + height,
174 - x + width - radius,
175 - y + height
176 - );
177 - ctx.lineTo(x + radius, y + height);
178 - ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
179 - ctx.lineTo(x, y + radius);
180 - ctx.quadraticCurveTo(x, y, x + radius, y);
181 - }
182 - }
183 -
184 - ctx.fill();
185 - if (borderWidth) {
186 - ctx.stroke();
187 - }
188 -}
189 -
190 -export default {
191 - draw
192 -};
1 -export default (name = '') =>
2 - name
3 - .replace(/\s+/, ' ')
4 - .split(' ')
5 - .slice(0, 2)
6 - .map(v => v && v[0].toUpperCase())
7 - .join('');
1 -export { default as chartjs } from './chartjs';
2 -export { default as getInitials } from './getInitials';
1 -import React from 'react';
2 -
3 -// Material components
4 -import { SvgIcon } from '@material-ui/core';
5 -
6 -export default function Facebook(props) {
7 - return (
8 - <SvgIcon {...props}>
9 - <path d="M9.53144612,22.005 L9.53144612,13.0552149 L6.44166667,13.0552149 L6.44166667,9.49875 L9.53144612,9.49875 L9.53144612,6.68484375 C9.53144612,5.19972656 9.95946769,4.04680661 10.8155103,3.22608401 C11.6715529,2.4053613 12.808485,1.995 14.2263057,1.995 C15.3766134,1.995 16.3129099,2.04710915 17.0351961,2.15132812 L17.0351961,5.3169726 L15.1090998,5.3169726 C14.3868137,5.3169726 13.8919142,5.47330073 13.6244006,5.78595698 C13.4103902,6.04650407 13.3033846,6.46337874 13.3033846,7.03658198 L13.3033846,9.49875 L16.71418,9.49875 L16.2326559,13.0552149 L13.3033846,13.0552149 L13.3033846,22.005 L9.53144612,22.005 Z" />
10 - </SvgIcon>
11 - );
12 -}
1 -import React from 'react';
2 -
3 -// Material components
4 -import { SvgIcon } from '@material-ui/core';
5 -
6 -export default function Google(props) {
7 - return (
8 - <SvgIcon {...props}>
9 - <path d="M21,12.2177419 C21,13.9112905 20.6311475,15.4233869 19.8934426,16.7540323 C19.1557377,18.0846776 18.1168031,19.1249998 16.7766393,19.875 C15.4364756,20.6250002 13.8934424,21 12.147541,21 C10.4999998,21 8.97540984,20.5947579 7.57377049,19.7842742 C6.17213115,18.9737905 5.05942604,17.8790323 4.23565574,16.5 C3.41188543,15.1209677 3,13.6209679 3,12 C3,10.3790321 3.41188543,8.87903226 4.23565574,7.5 C5.05942604,6.12096774 6.17213115,5.02620949 7.57377049,4.21572581 C8.97540984,3.40524212 10.4999998,3 12.147541,3 C14.5327871,3 16.5737705,3.78629051 18.2704918,5.35887097 L15.7991803,7.71774194 C15.0122953,6.96774175 14.0655738,6.52016129 12.9590164,6.375 C11.9262295,6.22983871 10.9057375,6.375 9.89754098,6.81048387 C8.88934445,7.24596774 8.07786904,7.89919355 7.46311475,8.77016129 C6.79918033,9.71370968 6.46721311,10.7903228 6.46721311,12 C6.46721311,13.0403228 6.72540984,13.9899192 7.24180328,14.8487903 C7.75819672,15.7076615 8.4467215,16.3971776 9.30737705,16.9173387 C10.1680326,17.4374998 11.1147541,17.6975806 12.147541,17.6975806 C13.2540984,17.6975806 14.2254096,17.455645 15.0614754,16.9717742 C15.7254098,16.5846772 16.2786885,16.0645161 16.7213115,15.4112903 C17.0409838,14.8790321 17.2499998,14.3467744 17.3483607,13.8145161 L12.147541,13.8145161 L12.147541,10.6935484 L20.852459,10.6935484 C20.9508199,11.2258066 21,11.7338712 21,12.2177419 Z" />
10 - </SvgIcon>
11 - );
12 -}
1 -export { default as Facebook } from './Facebook';
2 -export { default as Google } from './Google';
1 -import React from 'react';
2 -import ReactDOM from 'react-dom';
3 -
4 -import * as serviceWorker from './serviceWorker';
5 -import App from './App';
6 -
7 -ReactDOM.render(<App />, document.getElementById('root'));
8 -
9 -serviceWorker.unregister();
1 -import React, { useState } from 'react';
2 -import PropTypes from 'prop-types';
3 -import clsx from 'clsx';
4 -import { makeStyles, useTheme } from '@material-ui/styles';
5 -import { useMediaQuery } from '@material-ui/core';
6 -
7 -import { Sidebar, Topbar, Footer } from './components';
8 -
9 -const useStyles = makeStyles(theme => ({
10 - root: {
11 - paddingTop: 56,
12 - height: '100%',
13 - [theme.breakpoints.up('sm')]: {
14 - paddingTop: 64
15 - }
16 - },
17 - shiftContent: {
18 - paddingLeft: 240
19 - },
20 - content: {
21 - height: '100%'
22 - }
23 -}));
24 -
25 -const Main = props => {
26 - const { children } = props;
27 -
28 - const classes = useStyles();
29 - const theme = useTheme();
30 - const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
31 - defaultMatches: true
32 - });
33 -
34 - const [openSidebar, setOpenSidebar] = useState(false);
35 -
36 - const handleSidebarOpen = () => {
37 - setOpenSidebar(true);
38 - };
39 -
40 - const handleSidebarClose = () => {
41 - setOpenSidebar(false);
42 - };
43 -
44 - const shouldOpenSidebar = isDesktop ? true : openSidebar;
45 -
46 - return (
47 - <div
48 - className={clsx({
49 - [classes.root]: true,
50 - [classes.shiftContent]: isDesktop
51 - })}
52 - >
53 - <Topbar onSidebarOpen={handleSidebarOpen} />
54 - <Sidebar
55 - onClose={handleSidebarClose}
56 - open={shouldOpenSidebar}
57 - variant={isDesktop ? 'persistent' : 'temporary'}
58 - />
59 - <main className={classes.content}>
60 - {children}
61 - <Footer />
62 - </main>
63 - </div>
64 - );
65 -};
66 -
67 -Main.propTypes = {
68 - children: PropTypes.node
69 -};
70 -
71 -export default Main;
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import clsx from 'clsx';
4 -import { makeStyles } from '@material-ui/styles';
5 -import { Typography, Link } from '@material-ui/core';
6 -
7 -const useStyles = makeStyles(theme => ({
8 - root: {
9 - padding: theme.spacing(4)
10 - }
11 -}));
12 -
13 -const Footer = props => {
14 - const { className, ...rest } = props;
15 -
16 - const classes = useStyles();
17 -
18 - return (
19 - <div
20 - {...rest}
21 - className={clsx(classes.root, className)}
22 - >
23 - <Typography variant="body1">
24 - &copy;{' '}
25 - <Link
26 - component="a"
27 - href="https://devias.io/"
28 - target="_blank"
29 - >
30 - Devias IO
31 - </Link>
32 - . 2019
33 - </Typography>
34 - <Typography variant="caption">
35 - Created with love for the environment. By designers and developers who
36 - love to work together in offices!
37 - </Typography>
38 - </div>
39 - );
40 -};
41 -
42 -Footer.propTypes = {
43 - className: PropTypes.string
44 -};
45 -
46 -export default Footer;
1 -import React from 'react';
2 -import clsx from 'clsx';
3 -import PropTypes from 'prop-types';
4 -import { makeStyles } from '@material-ui/styles';
5 -import { Divider, Drawer } from '@material-ui/core';
6 -import DashboardIcon from '@material-ui/icons/Dashboard';
7 -import PeopleIcon from '@material-ui/icons/People';
8 -import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';
9 -import TextFieldsIcon from '@material-ui/icons/TextFields';
10 -import ImageIcon from '@material-ui/icons/Image';
11 -import AccountBoxIcon from '@material-ui/icons/AccountBox';
12 -import SettingsIcon from '@material-ui/icons/Settings';
13 -import LockOpenIcon from '@material-ui/icons/LockOpen';
14 -
15 -import { Profile, SidebarNav, UpgradePlan } from './components';
16 -
17 -const useStyles = makeStyles(theme => ({
18 - drawer: {
19 - width: 240,
20 - [theme.breakpoints.up('lg')]: {
21 - marginTop: 64,
22 - height: 'calc(100% - 64px)'
23 - }
24 - },
25 - root: {
26 - backgroundColor: theme.palette.white,
27 - display: 'flex',
28 - flexDirection: 'column',
29 - height: '100%',
30 - padding: theme.spacing(2)
31 - },
32 - divider: {
33 - margin: theme.spacing(2, 0)
34 - },
35 - nav: {
36 - marginBottom: theme.spacing(2)
37 - }
38 -}));
39 -
40 -const Sidebar = props => {
41 - const { open, variant, onClose, className, ...rest } = props;
42 -
43 - const classes = useStyles();
44 -
45 - const pages = [
46 - {
47 - title: '내 드라이브',
48 - href: '/my-drive',
49 - icon: <DashboardIcon />
50 - },
51 - {
52 - title: '공유함',
53 - href: '/share',
54 - icon: <PeopleIcon />
55 - },
56 - {
57 - title: '최근 열어본 파일',
58 - href: '/recent',
59 - icon: <ShoppingBasketIcon />
60 - },
61 - {
62 - title: '휴지통',
63 - href: '/trash',
64 - icon: <LockOpenIcon />
65 - },
66 - {
67 - title: '계정',
68 - href: '/account',
69 - icon: <AccountBoxIcon />
70 - },
71 - {
72 - title: '설정',
73 - href: '/settings',
74 - icon: <SettingsIcon />
75 - }
76 - ];
77 -
78 - return (
79 - <Drawer
80 - anchor="left"
81 - classes={{ paper: classes.drawer }}
82 - onClose={onClose}
83 - open={open}
84 - variant={variant}
85 - >
86 - <div
87 - {...rest}
88 - className={clsx(classes.root, className)}
89 - >
90 - <Profile />
91 - <Divider className={classes.divider} />
92 - <SidebarNav
93 - className={classes.nav}
94 - pages={pages}
95 - />
96 - </div>
97 - </Drawer>
98 - );
99 -};
100 -
101 -Sidebar.propTypes = {
102 - className: PropTypes.string,
103 - onClose: PropTypes.func,
104 - open: PropTypes.bool.isRequired,
105 - variant: PropTypes.string.isRequired
106 -};
107 -
108 -export default Sidebar;
1 -import React from 'react';
2 -import { Link as RouterLink } from 'react-router-dom';
3 -import clsx from 'clsx';
4 -import PropTypes from 'prop-types';
5 -import { makeStyles } from '@material-ui/styles';
6 -import { Avatar, Typography } from '@material-ui/core';
7 -
8 -const useStyles = makeStyles(theme => ({
9 - root: {
10 - display: 'flex',
11 - flexDirection: 'column',
12 - alignItems: 'center',
13 - minHeight: 'fit-content'
14 - },
15 - avatar: {
16 - width: 60,
17 - height: 60
18 - },
19 - name: {
20 - marginTop: theme.spacing(1)
21 - }
22 -}));
23 -
24 -const Profile = props => {
25 - const { className, ...rest } = props;
26 -
27 - const classes = useStyles();
28 -
29 - const user = {
30 - name: '엄준식',
31 - avatar: '/images/avatars/avatar_1.png',
32 - membership: 'Basic Plan'
33 - };
34 -
35 - return (
36 - <div
37 - {...rest}
38 - className={clsx(classes.root, className)}
39 - >
40 - <Avatar
41 - alt="Person"
42 - className={classes.avatar}
43 - component={RouterLink}
44 - src={user.avatar}
45 - to="/settings"
46 - />
47 - <Typography
48 - className={classes.name}
49 - variant="h4"
50 - >
51 - {user.name}
52 - </Typography>
53 - <Typography variant="body2">{user.membership}</Typography>
54 - </div>
55 - );
56 -};
57 -
58 -Profile.propTypes = {
59 - className: PropTypes.string
60 -};
61 -
62 -export default Profile;
1 -/* eslint-disable react/no-multi-comp */
2 -/* eslint-disable react/display-name */
3 -import React, { forwardRef } from 'react';
4 -import { NavLink as RouterLink } from 'react-router-dom';
5 -import clsx from 'clsx';
6 -import PropTypes from 'prop-types';
7 -import { makeStyles } from '@material-ui/styles';
8 -import { List, ListItem, Button, colors } from '@material-ui/core';
9 -
10 -const useStyles = makeStyles(theme => ({
11 - root: {},
12 - item: {
13 - display: 'flex',
14 - paddingTop: 0,
15 - paddingBottom: 0
16 - },
17 - button: {
18 - color: colors.blueGrey[800],
19 - padding: '10px 8px',
20 - justifyContent: 'flex-start',
21 - textTransform: 'none',
22 - letterSpacing: 0,
23 - width: '100%',
24 - fontWeight: theme.typography.fontWeightMedium
25 - },
26 - icon: {
27 - color: theme.palette.icon,
28 - width: 24,
29 - height: 24,
30 - display: 'flex',
31 - alignItems: 'center',
32 - marginRight: theme.spacing(1)
33 - },
34 - active: {
35 - color: theme.palette.primary.main,
36 - fontWeight: theme.typography.fontWeightMedium,
37 - '& $icon': {
38 - color: theme.palette.primary.main
39 - }
40 - }
41 -}));
42 -
43 -const CustomRouterLink = forwardRef((props, ref) => (
44 - <div
45 - ref={ref}
46 - style={{ flexGrow: 1 }}
47 - >
48 - <RouterLink {...props} />
49 - </div>
50 -));
51 -
52 -const SidebarNav = props => {
53 - const { pages, className, ...rest } = props;
54 -
55 - const classes = useStyles();
56 -
57 - return (
58 - <List
59 - {...rest}
60 - className={clsx(classes.root, className)}
61 - >
62 - {pages.map(page => (
63 - <ListItem
64 - className={classes.item}
65 - disableGutters
66 - key={page.title}
67 - >
68 - <Button
69 - activeClassName={classes.active}
70 - className={classes.button}
71 - component={CustomRouterLink}
72 - to={page.href}
73 - >
74 - <div className={classes.icon}>{page.icon}</div>
75 - {page.title}
76 - </Button>
77 - </ListItem>
78 - ))}
79 - </List>
80 - );
81 -};
82 -
83 -SidebarNav.propTypes = {
84 - className: PropTypes.string,
85 - pages: PropTypes.array.isRequired
86 -};
87 -
88 -export default SidebarNav;
1 -import React from 'react';
2 -import clsx from 'clsx';
3 -import PropTypes from 'prop-types';
4 -import { makeStyles } from '@material-ui/styles';
5 -import { Typography, Button, colors } from '@material-ui/core';
6 -
7 -const useStyles = makeStyles(theme => ({
8 - root: {
9 - backgroundColor: colors.grey[50]
10 - },
11 - media: {
12 - paddingTop: theme.spacing(2),
13 - height: 80,
14 - textAlign: 'center',
15 - '& > img': {
16 - height: '100%',
17 - width: 'auto'
18 - }
19 - },
20 - content: {
21 - padding: theme.spacing(1, 2)
22 - },
23 - actions: {
24 - padding: theme.spacing(1, 2),
25 - display: 'flex',
26 - justifyContent: 'center'
27 - }
28 -}));
29 -
30 -const UpgradePlan = props => {
31 - const { className, ...rest } = props;
32 -
33 - const classes = useStyles();
34 -
35 - return (
36 - <div
37 - {...rest}
38 - className={clsx(classes.root, className)}
39 - >
40 - <div className={classes.media}>
41 - <img
42 - alt="Upgrade to PRO"
43 - src="/images/undraw_resume_folder_2_arse.svg"
44 - />
45 - </div>
46 - <div className={classes.content}>
47 - <Typography
48 - align="center"
49 - gutterBottom
50 - variant="h6"
51 - >
52 - Upgrade to PRO
53 - </Typography>
54 - <Typography
55 - align="center"
56 - variant="body2"
57 - >
58 - Upgrade to Devias Kit PRO and get even more components
59 - </Typography>
60 - </div>
61 - <div className={classes.actions}>
62 - <Button
63 - color="primary"
64 - component="a"
65 - href="https://devias.io/products/devias-kit-pro"
66 - variant="contained"
67 - >
68 - Upgrade
69 - </Button>
70 - </div>
71 - </div>
72 - );
73 -};
74 -
75 -UpgradePlan.propTypes = {
76 - className: PropTypes.string
77 -};
78 -
79 -export default UpgradePlan;
1 -export { default as Profile } from './Profile';
2 -export { default as SidebarNav } from './SidebarNav';
3 -export { default as UpgradePlan } from './UpgradePlan';
1 -import React, { useState } from 'react';
2 -import { Link as RouterLink } from 'react-router-dom';
3 -import clsx from 'clsx';
4 -import PropTypes from 'prop-types';
5 -import { makeStyles } from '@material-ui/styles';
6 -import { AppBar, Toolbar, Badge, Hidden, IconButton } from '@material-ui/core';
7 -import MenuIcon from '@material-ui/icons/Menu';
8 -import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
9 -import InputIcon from '@material-ui/icons/Input';
10 -
11 -const useStyles = makeStyles(theme => ({
12 - root: {
13 - boxShadow: 'none'
14 - },
15 - flexGrow: {
16 - flexGrow: 1
17 - },
18 - signOutButton: {
19 - marginLeft: theme.spacing(1)
20 - }
21 -}));
22 -
23 -const Topbar = props => {
24 - const { className, onSidebarOpen, ...rest } = props;
25 -
26 - const classes = useStyles();
27 -
28 - const [notifications] = useState([]);
29 -
30 - return (
31 - <AppBar
32 - {...rest}
33 - className={clsx(classes.root, className)}
34 - >
35 - <Toolbar>
36 - <RouterLink to="/">
37 - <h1>KHU Box</h1>
38 - </RouterLink>
39 - <div className={classes.flexGrow} />
40 - <Hidden mdDown>
41 - <IconButton color="inherit">
42 - <Badge
43 - badgeContent={notifications.length}
44 - color="primary"
45 - variant="dot"
46 - >
47 - <NotificationsIcon />
48 - </Badge>
49 - </IconButton>
50 - <IconButton
51 - className={classes.signOutButton}
52 - color="inherit"
53 - >
54 - <InputIcon />
55 - </IconButton>
56 - </Hidden>
57 - <Hidden lgUp>
58 - <IconButton
59 - color="inherit"
60 - onClick={onSidebarOpen}
61 - >
62 - <MenuIcon />
63 - </IconButton>
64 - </Hidden>
65 - </Toolbar>
66 - </AppBar>
67 - );
68 -};
69 -
70 -Topbar.propTypes = {
71 - className: PropTypes.string,
72 - onSidebarOpen: PropTypes.func
73 -};
74 -
75 -export default Topbar;
1 -export { default as Footer } from './Footer';
2 -export { default as Sidebar } from './Sidebar';
3 -export { default as Topbar } from './Topbar';
1 -export { default } from './Main';
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import { makeStyles } from '@material-ui/styles';
4 -
5 -import { Topbar } from './components';
6 -
7 -const useStyles = makeStyles(() => ({
8 - root: {
9 - paddingTop: 64,
10 - height: '100%'
11 - },
12 - content: {
13 - height: '100%'
14 - }
15 -}));
16 -
17 -const Minimal = props => {
18 - const { children } = props;
19 -
20 - const classes = useStyles();
21 -
22 - return (
23 - <div className={classes.root}>
24 - <Topbar />
25 - <main className={classes.content}>{children}</main>
26 - </div>
27 - );
28 -};
29 -
30 -Minimal.propTypes = {
31 - children: PropTypes.node,
32 - className: PropTypes.string
33 -};
34 -
35 -export default Minimal;
1 -import React from 'react';
2 -import { Link as RouterLink } from 'react-router-dom';
3 -import clsx from 'clsx';
4 -import PropTypes from 'prop-types';
5 -import { makeStyles } from '@material-ui/styles';
6 -import { AppBar, Toolbar } from '@material-ui/core';
7 -
8 -const useStyles = makeStyles(() => ({
9 - root: {
10 - boxShadow: 'none'
11 - }
12 -}));
13 -
14 -const Topbar = props => {
15 - const { className, ...rest } = props;
16 -
17 - const classes = useStyles();
18 -
19 - return (
20 - <AppBar
21 - {...rest}
22 - className={clsx(classes.root, className)}
23 - color="primary"
24 - position="fixed"
25 - >
26 - <Toolbar>
27 - <RouterLink to="/">
28 - <img
29 - alt="Logo"
30 - src="/images/logos/logo--white.svg"
31 - />
32 - </RouterLink>
33 - </Toolbar>
34 - </AppBar>
35 - );
36 -};
37 -
38 -Topbar.propTypes = {
39 - className: PropTypes.string
40 -};
41 -
42 -export default Topbar;
1 -export { default as Topbar } from './Topbar';
1 -export { default } from './Minimal';
1 -export { default as Main } from './Main';
2 -export { default as Minimal } from './Minimal';
1 -[{"id":1,"name":"MattisNibh.tiff","modifiedAt":"2019-12-20","size":334,"share":false,"sharedAt":"2019-11-19","sharedUser":"Vi de Lloyd"},
2 -{"id":2,"name":"UltricesPosuereCubilia.mpeg","modifiedAt":"2019-06-12","size":703,"share":true,"sharedAt":"2019-10-10","sharedUser":"Rogerio Baynon"},
3 -{"id":3,"name":"FuscePosuereFelis.tiff","modifiedAt":"2019-08-09","size":811,"share":true,"sharedAt":"2019-11-18","sharedUser":"Etheline Hynard"},
4 -{"id":4,"name":"HacHabitassePlatea.xls","modifiedAt":"2020-01-23","size":414,"share":false,"sharedAt":"2020-01-08","sharedUser":"Rudd Skellern"},
5 -{"id":5,"name":"Vivamus.xls","modifiedAt":"2020-03-14","size":351,"share":false,"sharedAt":"2019-12-12","sharedUser":"Carmelle Plumridege"},
6 -{"id":6,"name":"BlanditMi.ppt","modifiedAt":"2019-05-09","size":234,"share":false,"sharedAt":"2020-03-12","sharedUser":"Darla Hassey"},
7 -{"id":7,"name":"ErosVestibulumAc.ppt","modifiedAt":"2019-12-18","size":381,"share":true,"sharedAt":"2019-12-17","sharedUser":"Dame Alenikov"},
8 -{"id":8,"name":"AcTellusSemper.ppt","modifiedAt":"2019-05-07","size":706,"share":false,"sharedAt":"2020-02-10","sharedUser":"Jules Gutteridge"},
9 -{"id":9,"name":"SedTinciduntEu.xls","modifiedAt":"2019-07-24","size":746,"share":true,"sharedAt":"2020-04-19","sharedUser":"Peyton Wakeling"},
10 -{"id":10,"name":"Turpis.tiff","modifiedAt":"2019-12-14","size":132,"share":true,"sharedAt":"2019-07-10","sharedUser":"Felice Tethcote"},
11 -{"id":11,"name":"Nascetur.mp3","modifiedAt":"2019-12-28","size":218,"share":true,"sharedAt":"2019-05-19","sharedUser":"Lindie Balmann"},
12 -{"id":12,"name":"Est.ppt","modifiedAt":"2019-07-13","size":467,"share":true,"sharedAt":"2019-08-31","sharedUser":"Nathalia Heinritz"},
13 -{"id":13,"name":"Egestas.txt","modifiedAt":"2020-04-22","size":690,"share":true,"sharedAt":"2020-04-26","sharedUser":"Eloise Proschke"},
14 -{"id":14,"name":"Sed.doc","modifiedAt":"2019-10-09","size":691,"share":false,"sharedAt":"2019-08-27","sharedUser":"Janaye Aikin"},
15 -{"id":15,"name":"InFaucibus.ppt","modifiedAt":"2019-12-10","size":677,"share":false,"sharedAt":"2020-02-09","sharedUser":"Maurizia Swann"},
16 -{"id":16,"name":"EgetTempus.xls","modifiedAt":"2020-04-07","size":542,"share":false,"sharedAt":"2019-11-16","sharedUser":"Terrence Gummow"},
17 -{"id":17,"name":"AcNulla.tiff","modifiedAt":"2019-09-12","size":409,"share":true,"sharedAt":"2019-12-03","sharedUser":"Paulie Strawbridge"},
18 -{"id":18,"name":"LiberoNullam.mov","modifiedAt":"2019-11-29","size":700,"share":true,"sharedAt":"2019-07-07","sharedUser":"Peggi Guildford"},
19 -{"id":19,"name":"DuisBibendum.xls","modifiedAt":"2020-04-19","size":822,"share":true,"sharedAt":"2019-06-17","sharedUser":"Baron Colles"},
20 -{"id":20,"name":"AliquetPulvinar.ppt","modifiedAt":"2019-09-11","size":799,"share":true,"sharedAt":"2020-02-13","sharedUser":"Roxanna Elcombe"},
21 -{"id":21,"name":"Congue.ppt","modifiedAt":"2020-03-28","size":671,"share":true,"sharedAt":"2019-05-11","sharedUser":"Gleda Rabjohn"},
22 -{"id":22,"name":"IdNulla.xls","modifiedAt":"2019-06-05","size":810,"share":true,"sharedAt":"2019-08-18","sharedUser":"Constantia Windrass"},
23 -{"id":23,"name":"MaurisLaoreet.mov","modifiedAt":"2019-07-12","size":651,"share":false,"sharedAt":"2019-11-17","sharedUser":"Lynda Paoletto"},
24 -{"id":24,"name":"EuSapien.mp3","modifiedAt":"2019-08-19","size":50,"share":true,"sharedAt":"2019-10-23","sharedUser":"Bern Rizzello"},
25 -{"id":25,"name":"Eu.jpeg","modifiedAt":"2020-01-08","size":635,"share":true,"sharedAt":"2019-12-01","sharedUser":"Norah Dumini"},
26 -{"id":26,"name":"Cras.ppt","modifiedAt":"2020-04-28","size":37,"share":true,"sharedAt":"2019-11-26","sharedUser":"Kelsy Stebbings"},
27 -{"id":27,"name":"SapienUt.xls","modifiedAt":"2020-02-10","size":901,"share":true,"sharedAt":"2019-09-13","sharedUser":"Aveline Kemmis"},
28 -{"id":28,"name":"EgetTempus.ppt","modifiedAt":"2020-03-05","size":652,"share":false,"sharedAt":"2020-04-05","sharedUser":"Steffane Hussy"},
29 -{"id":29,"name":"ConvallisTortor.mpeg","modifiedAt":"2019-10-05","size":306,"share":false,"sharedAt":"2020-01-20","sharedUser":"Coral Lisciandro"},
30 -{"id":30,"name":"Sed.pdf","modifiedAt":"2020-03-22","size":965,"share":false,"sharedAt":"2020-02-25","sharedUser":"Dawna Ruprechter"},
31 -{"id":31,"name":"MollisMolestieLorem.ppt","modifiedAt":"2019-12-12","size":415,"share":true,"sharedAt":"2020-03-06","sharedUser":"Myra Fifield"},
32 -{"id":32,"name":"APedePosuere.tiff","modifiedAt":"2019-12-01","size":132,"share":false,"sharedAt":"2019-09-03","sharedUser":"Wolfy Boniface"},
33 -{"id":33,"name":"Proin.jpeg","modifiedAt":"2020-04-21","size":315,"share":false,"sharedAt":"2019-10-13","sharedUser":"Ozzie Orpin"},
34 -{"id":34,"name":"HacHabitassePlatea.mp3","modifiedAt":"2020-03-09","size":761,"share":false,"sharedAt":"2019-10-09","sharedUser":"Theadora Vaughan"},
35 -{"id":35,"name":"Vulputate.doc","modifiedAt":"2019-11-22","size":761,"share":false,"sharedAt":"2019-05-18","sharedUser":"Reina Copley"},
36 -{"id":36,"name":"SitAmet.tiff","modifiedAt":"2019-07-11","size":284,"share":true,"sharedAt":"2019-10-06","sharedUser":"Rhiamon Devon"},
37 -{"id":37,"name":"ConvallisNullaNeque.tiff","modifiedAt":"2019-12-23","size":201,"share":true,"sharedAt":"2019-05-19","sharedUser":"Dur Pocke"},
38 -{"id":38,"name":"RhoncusAliquet.xls","modifiedAt":"2019-10-11","size":635,"share":true,"sharedAt":"2019-07-31","sharedUser":"Dori Grellis"},
39 -{"id":39,"name":"TinciduntEuFelis.doc","modifiedAt":"2019-06-05","size":118,"share":true,"sharedAt":"2019-09-17","sharedUser":"Wylie Warbrick"},
40 -{"id":40,"name":"Erat.mp3","modifiedAt":"2020-02-13","size":285,"share":false,"sharedAt":"2019-10-06","sharedUser":"Chelsey Marzellano"},
41 -{"id":41,"name":"VestibulumSitAmet.jpeg","modifiedAt":"2020-04-23","size":262,"share":false,"sharedAt":"2019-11-03","sharedUser":"Marni Harpur"},
42 -{"id":42,"name":"PorttitorLacusAt.xls","modifiedAt":"2019-11-06","size":301,"share":false,"sharedAt":"2019-08-23","sharedUser":"Gerri Jest"},
43 -{"id":43,"name":"EratNulla.jpeg","modifiedAt":"2019-10-11","size":788,"share":true,"sharedAt":"2020-01-20","sharedUser":"Ginni Hillatt"},
44 -{"id":44,"name":"CubiliaCuraeMauris.ppt","modifiedAt":"2019-11-04","size":416,"share":true,"sharedAt":"2019-10-09","sharedUser":"Eolande Garstan"},
45 -{"id":45,"name":"QuisJusto.avi","modifiedAt":"2020-03-03","size":159,"share":false,"sharedAt":"2020-02-13","sharedUser":"Karl Lyness"},
46 -{"id":46,"name":"ElementumInHac.avi","modifiedAt":"2019-09-04","size":413,"share":true,"sharedAt":"2019-06-17","sharedUser":"Hugo Challicum"},
47 -{"id":47,"name":"Adipiscing.tiff","modifiedAt":"2020-01-16","size":510,"share":true,"sharedAt":"2019-08-30","sharedUser":"Leela Larmouth"},
48 -{"id":48,"name":"Sed.gif","modifiedAt":"2020-02-17","size":778,"share":true,"sharedAt":"2019-12-30","sharedUser":"Koren Timmermann"},
49 -{"id":49,"name":"QuisqueArcuLibero.xls","modifiedAt":"2020-02-23","size":320,"share":false,"sharedAt":"2020-01-15","sharedUser":"Osborne Sprull"},
50 -{"id":50,"name":"Ac.ppt","modifiedAt":"2019-07-01","size":644,"share":true,"sharedAt":"2019-10-15","sharedUser":"Brandy Antal"}]
1 -// This optional code is used to register a service worker.
2 -// register() is not called by default.
3 -
4 -// This lets the app load faster on subsequent visits in production, and gives
5 -// it offline capabilities. However, it also means that developers (and users)
6 -// will only see deployed updates on subsequent visits to a page, after all the
7 -// existing tabs open on the page have been closed, since previously cached
8 -// resources are updated in the background.
9 -
10 -// To learn more about the benefits of this model and instructions on how to
11 -// opt-in, read http://bit.ly/CRA-PWA
12 -
13 -const isLocalhost = Boolean(
14 - window.location.hostname === 'localhost' ||
15 - // [::1] is the IPv6 localhost address.
16 - window.location.hostname === '[::1]' ||
17 - // 127.0.0.1/8 is considered localhost for IPv4.
18 - window.location.hostname.match(
19 - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 - )
21 -);
22 -
23 -export function register(config) {
24 - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 - // The URL constructor is available in all browsers that support SW.
26 - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 - if (publicUrl.origin !== window.location.origin) {
28 - // Our service worker won't work if PUBLIC_URL is on a different origin
29 - // from what our page is served on. This might happen if a CDN is used to
30 - // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 - return;
32 - }
33 -
34 - window.addEventListener('load', () => {
35 - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 -
37 - if (isLocalhost) {
38 - // This is running on localhost. Let's check if a service worker still exists or not.
39 - checkValidServiceWorker(swUrl, config);
40 -
41 - // Add some additional logging to localhost, pointing developers to the
42 - // service worker/PWA documentation.
43 - navigator.serviceWorker.ready.then(() => {
44 - console.log(
45 - 'This web app is being served cache-first by a service ' +
46 - 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 - );
48 - });
49 - } else {
50 - // Is not localhost. Just register service worker
51 - registerValidSW(swUrl, config);
52 - }
53 - });
54 - }
55 -}
56 -
57 -function registerValidSW(swUrl, config) {
58 - navigator.serviceWorker
59 - .register(swUrl)
60 - .then(registration => {
61 - registration.onupdatefound = () => {
62 - const installingWorker = registration.installing;
63 - if (installingWorker == null) {
64 - return;
65 - }
66 - installingWorker.onstatechange = () => {
67 - if (installingWorker.state === 'installed') {
68 - if (navigator.serviceWorker.controller) {
69 - // At this point, the updated precached content has been fetched,
70 - // but the previous service worker will still serve the older
71 - // content until all client tabs are closed.
72 - console.log(
73 - 'New content is available and will be used when all ' +
74 - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 - );
76 -
77 - // Execute callback
78 - if (config && config.onUpdate) {
79 - config.onUpdate(registration);
80 - }
81 - } else {
82 - // At this point, everything has been precached.
83 - // It's the perfect time to display a
84 - // "Content is cached for offline use." message.
85 - console.log('Content is cached for offline use.');
86 -
87 - // Execute callback
88 - if (config && config.onSuccess) {
89 - config.onSuccess(registration);
90 - }
91 - }
92 - }
93 - };
94 - };
95 - })
96 - .catch(error => {
97 - console.error('Error during service worker registration:', error);
98 - });
99 -}
100 -
101 -function checkValidServiceWorker(swUrl, config) {
102 - // Check if the service worker can be found. If it can't reload the page.
103 - fetch(swUrl)
104 - .then(response => {
105 - // Ensure service worker exists, and that we really are getting a JS file.
106 - const contentType = response.headers.get('content-type');
107 - if (
108 - response.status === 404 ||
109 - (contentType != null && contentType.indexOf('javascript') === -1)
110 - ) {
111 - // No service worker found. Probably a different app. Reload the page.
112 - navigator.serviceWorker.ready.then(registration => {
113 - registration.unregister().then(() => {
114 - window.location.reload();
115 - });
116 - });
117 - } else {
118 - // Service worker found. Proceed as normal.
119 - registerValidSW(swUrl, config);
120 - }
121 - })
122 - .catch(() => {
123 - console.log(
124 - 'No internet connection found. App is running in offline mode.'
125 - );
126 - });
127 -}
128 -
129 -export function unregister() {
130 - if ('serviceWorker' in navigator) {
131 - navigator.serviceWorker.ready.then(registration => {
132 - registration.unregister();
133 - });
134 - }
135 -}
1 -import { createMuiTheme } from '@material-ui/core';
2 -
3 -import palette from './palette';
4 -import typography from './typography';
5 -import overrides from './overrides';
6 -
7 -const theme = createMuiTheme({
8 - palette,
9 - typography,
10 - overrides,
11 - zIndex: {
12 - appBar: 1200,
13 - drawer: 1100
14 - }
15 -});
16 -
17 -export default theme;
1 -export default {
2 - contained: {
3 - boxShadow:
4 - '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)',
5 - backgroundColor: '#FFFFFF'
6 - }
7 -};
1 -import palette from '../palette';
2 -
3 -export default {
4 - root: {
5 - color: palette.icon,
6 - '&:hover': {
7 - backgroundColor: 'rgba(0, 0, 0, 0.03)'
8 - }
9 - }
10 -};
1 -export default {
2 - elevation1: {
3 - boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)'
4 - }
5 -};
1 -import palette from '../palette';
2 -import typography from '../typography';
3 -
4 -export default {
5 - root: {
6 - ...typography.body1,
7 - borderBottom: `1px solid ${palette.divider}`
8 - }
9 -};
1 -import { colors } from '@material-ui/core';
2 -
3 -export default {
4 - root: {
5 - backgroundColor: colors.grey[50]
6 - }
7 -};
1 -import palette from '../palette';
2 -
3 -export default {
4 - root: {
5 - '&$selected': {
6 - backgroundColor: palette.background.default
7 - },
8 - '&$hover': {
9 - '&:hover': {
10 - backgroundColor: palette.background.default
11 - }
12 - }
13 - }
14 -};
1 -export default {
2 - gutterBottom: {
3 - marginBottom: 8
4 - }
5 -};
1 -import MuiButton from './MuiButton';
2 -import MuiIconButton from './MuiIconButton';
3 -import MuiPaper from './MuiPaper';
4 -import MuiTableCell from './MuiTableCell';
5 -import MuiTableHead from './MuiTableHead';
6 -import MuiTypography from './MuiTypography';
7 -
8 -export default {
9 - MuiButton,
10 - MuiIconButton,
11 - MuiPaper,
12 - MuiTableCell,
13 - MuiTableHead,
14 - MuiTypography
15 -};
1 -import { colors } from '@material-ui/core';
2 -
3 -const white = '#FFFFFF';
4 -const black = '#000000';
5 -
6 -export default {
7 - black,
8 - white,
9 - primary: {
10 - contrastText: white,
11 - dark: colors.indigo[900],
12 - main: colors.indigo[500],
13 - light: colors.indigo[100]
14 - },
15 - secondary: {
16 - contrastText: white,
17 - dark: colors.blue[900],
18 - main: colors.blue['A400'],
19 - light: colors.blue['A400']
20 - },
21 - success: {
22 - contrastText: white,
23 - dark: colors.green[900],
24 - main: colors.green[600],
25 - light: colors.green[400]
26 - },
27 - info: {
28 - contrastText: white,
29 - dark: colors.blue[900],
30 - main: colors.blue[600],
31 - light: colors.blue[400]
32 - },
33 - warning: {
34 - contrastText: white,
35 - dark: colors.orange[900],
36 - main: colors.orange[600],
37 - light: colors.orange[400]
38 - },
39 - error: {
40 - contrastText: white,
41 - dark: colors.red[900],
42 - main: colors.red[600],
43 - light: colors.red[400]
44 - },
45 - text: {
46 - primary: colors.blueGrey[900],
47 - secondary: colors.blueGrey[600],
48 - link: colors.blue[600]
49 - },
50 - background: {
51 - default: '#F4F6F8',
52 - paper: white
53 - },
54 - icon: colors.blueGrey[600],
55 - divider: colors.grey[200]
56 -};
1 -import palette from './palette';
2 -
3 -export default {
4 - h1: {
5 - color: palette.text.primary,
6 - fontWeight: 500,
7 - fontSize: '35px',
8 - letterSpacing: '-0.24px',
9 - lineHeight: '40px'
10 - },
11 - h2: {
12 - color: palette.text.primary,
13 - fontWeight: 500,
14 - fontSize: '29px',
15 - letterSpacing: '-0.24px',
16 - lineHeight: '32px'
17 - },
18 - h3: {
19 - color: palette.text.primary,
20 - fontWeight: 500,
21 - fontSize: '24px',
22 - letterSpacing: '-0.06px',
23 - lineHeight: '28px'
24 - },
25 - h4: {
26 - color: palette.text.primary,
27 - fontWeight: 500,
28 - fontSize: '20px',
29 - letterSpacing: '-0.06px',
30 - lineHeight: '24px'
31 - },
32 - h5: {
33 - color: palette.text.primary,
34 - fontWeight: 500,
35 - fontSize: '16px',
36 - letterSpacing: '-0.05px',
37 - lineHeight: '20px'
38 - },
39 - h6: {
40 - color: palette.text.primary,
41 - fontWeight: 500,
42 - fontSize: '14px',
43 - letterSpacing: '-0.05px',
44 - lineHeight: '20px'
45 - },
46 - subtitle1: {
47 - color: palette.text.primary,
48 - fontSize: '16px',
49 - letterSpacing: '-0.05px',
50 - lineHeight: '25px'
51 - },
52 - subtitle2: {
53 - color: palette.text.secondary,
54 - fontWeight: 400,
55 - fontSize: '14px',
56 - letterSpacing: '-0.05px',
57 - lineHeight: '21px'
58 - },
59 - body1: {
60 - color: palette.text.primary,
61 - fontSize: '14px',
62 - letterSpacing: '-0.05px',
63 - lineHeight: '21px'
64 - },
65 - body2: {
66 - color: palette.text.secondary,
67 - fontSize: '12px',
68 - letterSpacing: '-0.04px',
69 - lineHeight: '18px'
70 - },
71 - button: {
72 - color: palette.text.primary,
73 - fontSize: '14px'
74 - },
75 - caption: {
76 - color: palette.text.secondary,
77 - fontSize: '11px',
78 - letterSpacing: '0.33px',
79 - lineHeight: '13px'
80 - },
81 - overline: {
82 - color: palette.text.secondary,
83 - fontSize: '11px',
84 - fontWeight: 500,
85 - letterSpacing: '0.33px',
86 - lineHeight: '13px',
87 - textTransform: 'uppercase'
88 - }
89 -};
1 -import React from 'react';
2 -import { makeStyles } from '@material-ui/styles';
3 -import { Grid } from '@material-ui/core';
4 -
5 -import { AccountProfile, AccountDetails } from './components';
6 -
7 -const useStyles = makeStyles(theme => ({
8 - root: {
9 - padding: theme.spacing(4)
10 - }
11 -}));
12 -
13 -const Account = () => {
14 - const classes = useStyles();
15 -
16 - return (
17 - <div className={classes.root}>
18 - <Grid
19 - container
20 - spacing={4}
21 - >
22 - <Grid
23 - item
24 - lg={4}
25 - md={6}
26 - xl={4}
27 - xs={12}
28 - >
29 - <AccountProfile />
30 - </Grid>
31 - <Grid
32 - item
33 - lg={8}
34 - md={6}
35 - xl={8}
36 - xs={12}
37 - >
38 - <AccountDetails />
39 - </Grid>
40 - </Grid>
41 - </div>
42 - );
43 -};
44 -
45 -export default Account;
1 -import React, { useState } from 'react';
2 -import clsx from 'clsx';
3 -import PropTypes from 'prop-types';
4 -import { makeStyles } from '@material-ui/styles';
5 -import {
6 - Card,
7 - CardHeader,
8 - CardContent,
9 - CardActions,
10 - Divider,
11 - Grid,
12 - Button,
13 - TextField
14 -} from '@material-ui/core';
15 -
16 -const useStyles = makeStyles(() => ({
17 - root: {}
18 -}));
19 -
20 -const AccountDetails = props => {
21 - const { className, ...rest } = props;
22 -
23 - const classes = useStyles();
24 -
25 - const [values, setValues] = useState({
26 - firstName: 'Shen',
27 - lastName: 'Zhi',
28 - email: 'shen.zhi@devias.io',
29 - phone: '',
30 - state: 'Alabama',
31 - country: 'USA'
32 - });
33 -
34 - const handleChange = event => {
35 - setValues({
36 - ...values,
37 - [event.target.name]: event.target.value
38 - });
39 - };
40 -
41 - const states = [
42 - {
43 - value: 'alabama',
44 - label: 'Alabama'
45 - },
46 - {
47 - value: 'new-york',
48 - label: 'New York'
49 - },
50 - {
51 - value: 'san-francisco',
52 - label: 'San Francisco'
53 - }
54 - ];
55 -
56 - return (
57 - <Card
58 - {...rest}
59 - className={clsx(classes.root, className)}
60 - >
61 - <form
62 - autoComplete="off"
63 - noValidate
64 - >
65 - <CardHeader
66 - subheader="The information can be edited"
67 - title="Profile"
68 - />
69 - <Divider />
70 - <CardContent>
71 - <Grid
72 - container
73 - spacing={3}
74 - >
75 - <Grid
76 - item
77 - md={6}
78 - xs={12}
79 - >
80 - <TextField
81 - fullWidth
82 - helperText="Please specify the first name"
83 - label="First name"
84 - margin="dense"
85 - name="firstName"
86 - onChange={handleChange}
87 - required
88 - value={values.firstName}
89 - variant="outlined"
90 - />
91 - </Grid>
92 - <Grid
93 - item
94 - md={6}
95 - xs={12}
96 - >
97 - <TextField
98 - fullWidth
99 - label="Last name"
100 - margin="dense"
101 - name="lastName"
102 - onChange={handleChange}
103 - required
104 - value={values.lastName}
105 - variant="outlined"
106 - />
107 - </Grid>
108 - <Grid
109 - item
110 - md={6}
111 - xs={12}
112 - >
113 - <TextField
114 - fullWidth
115 - label="Email Address"
116 - margin="dense"
117 - name="email"
118 - onChange={handleChange}
119 - required
120 - value={values.email}
121 - variant="outlined"
122 - />
123 - </Grid>
124 - <Grid
125 - item
126 - md={6}
127 - xs={12}
128 - >
129 - <TextField
130 - fullWidth
131 - label="Phone Number"
132 - margin="dense"
133 - name="phone"
134 - onChange={handleChange}
135 - type="number"
136 - value={values.phone}
137 - variant="outlined"
138 - />
139 - </Grid>
140 - <Grid
141 - item
142 - md={6}
143 - xs={12}
144 - >
145 - <TextField
146 - fullWidth
147 - label="Select State"
148 - margin="dense"
149 - name="state"
150 - onChange={handleChange}
151 - required
152 - select
153 - // eslint-disable-next-line react/jsx-sort-props
154 - SelectProps={{ native: true }}
155 - value={values.state}
156 - variant="outlined"
157 - >
158 - {states.map(option => (
159 - <option
160 - key={option.value}
161 - value={option.value}
162 - >
163 - {option.label}
164 - </option>
165 - ))}
166 - </TextField>
167 - </Grid>
168 - <Grid
169 - item
170 - md={6}
171 - xs={12}
172 - >
173 - <TextField
174 - fullWidth
175 - label="Country"
176 - margin="dense"
177 - name="country"
178 - onChange={handleChange}
179 - required
180 - value={values.country}
181 - variant="outlined"
182 - />
183 - </Grid>
184 - </Grid>
185 - </CardContent>
186 - <Divider />
187 - <CardActions>
188 - <Button
189 - color="primary"
190 - variant="contained"
191 - >
192 - Save details
193 - </Button>
194 - </CardActions>
195 - </form>
196 - </Card>
197 - );
198 -};
199 -
200 -AccountDetails.propTypes = {
201 - className: PropTypes.string
202 -};
203 -
204 -export default AccountDetails;
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import clsx from 'clsx';
4 -import moment from 'moment';
5 -import { makeStyles } from '@material-ui/styles';
6 -import {
7 - Card,
8 - CardActions,
9 - CardContent,
10 - Avatar,
11 - Typography,
12 - Divider,
13 - Button,
14 - LinearProgress
15 -} from '@material-ui/core';
16 -
17 -const useStyles = makeStyles(theme => ({
18 - root: {},
19 - details: {
20 - display: 'flex'
21 - },
22 - avatar: {
23 - marginLeft: 'auto',
24 - height: 110,
25 - width: 100,
26 - flexShrink: 0,
27 - flexGrow: 0
28 - },
29 - progress: {
30 - marginTop: theme.spacing(2)
31 - },
32 - uploadButton: {
33 - marginRight: theme.spacing(2)
34 - }
35 -}));
36 -
37 -const AccountProfile = props => {
38 - const { className, ...rest } = props;
39 -
40 - const classes = useStyles();
41 -
42 - const user = {
43 - name: '엄준식',
44 - membership: 'Basic',
45 - avatar: '/images/avatars/avatar_1.png'
46 - };
47 -
48 - return (
49 - <Card
50 - {...rest}
51 - className={clsx(classes.root, className)}
52 - >
53 - <CardContent>
54 - <div className={classes.details}>
55 - <div>
56 - <Typography
57 - gutterBottom
58 - variant="h2"
59 - >
60 - {user.name}
61 - </Typography>
62 - <Typography
63 - color="textSecondary"
64 - variant="body1"
65 - >
66 - {user.membership + " Plan"}
67 - </Typography>
68 - </div>
69 - <Avatar
70 - className={classes.avatar}
71 - src={user.avatar}
72 - />
73 - </div>
74 - <div className={classes.progress}>
75 - <Typography variant="body1">저장용량: 70% (7GB/10GB)</Typography>
76 - <LinearProgress
77 - value={70}
78 - variant="determinate"
79 - />
80 - </div>
81 - </CardContent>
82 - <Divider />
83 - <CardActions>
84 - <Button
85 - className={classes.uploadButton}
86 - color="primary"
87 - variant="text"
88 - >
89 - Upload picture
90 - </Button>
91 - <Button variant="text">Remove picture</Button>
92 - </CardActions>
93 - </Card>
94 - );
95 -};
96 -
97 -AccountProfile.propTypes = {
98 - className: PropTypes.string
99 -};
100 -
101 -export default AccountProfile;
1 -export { default as AccountDetails } from './AccountDetails';
2 -export { default as AccountProfile } from './AccountProfile';
1 -export { default } from './Account';
1 -import React from 'react';
2 -import { makeStyles } from '@material-ui/styles';
3 -import { Grid } from '@material-ui/core';
4 -
5 -import {
6 - Budget,
7 - TotalUsers,
8 - TasksProgress,
9 - TotalProfit,
10 - LatestSales,
11 - UsersByDevice,
12 - LatestProducts,
13 - LatestOrders
14 -} from './components';
15 -
16 -const useStyles = makeStyles(theme => ({
17 - root: {
18 - padding: theme.spacing(4)
19 - }
20 -}));
21 -
22 -const Dashboard = () => {
23 - const classes = useStyles();
24 -
25 - return (
26 - <div className={classes.root}>
27 - <Grid
28 - container
29 - spacing={4}
30 - >
31 - <Grid
32 - item
33 - lg={3}
34 - sm={6}
35 - xl={3}
36 - xs={12}
37 - >
38 - <Budget />
39 - </Grid>
40 - <Grid
41 - item
42 - lg={3}
43 - sm={6}
44 - xl={3}
45 - xs={12}
46 - >
47 - <TotalUsers />
48 - </Grid>
49 - <Grid
50 - item
51 - lg={3}
52 - sm={6}
53 - xl={3}
54 - xs={12}
55 - >
56 - <TasksProgress />
57 - </Grid>
58 - <Grid
59 - item
60 - lg={3}
61 - sm={6}
62 - xl={3}
63 - xs={12}
64 - >
65 - <TotalProfit />
66 - </Grid>
67 - <Grid
68 - item
69 - lg={8}
70 - md={12}
71 - xl={9}
72 - xs={12}
73 - >
74 - <LatestSales />
75 - </Grid>
76 - <Grid
77 - item
78 - lg={4}
79 - md={6}
80 - xl={3}
81 - xs={12}
82 - >
83 - <UsersByDevice />
84 - </Grid>
85 - <Grid
86 - item
87 - lg={4}
88 - md={6}
89 - xl={3}
90 - xs={12}
91 - >
92 - <LatestProducts />
93 - </Grid>
94 - <Grid
95 - item
96 - lg={8}
97 - md={12}
98 - xl={9}
99 - xs={12}
100 - >
101 - <LatestOrders />
102 - </Grid>
103 - </Grid>
104 - </div>
105 - );
106 -};
107 -
108 -export default Dashboard;
1 -import React from 'react';
2 -import clsx from 'clsx';
3 -import PropTypes from 'prop-types';
4 -import { makeStyles } from '@material-ui/styles';
5 -import { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';
6 -import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
7 -import MoneyIcon from '@material-ui/icons/Money';
8 -
9 -const useStyles = makeStyles(theme => ({
10 - root: {
11 - height: '100%'
12 - },
13 - content: {
14 - alignItems: 'center',
15 - display: 'flex'
16 - },
17 - title: {
18 - fontWeight: 700
19 - },
20 - avatar: {
21 - backgroundColor: theme.palette.error.main,
22 - height: 56,
23 - width: 56
24 - },
25 - icon: {
26 - height: 32,
27 - width: 32
28 - },
29 - difference: {
30 - marginTop: theme.spacing(2),
31 - display: 'flex',
32 - alignItems: 'center'
33 - },
34 - differenceIcon: {
35 - color: theme.palette.error.dark
36 - },
37 - differenceValue: {
38 - color: theme.palette.error.dark,
39 - marginRight: theme.spacing(1)
40 - }
41 -}));
42 -
43 -const Budget = props => {
44 - const { className, ...rest } = props;
45 -
46 - const classes = useStyles();
47 -
48 - return (
49 - <Card
50 - {...rest}
51 - className={clsx(classes.root, className)}
52 - >
53 - <CardContent>
54 - <Grid
55 - container
56 - justify="space-between"
57 - >
58 - <Grid item>
59 - <Typography
60 - className={classes.title}
61 - color="textSecondary"
62 - gutterBottom
63 - variant="body2"
64 - >
65 - BUDGET
66 - </Typography>
67 - <Typography variant="h3">$24,000</Typography>
68 - </Grid>
69 - <Grid item>
70 - <Avatar className={classes.avatar}>
71 - <MoneyIcon className={classes.icon} />
72 - </Avatar>
73 - </Grid>
74 - </Grid>
75 - <div className={classes.difference}>
76 - <ArrowDownwardIcon className={classes.differenceIcon} />
77 - <Typography
78 - className={classes.differenceValue}
79 - variant="body2"
80 - >
81 - 12%
82 - </Typography>
83 - <Typography
84 - className={classes.caption}
85 - variant="caption"
86 - >
87 - Since last month
88 - </Typography>
89 - </div>
90 - </CardContent>
91 - </Card>
92 - );
93 -};
94 -
95 -Budget.propTypes = {
96 - className: PropTypes.string
97 -};
98 -
99 -export default Budget;
1 -import React, { useState } from 'react';
2 -import clsx from 'clsx';
3 -import moment from 'moment';
4 -import PerfectScrollbar from 'react-perfect-scrollbar';
5 -import PropTypes from 'prop-types';
6 -import { makeStyles } from '@material-ui/styles';
7 -import {
8 - Card,
9 - CardActions,
10 - CardHeader,
11 - CardContent,
12 - Button,
13 - Divider,
14 - Table,
15 - TableBody,
16 - TableCell,
17 - TableHead,
18 - TableRow,
19 - Tooltip,
20 - TableSortLabel
21 -} from '@material-ui/core';
22 -import ArrowRightIcon from '@material-ui/icons/ArrowRight';
23 -
24 -import mockData from './data';
25 -import { StatusBullet } from 'components';
26 -
27 -const useStyles = makeStyles(theme => ({
28 - root: {},
29 - content: {
30 - padding: 0
31 - },
32 - inner: {
33 - minWidth: 800
34 - },
35 - statusContainer: {
36 - display: 'flex',
37 - alignItems: 'center'
38 - },
39 - status: {
40 - marginRight: theme.spacing(1)
41 - },
42 - actions: {
43 - justifyContent: 'flex-end'
44 - }
45 -}));
46 -
47 -const statusColors = {
48 - delivered: 'success',
49 - pending: 'info',
50 - refunded: 'danger'
51 -};
52 -
53 -const LatestOrders = props => {
54 - const { className, ...rest } = props;
55 -
56 - const classes = useStyles();
57 -
58 - const [orders] = useState(mockData);
59 -
60 - return (
61 - <Card
62 - {...rest}
63 - className={clsx(classes.root, className)}
64 - >
65 - <CardHeader
66 - action={
67 - <Button
68 - color="primary"
69 - size="small"
70 - variant="outlined"
71 - >
72 - New entry
73 - </Button>
74 - }
75 - title="Latest Orders"
76 - />
77 - <Divider />
78 - <CardContent className={classes.content}>
79 - <PerfectScrollbar>
80 - <div className={classes.inner}>
81 - <Table>
82 - <TableHead>
83 - <TableRow>
84 - <TableCell>Order Ref</TableCell>
85 - <TableCell>Customer</TableCell>
86 - <TableCell sortDirection="desc">
87 - <Tooltip
88 - enterDelay={300}
89 - title="Sort"
90 - >
91 - <TableSortLabel
92 - active
93 - direction="desc"
94 - >
95 - Date
96 - </TableSortLabel>
97 - </Tooltip>
98 - </TableCell>
99 - <TableCell>Status</TableCell>
100 - </TableRow>
101 - </TableHead>
102 - <TableBody>
103 - {orders.map(order => (
104 - <TableRow
105 - hover
106 - key={order.id}
107 - >
108 - <TableCell>{order.ref}</TableCell>
109 - <TableCell>{order.customer.name}</TableCell>
110 - <TableCell>
111 - {moment(order.createdAt).format('DD/MM/YYYY')}
112 - </TableCell>
113 - <TableCell>
114 - <div className={classes.statusContainer}>
115 - <StatusBullet
116 - className={classes.status}
117 - color={statusColors[order.status]}
118 - size="sm"
119 - />
120 - {order.status}
121 - </div>
122 - </TableCell>
123 - </TableRow>
124 - ))}
125 - </TableBody>
126 - </Table>
127 - </div>
128 - </PerfectScrollbar>
129 - </CardContent>
130 - <Divider />
131 - <CardActions className={classes.actions}>
132 - <Button
133 - color="primary"
134 - size="small"
135 - variant="text"
136 - >
137 - View all <ArrowRightIcon />
138 - </Button>
139 - </CardActions>
140 - </Card>
141 - );
142 -};
143 -
144 -LatestOrders.propTypes = {
145 - className: PropTypes.string
146 -};
147 -
148 -export default LatestOrders;
1 -import uuid from 'uuid/v1';
2 -
3 -export default [
4 - {
5 - id: uuid(),
6 - ref: 'CDD1049',
7 - amount: 30.5,
8 - customer: {
9 - name: 'Ekaterina Tankova'
10 - },
11 - createdAt: 1555016400000,
12 - status: 'pending'
13 - },
14 - {
15 - id: uuid(),
16 - ref: 'CDD1048',
17 - amount: 25.1,
18 - customer: {
19 - name: 'Cao Yu'
20 - },
21 - createdAt: 1555016400000,
22 - status: 'delivered'
23 - },
24 - {
25 - id: uuid(),
26 - ref: 'CDD1047',
27 - amount: 10.99,
28 - customer: {
29 - name: 'Alexa Richardson'
30 - },
31 - createdAt: 1554930000000,
32 - status: 'refunded'
33 - },
34 - {
35 - id: uuid(),
36 - ref: 'CDD1046',
37 - amount: 96.43,
38 - customer: {
39 - name: 'Anje Keizer'
40 - },
41 - createdAt: 1554757200000,
42 - status: 'pending'
43 - },
44 - {
45 - id: uuid(),
46 - ref: 'CDD1045',
47 - amount: 32.54,
48 - customer: {
49 - name: 'Clarke Gillebert'
50 - },
51 - createdAt: 1554670800000,
52 - status: 'delivered'
53 - },
54 - {
55 - id: uuid(),
56 - ref: 'CDD1044',
57 - amount: 16.76,
58 - customer: {
59 - name: 'Adam Denisov'
60 - },
61 - createdAt: 1554670800000,
62 - status: 'delivered'
63 - }
64 -];
1 -import React, { useState } from 'react';
2 -import clsx from 'clsx';
3 -import PropTypes from 'prop-types';
4 -import { makeStyles } from '@material-ui/styles';
5 -import {
6 - Card,
7 - CardHeader,
8 - CardContent,
9 - CardActions,
10 - Button,
11 - Divider,
12 - List,
13 - ListItem,
14 - ListItemAvatar,
15 - ListItemText,
16 - IconButton
17 -} from '@material-ui/core';
18 -import ArrowRightIcon from '@material-ui/icons/ArrowRight';
19 -import MoreVertIcon from '@material-ui/icons/MoreVert';
20 -
21 -import mockData from './data';
22 -
23 -const useStyles = makeStyles(() => ({
24 - root: {
25 - height: '100%'
26 - },
27 - content: {
28 - padding: 0
29 - },
30 - image: {
31 - height: 48,
32 - width: 48
33 - },
34 - actions: {
35 - justifyContent: 'flex-end'
36 - }
37 -}));
38 -
39 -const LatestProducts = props => {
40 - const { className, ...rest } = props;
41 -
42 - const classes = useStyles();
43 -
44 - const [products] = useState(mockData);
45 -
46 - return (
47 - <Card
48 - {...rest}
49 - className={clsx(classes.root, className)}
50 - >
51 - <CardHeader
52 - subtitle={`${products.length} in total`}
53 - title="Latest products"
54 - />
55 - <Divider />
56 - <CardContent className={classes.content}>
57 - <List>
58 - {products.map((product, i) => (
59 - <ListItem
60 - divider={i < products.length - 1}
61 - key={product.id}
62 - >
63 - <ListItemAvatar>
64 - <img
65 - alt="Product"
66 - className={classes.image}
67 - src={product.imageUrl}
68 - />
69 - </ListItemAvatar>
70 - <ListItemText
71 - primary={product.name}
72 - secondary={`Updated ${product.updatedAt.fromNow()}`}
73 - />
74 - <IconButton
75 - edge="end"
76 - size="small"
77 - >
78 - <MoreVertIcon />
79 - </IconButton>
80 - </ListItem>
81 - ))}
82 - </List>
83 - </CardContent>
84 - <Divider />
85 - <CardActions className={classes.actions}>
86 - <Button
87 - color="primary"
88 - size="small"
89 - variant="text"
90 - >
91 - View all <ArrowRightIcon />
92 - </Button>
93 - </CardActions>
94 - </Card>
95 - );
96 -};
97 -
98 -LatestProducts.propTypes = {
99 - className: PropTypes.string
100 -};
101 -
102 -export default LatestProducts;
1 -import uuid from 'uuid/v1';
2 -import moment from 'moment';
3 -
4 -export default [
5 - {
6 - id: uuid(),
7 - name: 'Dropbox',
8 - imageUrl: '/images/products/product_1.png',
9 - updatedAt: moment().subtract(2, 'hours')
10 - },
11 - {
12 - id: uuid(),
13 - name: 'Medium Corporation',
14 - imageUrl: '/images/products/product_2.png',
15 - updatedAt: moment().subtract(2, 'hours')
16 - },
17 - {
18 - id: uuid(),
19 - name: 'Slack',
20 - imageUrl: '/images/products/product_3.png',
21 - updatedAt: moment().subtract(3, 'hours')
22 - },
23 - {
24 - id: uuid(),
25 - name: 'Lyft',
26 - imageUrl: '/images/products/product_4.png',
27 - updatedAt: moment().subtract(5, 'hours')
28 - },
29 - {
30 - id: uuid(),
31 - name: 'GitHub',
32 - imageUrl: '/images/products/product_5.png',
33 - updatedAt: moment().subtract(9, 'hours')
34 - }
35 -];
1 -import React from 'react';
2 -import clsx from 'clsx';
3 -import PropTypes from 'prop-types';
4 -import { Bar } from 'react-chartjs-2';
5 -import { makeStyles } from '@material-ui/styles';
6 -import {
7 - Card,
8 - CardHeader,
9 - CardContent,
10 - CardActions,
11 - Divider,
12 - Button
13 -} from '@material-ui/core';
14 -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
15 -import ArrowRightIcon from '@material-ui/icons/ArrowRight';
16 -
17 -import { data, options } from './chart';
18 -
19 -const useStyles = makeStyles(() => ({
20 - root: {},
21 - chartContainer: {
22 - height: 400,
23 - position: 'relative'
24 - },
25 - actions: {
26 - justifyContent: 'flex-end'
27 - }
28 -}));
29 -
30 -const LatestSales = props => {
31 - const { className, ...rest } = props;
32 -
33 - const classes = useStyles();
34 -
35 - return (
36 - <Card
37 - {...rest}
38 - className={clsx(classes.root, className)}
39 - >
40 - <CardHeader
41 - action={
42 - <Button
43 - size="small"
44 - variant="text"
45 - >
46 - Last 7 days <ArrowDropDownIcon />
47 - </Button>
48 - }
49 - title="Latest Sales"
50 - />
51 - <Divider />
52 - <CardContent>
53 - <div className={classes.chartContainer}>
54 - <Bar
55 - data={data}
56 - options={options}
57 - />
58 - </div>
59 - </CardContent>
60 - <Divider />
61 - <CardActions className={classes.actions}>
62 - <Button
63 - color="primary"
64 - size="small"
65 - variant="text"
66 - >
67 - Overview <ArrowRightIcon />
68 - </Button>
69 - </CardActions>
70 - </Card>
71 - );
72 -};
73 -
74 -LatestSales.propTypes = {
75 - className: PropTypes.string
76 -};
77 -
78 -export default LatestSales;
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.