-
Notifications
You must be signed in to change notification settings - Fork 0
/
TrackItem.tsx
35 lines (31 loc) · 992 Bytes
/
TrackItem.tsx
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
import React from 'react';
import { ITrack } from '../types/track';
import {Card} from "@material-ui/core";
import styles from '../styles/TrackItem.module.scss';
import { IconButton } from '@mui/material/IconButton';
interface TrackListProps {
track: ITrack;
active?: boolean;
}
const TrackItem: React.FC<TrackListProps> => {track: ITrack, active: false}) => {
const router = useRouter()
return (
<Card className={styles.track} onClick={() => router.push('/tracks/' + track._id)}>
<IconButton>
{!active
? <PlayArrow/>
: <Pause/>
}
</IconButton>
<img width={70} height={70} src={track.picture}/>
<Grid container direction="column" style={{width: 200, margin: '0 20px'}}>
<div>{track.name}</div>
<div style={{fontSize: 12, color: 'gray'}}>{track.artist}</div>
</Grid>
{active && <div>02:42 /03:22</div>}
<IconButton onClick={e => e.stopPropagation()} style={{marginLeft: 'auto'}}>
<Delete/>
</IconButton>
);
};
export default TrackItem;