TPS
/
exchange-client
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chart created

This commit is contained in:
Kakabay 2022-10-28 14:56:26 +05:00
parent ff6e1bdb48
commit 2c49c33ad7
12 changed files with 1090 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1244
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -10,10 +10,14 @@
},
"dependencies": {
"axios": "^1.1.2",
"chart.js": "^3.9.1",
"react": "^18.2.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.3.5",
"react-router-dom": "^6.4.2"
"react-player": "^2.11.0",
"react-router-dom": "^6.4.2",
"vite-plugin-svgr": "^2.2.2"
},
"devDependencies": {
"@types/react": "^18.0.17",

6
src/assets/icons/file.svg
View File

@ -1,8 +1,8 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_555_638)">
<path d="M30 32H18C17.4696 32 16.9609 32.2107 16.5858 32.5858C16.2107 32.9609 16 33.4696 16 34C16 34.5304 16.2107 35.0391 16.5858 35.4142C16.9609 35.7893 17.4696 36 18 36H30C30.5304 36 31.0391 35.7893 31.4142 35.4142C31.7893 35.0391 32 34.5304 32 34C32 33.4696 31.7893 32.9609 31.4142 32.5858C31.0391 32.2107 30.5304 32 30 32Z" fill="#05172D"/>
<path d="M18 28H24C24.5304 28 25.0391 27.7893 25.4142 27.4142C25.7893 27.0391 26 26.5304 26 26C26 25.4696 25.7893 24.9609 25.4142 24.5858C25.0391 24.2107 24.5304 24 24 24H18C17.4696 24 16.9609 24.2107 16.5858 24.5858C16.2107 24.9609 16 25.4696 16 26C16 26.5304 16.2107 27.0391 16.5858 27.4142C16.9609 27.7893 17.4696 28 18 28Z" fill="#05172D"/>
<path d="M39.48 16.6599L28.6 4.65987C28.413 4.45269 28.1847 4.28693 27.9298 4.17326C27.6749 4.05959 27.3991 4.00053 27.12 3.99987H13.12C12.4555 3.99195 11.7959 4.11499 11.179 4.36198C10.5621 4.60898 9.99981 4.97508 9.52436 5.43938C9.04892 5.90368 8.66959 6.45709 8.40804 7.068C8.14648 7.67892 8.00783 8.33537 8 8.99987V38.9999C8.00783 39.6644 8.14648 40.3208 8.40804 40.9317C8.66959 41.5426 9.04892 42.0961 9.52436 42.5604C9.99981 43.0247 10.5621 43.3908 11.179 43.6378C11.7959 43.8848 12.4555 44.0078 13.12 43.9999H34.88C35.5445 44.0078 36.2041 43.8848 36.821 43.6378C37.4379 43.3908 38.0002 43.0247 38.4756 42.5604C38.9511 42.0961 39.3304 41.5426 39.592 40.9317C39.8535 40.3208 39.9922 39.6644 40 38.9999V17.9999C39.9987 17.5042 39.8134 17.0267 39.48 16.6599ZM28 9.99987L33.48 15.9999H29.48C29.2706 15.9872 29.0657 15.933 28.8775 15.8403C28.6892 15.7477 28.5213 15.6185 28.3835 15.4602C28.2458 15.3019 28.1409 15.1178 28.075 14.9186C28.0092 14.7194 27.9837 14.5091 28 14.2999V9.99987ZM34.88 39.9999H13.12C12.9807 40.008 12.8413 39.9885 12.7095 39.9426C12.5778 39.8967 12.4565 39.8253 12.3524 39.7324C12.2484 39.6395 12.1637 39.5269 12.1032 39.4012C12.0427 39.2755 12.0077 39.1391 12 38.9999V8.99987C12.0077 8.8606 12.0427 8.7242 12.1032 8.5985C12.1637 8.47281 12.2484 8.36029 12.3524 8.26739C12.4565 8.17449 12.5778 8.10303 12.7095 8.05713C12.8413 8.01122 12.9807 7.99177 13.12 7.99987H24V14.2999C23.9677 15.7731 24.5195 17.1993 25.5349 18.2672C26.5504 19.3351 27.947 19.958 29.42 19.9999H36V38.9999C35.9923 39.1391 35.9573 39.2755 35.8968 39.4012C35.8363 39.5269 35.7516 39.6395 35.6476 39.7324C35.5435 39.8253 35.4222 39.8967 35.2905 39.9426C35.1587 39.9885 35.0193 40.008 34.88 39.9999Z" fill="#05172D"/>
<path d="M30 32H18C17.4696 32 16.9609 32.2107 16.5858 32.5858C16.2107 32.9609 16 33.4696 16 34C16 34.5304 16.2107 35.0391 16.5858 35.4142C16.9609 35.7893 17.4696 36 18 36H30C30.5304 36 31.0391 35.7893 31.4142 35.4142C31.7893 35.0391 32 34.5304 32 34C32 33.4696 31.7893 32.9609 31.4142 32.5858C31.0391 32.2107 30.5304 32 30 32Z" fill=""/>
<path d="M18 28H24C24.5304 28 25.0391 27.7893 25.4142 27.4142C25.7893 27.0391 26 26.5304 26 26C26 25.4696 25.7893 24.9609 25.4142 24.5858C25.0391 24.2107 24.5304 24 24 24H18C17.4696 24 16.9609 24.2107 16.5858 24.5858C16.2107 24.9609 16 25.4696 16 26C16 26.5304 16.2107 27.0391 16.5858 27.4142C16.9609 27.7893 17.4696 28 18 28Z" fill=""/>
<path d="M39.48 16.6599L28.6 4.65987C28.413 4.45269 28.1847 4.28693 27.9298 4.17326C27.6749 4.05959 27.3991 4.00053 27.12 3.99987H13.12C12.4555 3.99195 11.7959 4.11499 11.179 4.36198C10.5621 4.60898 9.99981 4.97508 9.52436 5.43938C9.04892 5.90368 8.66959 6.45709 8.40804 7.068C8.14648 7.67892 8.00783 8.33537 8 8.99987V38.9999C8.00783 39.6644 8.14648 40.3208 8.40804 40.9317C8.66959 41.5426 9.04892 42.0961 9.52436 42.5604C9.99981 43.0247 10.5621 43.3908 11.179 43.6378C11.7959 43.8848 12.4555 44.0078 13.12 43.9999H34.88C35.5445 44.0078 36.2041 43.8848 36.821 43.6378C37.4379 43.3908 38.0002 43.0247 38.4756 42.5604C38.9511 42.0961 39.3304 41.5426 39.592 40.9317C39.8535 40.3208 39.9922 39.6644 40 38.9999V17.9999C39.9987 17.5042 39.8134 17.0267 39.48 16.6599ZM28 9.99987L33.48 15.9999H29.48C29.2706 15.9872 29.0657 15.933 28.8775 15.8403C28.6892 15.7477 28.5213 15.6185 28.3835 15.4602C28.2458 15.3019 28.1409 15.1178 28.075 14.9186C28.0092 14.7194 27.9837 14.5091 28 14.2999V9.99987ZM34.88 39.9999H13.12C12.9807 40.008 12.8413 39.9885 12.7095 39.9426C12.5778 39.8967 12.4565 39.8253 12.3524 39.7324C12.2484 39.6395 12.1637 39.5269 12.1032 39.4012C12.0427 39.2755 12.0077 39.1391 12 38.9999V8.99987C12.0077 8.8606 12.0427 8.7242 12.1032 8.5985C12.1637 8.47281 12.2484 8.36029 12.3524 8.26739C12.4565 8.17449 12.5778 8.10303 12.7095 8.05713C12.8413 8.01122 12.9807 7.99177 13.12 7.99987H24V14.2999C23.9677 15.7731 24.5195 17.1993 25.5349 18.2672C26.5504 19.3351 27.947 19.958 29.42 19.9999H36V38.9999C35.9923 39.1391 35.9573 39.2755 35.8968 39.4012C35.8363 39.5269 35.7516 39.6395 35.6476 39.7324C35.5435 39.8253 35.4222 39.8967 35.2905 39.9426C35.1587 39.9885 35.0193 40.008 34.88 39.9999Z" fill=""/>
</g>
<defs>
<clipPath id="clip0_555_638">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

