Kopie van https://gitlab.com/studieverenigingvia/ict/centurion met een paar aanpassingen
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
centurion/frontend/src/App.tsx

77 lines
2.6 KiB

import React, {useEffect} from 'react';
import './App.css';
import logo from "./via-logo.svg"
import {Col, Progress, Row} from "antd"
import io from 'socket.io-client';
const App = () => {
const feedItems = [
{title: "Ha1", body: "Doei", key: 1},
// {title: "Ha2", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
// {title: "Ha3", body: "Doei"},
];
// useEffect(() => {
// socket.on("SENDING_NEW_TIME", data => {
// setTime(data);
// });
// return () => {
// socket.off("SENDING_NEW_TIME");
// };
// }, []);
return (
<div className="app">
<section className="content">
<Row>
<Col className="sider" span={4}>
<h1>Tijd tot volgende shot:</h1>
<Progress type="circle"
percent={75}
strokeColor={"#304ba3"}
strokeWidth={10}/>
</Col>
<Col className="feed" span={16}>
{feedItems.map(o =>
<Row key={o.key} className="feed-item">
<Col span={4}>Tijd</Col>
<Col span={3} offset={5}>{o.title}</Col>
<Col span={3}>Icoon</Col>
<Col span={3}>{o.body}</Col>
</Row>
)}
</Col>
<Col className="sider" span={4}>
<h1>Shots genomen:</h1>
<Progress type="circle"
percent={25}
strokeColor={"#304ba3"}
strokeWidth={10}/>
</Col>
</Row>
</section>
<footer>
<img src={logo} className="via-logo" alt="logo"/>
</footer>
</div>
);
};
export default App;