add basic views: CoinStat, Home, Ranking, Login and Routing
This commit is contained in:
parent
7b6168e8c2
commit
630b1ed3a5
195
frontend/package-lock.json
generated
195
frontend/package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@mui/icons-material": "^5.2.5",
|
||||
"@mui/lab": "^5.0.0-alpha.64",
|
||||
"@mui/material": "^5.2.8",
|
||||
"@mui/styled-engine-sc": "^5.1.0",
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
@ -1848,6 +1849,75 @@
|
||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
|
||||
"integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
|
||||
},
|
||||
"node_modules/@date-io/core": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
|
||||
"integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
|
||||
},
|
||||
"node_modules/@date-io/date-fns": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
|
||||
"integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"date-fns": "^2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/dayjs": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
|
||||
"integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"dayjs": "^1.8.17"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/luxon": {
|
||||
"version": "2.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
|
||||
"integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"luxon": "^1.21.3 || ^2.x"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"luxon": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/moment": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
|
||||
"integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"moment": "^2.24.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"moment": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin": {
|
||||
"version": "11.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
|
||||
@ -2810,6 +2880,60 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/lab": {
|
||||
"version": "5.0.0-alpha.64",
|
||||
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.64.tgz",
|
||||
"integrity": "sha512-YqTWT4TBHSGyV3dS4/TQctpKh0s4CDgWNrA2UnEnXFAfXmFET2Zm6W06fJ1VZDmJfyCVD8Wq0WsiwVZj4ay+Uw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.16.3",
|
||||
"@date-io/date-fns": "^2.11.0",
|
||||
"@date-io/dayjs": "^2.11.0",
|
||||
"@date-io/luxon": "^2.11.1",
|
||||
"@date-io/moment": "^2.11.0",
|
||||
"@mui/base": "5.0.0-alpha.64",
|
||||
"@mui/system": "^5.2.8",
|
||||
"@mui/utils": "^5.2.3",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"rifm": "^0.12.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^5.0.0",
|
||||
"@types/react": "^16.8.6 || ^17.0.0",
|
||||
"date-fns": "^2.25.0",
|
||||
"dayjs": "^1.10.7",
|
||||
"luxon": "^1.28.0 || ^2.0.0",
|
||||
"moment": "^2.29.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
},
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
},
|
||||
"luxon": {
|
||||
"optional": true
|
||||
},
|
||||
"moment": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.8.tgz",
|
||||
@ -13956,6 +14080,14 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rifm": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
|
||||
"integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
@ -17717,6 +17849,43 @@
|
||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
|
||||
"integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
|
||||
},
|
||||
"@date-io/core": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
|
||||
"integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
|
||||
},
|
||||
"@date-io/date-fns": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
|
||||
"integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
}
|
||||
},
|
||||
"@date-io/dayjs": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
|
||||
"integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
}
|
||||
},
|
||||
"@date-io/luxon": {
|
||||
"version": "2.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
|
||||
"integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
}
|
||||
},
|
||||
"@date-io/moment": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
|
||||
"integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.11.0"
|
||||
}
|
||||
},
|
||||
"@emotion/babel-plugin": {
|
||||
"version": "11.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
|
||||
@ -18418,6 +18587,26 @@
|
||||
"@babel/runtime": "^7.16.3"
|
||||
}
|
||||
},
|
||||
"@mui/lab": {
|
||||
"version": "5.0.0-alpha.64",
|
||||
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.64.tgz",
|
||||
"integrity": "sha512-YqTWT4TBHSGyV3dS4/TQctpKh0s4CDgWNrA2UnEnXFAfXmFET2Zm6W06fJ1VZDmJfyCVD8Wq0WsiwVZj4ay+Uw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.16.3",
|
||||
"@date-io/date-fns": "^2.11.0",
|
||||
"@date-io/dayjs": "^2.11.0",
|
||||
"@date-io/luxon": "^2.11.1",
|
||||
"@date-io/moment": "^2.11.0",
|
||||
"@mui/base": "5.0.0-alpha.64",
|
||||
"@mui/system": "^5.2.8",
|
||||
"@mui/utils": "^5.2.3",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"rifm": "^0.12.1"
|
||||
}
|
||||
},
|
||||
"@mui/material": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.8.tgz",
|
||||
@ -26371,6 +26560,12 @@
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
|
||||
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
|
||||
},
|
||||
"rifm": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
|
||||
"integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
|
||||
"requires": {}
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@mui/icons-material": "^5.2.5",
|
||||
"@mui/lab": "^5.0.0-alpha.64",
|
||||
"@mui/material": "^5.2.8",
|
||||
"@mui/styled-engine-sc": "^5.1.0",
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import './App.css';
|
||||
import RoutedApplication from './Views'
|
||||
import background from './Assets/background.png'
|
||||
//import background from './Assets/background.png'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
||||
BIN
frontend/src/Assets/1.png
Normal file
BIN
frontend/src/Assets/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
frontend/src/Assets/10.png
Normal file
BIN
frontend/src/Assets/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
frontend/src/Assets/11.png
Normal file
BIN
frontend/src/Assets/11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
frontend/src/Assets/2.png
Normal file
BIN
frontend/src/Assets/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
frontend/src/Assets/4.png
Normal file
BIN
frontend/src/Assets/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
frontend/src/Assets/5.png
Normal file
BIN
frontend/src/Assets/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
frontend/src/Assets/6.png
Normal file
BIN
frontend/src/Assets/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
frontend/src/Assets/7.png
Normal file
BIN
frontend/src/Assets/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
frontend/src/Assets/8.png
Normal file
BIN
frontend/src/Assets/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
frontend/src/Assets/9.png
Normal file
BIN
frontend/src/Assets/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
frontend/src/Assets/puste_logo.png
Normal file
BIN
frontend/src/Assets/puste_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
frontend/src/Assets/ranking.png
Normal file
BIN
frontend/src/Assets/ranking.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
frontend/src/Assets/ranking_vs.png
Normal file
BIN
frontend/src/Assets/ranking_vs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
@ -11,15 +11,20 @@ import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
import {useCallback} from 'react';
|
||||
|
||||
//Adding new pages or settings
|
||||
const pages = ['Ranking'];
|
||||
//Settings that display after clicking Profile icon
|
||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
||||
|
||||
|
||||
const ResponsiveAppBar = () => {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
const navigate = useNavigate();
|
||||
const handleOnClick = useCallback(() => navigate('/ranking', {replace: true}), [navigate]);
|
||||
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
@ -37,9 +42,9 @@ const ResponsiveAppBar = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar position="static">
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<AppBar position="static" >
|
||||
<Container maxWidth="xl" style={{ background: '#000000' }}>
|
||||
<Toolbar disableGutters >
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
@ -98,7 +103,7 @@ const ResponsiveAppBar = () => {
|
||||
{pages.map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
onClick={handleCloseNavMenu}
|
||||
onClick={handleOnClick}
|
||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
||||
>
|
||||
{page}
|
||||
|
||||
94
frontend/src/Views/CoinStat.js
Normal file
94
frontend/src/Views/CoinStat.js
Normal file
@ -0,0 +1,94 @@
|
||||
import './Home.css';
|
||||
import Header from '../Components/Header'
|
||||
import Container from '@mui/material/Container';
|
||||
import AutoComplete from '../Components/AutoComplete'
|
||||
//import DatePicker from '../components/DatePicker'
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import waluta1 from '../Assets/1.png';
|
||||
import waluta2 from '../Assets/2.png';
|
||||
import waluta3 from '../Assets/10.png';
|
||||
import waluta4 from '../Assets/4.png';
|
||||
import waluta5 from '../Assets/5.png';
|
||||
import waluta6 from '../Assets/6.png';
|
||||
import waluta7 from '../Assets/7.png';
|
||||
import waluta8 from '../Assets/8.png';
|
||||
import waluta9 from '../Assets/9.png';
|
||||
import waluta10 from '../Assets/11.png';
|
||||
import ranking from '../Assets/ranking_vs.png';
|
||||
import logo from '../Assets/logo.png';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
import {useCallback} from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
|
||||
|
||||
const CoinStat = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header/>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'right'
|
||||
}}>
|
||||
<ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const itemData = [
|
||||
{
|
||||
img: waluta1,
|
||||
title: 'Breakfast',
|
||||
},
|
||||
{
|
||||
img: waluta2,
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: waluta3,
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: waluta4,
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: waluta5,
|
||||
title: 'Hats',
|
||||
},
|
||||
{
|
||||
img: waluta6,
|
||||
title: 'Honey',
|
||||
},
|
||||
{
|
||||
img: waluta7,
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: waluta8,
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: waluta9,
|
||||
title: 'Mushrooms',
|
||||
},
|
||||
{
|
||||
img: waluta10,
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
];
|
||||
|
||||
export default CoinStat;
|
||||
@ -0,0 +1,102 @@
|
||||
import './Home.css';
|
||||
import Header from '../Components/Header'
|
||||
import Container from '@mui/material/Container';
|
||||
import AutoComplete from '../Components/AutoComplete'
|
||||
//import DatePicker from '../components/DatePicker'
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import waluta1 from '../Assets/1.png';
|
||||
import waluta2 from '../Assets/2.png';
|
||||
import waluta3 from '../Assets/10.png';
|
||||
import waluta4 from '../Assets/4.png';
|
||||
import waluta5 from '../Assets/5.png';
|
||||
import waluta6 from '../Assets/6.png';
|
||||
import waluta7 from '../Assets/7.png';
|
||||
import waluta8 from '../Assets/8.png';
|
||||
import waluta9 from '../Assets/9.png';
|
||||
import waluta10 from '../Assets/11.png';
|
||||
import ranking from '../Assets/ranking_vs.png';
|
||||
import logo from '../Assets/logo.png';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
import {useCallback} from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header/>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<img src={logo} alt="logo" />
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
|
||||
{itemData.map((item) => (
|
||||
<Link to="/coinstat">
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
</Link>
|
||||
))}
|
||||
</ImageList>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const itemData = [
|
||||
{
|
||||
img: waluta1,
|
||||
title: 'Breakfast',
|
||||
},
|
||||
{
|
||||
img: waluta2,
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: waluta3,
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: waluta4,
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: waluta5,
|
||||
title: 'Hats',
|
||||
},
|
||||
{
|
||||
img: waluta6,
|
||||
title: 'Honey',
|
||||
},
|
||||
{
|
||||
img: waluta7,
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: waluta8,
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: waluta9,
|
||||
title: 'Mushrooms',
|
||||
},
|
||||
{
|
||||
img: waluta10,
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
];
|
||||
|
||||
export default Home;
|
||||
100
frontend/src/Views/HomeSearch.js
Normal file
100
frontend/src/Views/HomeSearch.js
Normal file
@ -0,0 +1,100 @@
|
||||
import './Home.css';
|
||||
import Header from '../Components/Header'
|
||||
import Container from '@mui/material/Container';
|
||||
import AutoComplete from '../Components/AutoComplete'
|
||||
//import DatePicker from '../components/DatePicker'
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import waluta1 from '../Assets/1.png';
|
||||
import waluta2 from '../Assets/2.png';
|
||||
import waluta3 from '../Assets/10.png';
|
||||
import waluta4 from '../Assets/4.png';
|
||||
import waluta5 from '../Assets/5.png';
|
||||
import waluta6 from '../Assets/6.png';
|
||||
import waluta7 from '../Assets/7.png';
|
||||
import waluta8 from '../Assets/8.png';
|
||||
import waluta9 from '../Assets/9.png';
|
||||
import waluta10 from '../Assets/11.png';
|
||||
import ranking from '../Assets/ranking_vs.png';
|
||||
import logo from '../Assets/logo.png';
|
||||
|
||||
|
||||
const HomeSearch = () => {
|
||||
return (
|
||||
<div>
|
||||
<Container sx={{ bgcolor: '#F8F8F8' }}>
|
||||
<h1> What coin are you after today? </h1>
|
||||
<Container>
|
||||
<AutoComplete/>
|
||||
</Container>
|
||||
</Container>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<ImageList sx={{ width: '75vw', height: 450 }} cols={10} rowHeight={164}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<img src={ranking} alt="ranking" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const itemData = [
|
||||
{
|
||||
img: waluta1,
|
||||
title: 'Breakfast',
|
||||
},
|
||||
{
|
||||
img: waluta2,
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: waluta3,
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: waluta4,
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: waluta5,
|
||||
title: 'Hats',
|
||||
},
|
||||
{
|
||||
img: waluta6,
|
||||
title: 'Honey',
|
||||
},
|
||||
{
|
||||
img: waluta7,
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: waluta8,
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: waluta9,
|
||||
title: 'Mushrooms',
|
||||
},
|
||||
{
|
||||
img: waluta10,
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
];
|
||||
|
||||
export default Home;
|
||||
@ -13,6 +13,8 @@ import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import './Login.css';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
import {useCallback} from 'react';
|
||||
|
||||
function Copyright(props) {
|
||||
return (
|
||||
@ -29,7 +31,10 @@ function Copyright(props) {
|
||||
|
||||
const theme = createTheme();
|
||||
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
const handleOnClick = useCallback(() => navigate('/home', {replace: true}), [navigate]);
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
@ -90,6 +95,9 @@ export default function Login() {
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
onClick={() => {
|
||||
handleOnClick();
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
|
||||
41
frontend/src/Views/Ranking.js
Normal file
41
frontend/src/Views/Ranking.js
Normal file
@ -0,0 +1,41 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Masonry from '@mui/lab/Masonry';
|
||||
import Header from '../Components/Header';
|
||||
|
||||
const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
|
||||
|
||||
const Item = styled(Paper)(({ theme }) => ({
|
||||
...theme.typography.body2,
|
||||
color: theme.palette.text.secondary,
|
||||
border: '1px solid black',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}));
|
||||
|
||||
export default function BasicMasonry() {
|
||||
return (
|
||||
<div>
|
||||
<Header/>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems:'center',
|
||||
height: '100vh'
|
||||
}}>
|
||||
<Box sx={{ width: 500, minHeight: 393 }}>
|
||||
<Masonry columns={4} spacing={1}>
|
||||
{heights.map((height, index) => (
|
||||
<Item key={index} sx={{ height }}>
|
||||
{index + 1}
|
||||
</Item>
|
||||
))}
|
||||
</Masonry>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,12 +4,16 @@ import { BrowserRouter as Router, Switch, Route, Routes, Link } from "react-rout
|
||||
// view/pages/screens
|
||||
import Login from './Login';
|
||||
import Home from './Home';
|
||||
import CoinStat from './CoinStat'
|
||||
import Ranking from './Ranking'
|
||||
const ReactRouterSetup = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path ='/home' element ={<Home />}/>
|
||||
<Route path ='/login' element ={<Login />}/>
|
||||
<Route path ='/' element ={<Login />}/>
|
||||
<Route path ='/ranking' element ={<Ranking />}/>
|
||||
<Route path ='/coinstat' element ={<CoinStat />}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
|
||||
@ -5,7 +5,8 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: linear-gradient(#1c1c1c, #979797);
|
||||
background-color: #000000;
|
||||
background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user