2
src/assets/styles/_about.scss
View File

@ -35,7 +35,7 @@
display: flex;
gap: 0.8rem;
align-items: center;
transition: all 0.2s linear;
transition: all 0.2s ease;
&:hover {
text-decoration: underline;

14
src/assets/styles/_documentLink.scss
View File

@ -6,13 +6,25 @@
border: 1px solid $base-gray;
max-width: 47.7rem;
border-radius: 0.5rem;
transition: all 0.3s linear;
transition: all 0.3s ease;
&:hover {
background: $base-blue;
.document-title {
color: $base-white;
}
.document-img {
svg {
fill: $base-white;
}
}
}
}
.document-img {
svg {
fill: $base-blue;
transition: all 0.2s ease;
}
}

2
src/assets/styles/_footer.scss
View File

@ -53,7 +53,7 @@
.footer-nav-list-link {
font-size: 1.8rem;
color: $base-gray;
transition: all 0.3s linear;
transition: all 0.3s ease;
&:hover {
color: $base-white;

2
src/assets/styles/_newsPost.scss
View File

@ -46,7 +46,7 @@
display: flex;
gap: 1.6rem;
align-items: center;
transition: 0.3s linear;
transition: 0.3s ease;
width: fit-content;
h3 {

5
src/components/DocumentLink.jsx
View File

@ -1,13 +1,14 @@
// Modules
import React from 'react';
import { Link } from 'react-router-dom';
// Icons
import file from '../assets/icons/file.svg';
import { ReactComponent as File } from '../assets/icons/file.svg';
const DocumentLink = ({ title }) => {
return (
<Link className="document-link" to={'/'}>
<div className="document-img">
<img src={file} alt="file" />
<File />
</div>
<h3 className="document-title">{title}</h3>
</Link>

27
src/components/LineChart.jsx Normal file
View File

@ -0,0 +1,27 @@
// Modules
import { Bar } from 'react-chartjs-2';
const LineChart = () => {
return (
<div>
<Bar
data={{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
},
],
}}
options={{
maintainAspectRatio: false,
}}
height={500}
width={400}
/>
</div>
);
};
export default LineChart;

23
src/components/VideoPlayer.jsx Normal file
View File

@ -0,0 +1,23 @@
// Modules
import ReactPlayer from 'react-player';
// import { hosting } from '../../links';
// Components
// import PlayIcon from './PlayIcon';
const VideoPlayer = (videoUrl) => {
return (
<ReactPlayer
// url={hosting + videoUrl}
url={videoUrl}
controls
// playIcon={videoUrl.length > 0 ? <PlayIcon /> : undefined}
volume={1}
light={true}
height={'100%'}
width={'100%'}
/>
);
};
export default VideoPlayer;

12
src/pages/Home.jsx
View File

@ -4,11 +4,13 @@ import { Link } from 'react-router-dom';
import Hero from '../components/Hero';
import SectionTitle from '../components/SectionTitle';
import Ticker from '../components/Ticker';
// Icons
import arrow from '../assets/icons/arrow.svg';
import NewsPost from '../components/NewsPost';
import DocumentLink from '../components/DocumentLink';
import Footer from '../components/Footer';
import VideoPlayer from '../components/VideoPlayer';
import LineChart from '../components/LineChart';
// Icons
import arrow from '../assets/icons/arrow.svg';
const Home = () => {
return (
@ -23,6 +25,8 @@ const Home = () => {
{/* Ticker section ./ =========== */}
</div>
{/* <LineChart /> */}
{/* About section */}
<section className="about">
<div className="container">
@ -62,7 +66,9 @@ const Home = () => {
</Link>
</div>
</div>
<div className="about-right"></div>
<div className="about-right">
<VideoPlayer videoUrl={''} />
</div>
</div>
</div>
</section>

9
vite.config.js
View File

@ -1,7 +1,8 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
plugins: [svgr(), react()],
});