40 lines
844 B
TypeScript
40 lines
844 B
TypeScript
import React from 'react';
|
|
|
|
interface Props {
|
|
onPlay: () => void;
|
|
onPause: () => void;
|
|
onClip: () => void;
|
|
}
|
|
|
|
const ControlBar: React.FC<Props> = React.memo((props: Props) => {
|
|
const styles = { width: '100%', flexGrow: 0 };
|
|
const buttonStyles = {
|
|
cursor: 'pointer',
|
|
background: 'black',
|
|
outline: 'none',
|
|
border: 'none',
|
|
color: 'green',
|
|
display: 'inline-block',
|
|
margin: '0 2px',
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div style={styles}>
|
|
<button style={buttonStyles} onClick={props.onPlay}>
|
|
Play
|
|
</button>
|
|
<button style={buttonStyles} onClick={props.onPause}>
|
|
Pause
|
|
</button>
|
|
<button style={buttonStyles} onClick={props.onClip}>
|
|
Clip
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
});
|
|
|
|
ControlBar.displayName = 'ControlBar';
|
|
export { ControlBar };
|