Chanel.js
2.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from "react";
import "./Chanel.css";
import "@material-ui/icons"
import PersonIcon from "@material-ui/icons/Person";
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import StopIcon from '@material-ui/icons/Stop';
import PauseIcon from '@material-ui/icons/Pause';
export function Chanel(props) {
const chanel = props.chanel;
return (
<div className="chanel">
<a href={chanel.url} className="chanel__url">
{chanel.thumbnail && <img className="chanel__thumbnail" src={chanel.thumbnail} alt=""></img>}
{!chanel.thumbnail && <PersonIcon className="chanel__icon"/>}
<div className="chanel__box">
<div className="chanel__info">
<div className="chanel__name">{chanel.name}</div>
<div className="chanel__game">{chanel.game}</div>
</div>
<div className="chanel__view">{chanel.view}</div>
<input type="radio" name="chanel"></input>
</div>
</a>
</div>
);
}
export class ChanelList extends React.Component {
render() {
// data for test
const test = [
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
]
const chanels = test;
return (
<div className="chanel__list">
<strong>CHANELS</strong>
<ul>
{chanels.map((chanel) => (
<li>
<Chanel chanel={chanel}/>
<hr />
</li>
))}
</ul>
</div>
);
}
}