mirror of
https://github.com/FranP-code/Crypto-Prices.git
synced 2025-10-12 23:53:06 +00:00
Main crypto cards done
This commit is contained in:
27
package-lock.json
generated
27
package-lock.json
generated
@@ -14,7 +14,9 @@
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"chart.js": "^3.7.0",
|
||||
"react": "^17.0.2",
|
||||
"react-chartjs-2": "^4.0.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"styled-components": "^5.3.3",
|
||||
@@ -5339,6 +5341,11 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
|
||||
"integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
|
||||
},
|
||||
"node_modules/check-types": {
|
||||
"version": "11.1.2",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
|
||||
@@ -13313,6 +13320,15 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/react-chartjs-2": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
|
||||
"integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
|
||||
"peerDependencies": {
|
||||
"chart.js": "^3.5.0",
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
|
||||
@@ -20146,6 +20162,11 @@
|
||||
"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
|
||||
"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
|
||||
"integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
|
||||
},
|
||||
"check-types": {
|
||||
"version": "11.1.2",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
|
||||
@@ -25800,6 +25821,12 @@
|
||||
"whatwg-fetch": "^3.6.2"
|
||||
}
|
||||
},
|
||||
"react-chartjs-2": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
|
||||
"integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
|
||||
|
||||
@@ -9,7 +9,9 @@
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"chart.js": "^3.7.0",
|
||||
"react": "^17.0.2",
|
||||
"react-chartjs-2": "^4.0.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"styled-components": "^5.3.3",
|
||||
|
||||
46
src/App.jsx
46
src/App.jsx
@@ -1,14 +1,15 @@
|
||||
import Header from "./components/Header/Header";
|
||||
import styled from 'styled-components'
|
||||
import Cryptos from "./components/Cryptos/Cryptos";
|
||||
|
||||
function App() {
|
||||
|
||||
const Div = styled.div`
|
||||
|
||||
height: 100%;
|
||||
/* height: 100%; */
|
||||
|
||||
background: rgb(46,66,105);
|
||||
background: linear-gradient(180deg, rgba(46,66,105,1) 0%, rgba(0,26,47,1) 100%);
|
||||
background: linear-gradient(180deg, #557ac5 0%, #004a86 100%);
|
||||
|
||||
.paths {
|
||||
|
||||
@@ -19,6 +20,8 @@ function App() {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
.path {
|
||||
|
||||
&::before {
|
||||
@@ -29,11 +32,11 @@ function App() {
|
||||
|
||||
/* background: #ffffff45; */
|
||||
background: rgb(255,255,255);
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.08727240896358546) 0%, rgba(46,66,105,0.07046568627450978) 100%);
|
||||
background: linear-gradient(135deg, #ffffff4e 0%, #2e426965 100%);
|
||||
|
||||
position: absolute;
|
||||
|
||||
&:nth-child(1) {
|
||||
&.one {
|
||||
|
||||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||
|
||||
@@ -46,7 +49,7 @@ function App() {
|
||||
transform: rotate(14deg)
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&.two {
|
||||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
@@ -58,7 +61,7 @@ function App() {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
&.three {
|
||||
|
||||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
@@ -71,7 +74,7 @@ function App() {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
&.four {
|
||||
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
|
||||
@@ -84,7 +87,7 @@ function App() {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
&.five {
|
||||
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
|
||||
@@ -97,7 +100,7 @@ function App() {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
&.six {
|
||||
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
|
||||
@@ -110,7 +113,7 @@ function App() {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
&.seven {
|
||||
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
|
||||
@@ -123,11 +126,11 @@ function App() {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
&.eight {
|
||||
|
||||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||
|
||||
top: 100%;
|
||||
top: 95%;
|
||||
left: 20vw;
|
||||
transform: rotate(40deg)
|
||||
}
|
||||
@@ -138,16 +141,19 @@ function App() {
|
||||
return (
|
||||
<Div>
|
||||
<Header />
|
||||
|
||||
<div className="paths">
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path"></div>
|
||||
<div className="path one"></div>
|
||||
<div className="path two"></div>
|
||||
<div className="path three"></div>
|
||||
<div className="path four"></div>
|
||||
<div className="path five"></div>
|
||||
<div className="path six"></div>
|
||||
<div className="path seven"></div>
|
||||
<div className="path eight"></div>
|
||||
</div>
|
||||
|
||||
<Cryptos />
|
||||
</Div>
|
||||
);
|
||||
}
|
||||
|
||||
110
src/components/Cryptos/Crypto.jsx
Normal file
110
src/components/Cryptos/Crypto.jsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Card, CardContent, Grid, Typography } from '@mui/material';
|
||||
|
||||
import { Chart as ChartJS } from 'chart.js/auto'
|
||||
import { Chart, Line } from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale
|
||||
|
||||
const Crypto = ({CryptoStyles}) => {
|
||||
|
||||
const plugin = {
|
||||
id: 'custom_canvas_background_color',
|
||||
beforeDraw: (chart) => {
|
||||
const ctx = chart.canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, chart.width, chart.height);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CryptoStyles item md={4} sm={6} xs={12}>
|
||||
<Card className="card">
|
||||
<CardContent
|
||||
className="container"
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
color="text.primary"
|
||||
fontWeight="bold"
|
||||
align="center"
|
||||
padding="2vh 0px 0px 0px"
|
||||
fontFamily="Raleway"
|
||||
color="#fff"
|
||||
>
|
||||
Test - Bitcoin
|
||||
</Typography>
|
||||
<Line
|
||||
data={{
|
||||
labels: ['12-01', '13-01', '14-01', '15-01', '16-01', '17-01', '18-01', '19-01'],
|
||||
label: false,
|
||||
datasets: [
|
||||
{
|
||||
data: [21, 51, 29, 50, 80, 70, 99, 1],
|
||||
pointRadius: 0,
|
||||
borderColor: "#fff"
|
||||
}
|
||||
]
|
||||
}}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
aspectRatio: 1.5,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: 'rgba(253, 91, 91, 0)',
|
||||
borderColor: 'rgba(187, 187, 187, 0)',
|
||||
opacity: 0
|
||||
},
|
||||
ticks: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
color: 'rgba(253, 91, 91, 0)',
|
||||
borderColor: 'rgba(187, 187, 187, 0)',
|
||||
opacity: 0
|
||||
},
|
||||
ticks: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
plugin,
|
||||
legend: {
|
||||
display: false, // https://stackoverflow.com/a/67055974
|
||||
labels: {
|
||||
fontColor: '#666'
|
||||
}
|
||||
}
|
||||
},
|
||||
}}
|
||||
className="line"
|
||||
style={{backgroundColor: "#ffffff0"}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="text.secondary"
|
||||
fontWeight="medium"
|
||||
align="center"
|
||||
padding="5.5vh 0px"
|
||||
marginBottom="8vh"
|
||||
fontFamily="Raleway"
|
||||
color="#eee"
|
||||
>
|
||||
Last 7 days
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CryptoStyles>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default Crypto;
|
||||
74
src/components/Cryptos/Cryptos.jsx
Normal file
74
src/components/Cryptos/Cryptos.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import { Grid } from '@mui/material';
|
||||
import styled from 'styled-components';
|
||||
import Crypto from './Crypto';
|
||||
|
||||
const Cryptos = () => {
|
||||
|
||||
const CryptosStyles = styled.div`
|
||||
|
||||
position: relative;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
margin-top: 5vh;
|
||||
|
||||
.grid {
|
||||
|
||||
padding: 0px 10vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
/* width: 100px; */
|
||||
height: 100px;
|
||||
|
||||
background: #101116;
|
||||
}
|
||||
`
|
||||
const CryptoStyles = styled(Grid)` // https://stackoverflow.com/questions/68248337/how-to-override-material-ui-css-with-styled-component
|
||||
|
||||
.card {
|
||||
|
||||
background: rgba( 78, 159, 255, 0) !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: rgba( 78, 159, 255, 0.25 );
|
||||
backdrop-filter: blur( 14px );
|
||||
-webkit-backdrop-filter: blur( 14px );
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba( 255, 255, 255, 0.18 );
|
||||
/* height: 80vh; */
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
.line {
|
||||
|
||||
/* height: 38vh !important; */
|
||||
/* width: 54.19vh !important; */
|
||||
margin-top: 7vh;
|
||||
/* margin-bottom: 5vh; */
|
||||
/* margin-bottom: 10vh; */
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
// const data = [{coin: "BTC", price: 400, day: "12-02"}, {coin: "BTC", price: 110, day: "13-02"}, {coin: "BTC", price: 450, day: "14-02"}]
|
||||
|
||||
return (
|
||||
<CryptosStyles>
|
||||
<Grid container columnSpacing={4} rowSpacing={6} className='grid'>
|
||||
<Crypto CryptoStyles={CryptoStyles} />
|
||||
<Crypto CryptoStyles={CryptoStyles} />
|
||||
<Crypto CryptoStyles={CryptoStyles} />
|
||||
<Crypto CryptoStyles={CryptoStyles} />
|
||||
<Crypto CryptoStyles={CryptoStyles} />
|
||||
<Crypto CryptoStyles={CryptoStyles} />
|
||||
</Grid>
|
||||
</CryptosStyles>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cryptos;
|
||||
Reference in New Issue
Block a user