41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
|
import React, { HTMLAttributes } from 'react';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { FaPlay, FaPause, FaStepForward, FaStepBackward } from 'react-icons/fa';
|
||
|
|
|
||
|
|
interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
|
||
|
|
songName: string;
|
||
|
|
fileName: string;
|
||
|
|
isPlaying: boolean;
|
||
|
|
onPlayPause: () => void;
|
||
|
|
onStepForward: () => void;
|
||
|
|
onStepBackward: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const NowPlaying: React.FC<NowPlayingProps> = (props) => {
|
||
|
|
return (
|
||
|
|
<div className={classNames(props.className, 'bg-violet-100/50 h-[150px] p-5')}>
|
||
|
|
<div className="flex flex-col w-full gap-2">
|
||
|
|
<div className="flex flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center">
|
||
|
|
<div className="flex-grow">
|
||
|
|
<div className="text-white text-lg font-bold">{props.songName}</div>
|
||
|
|
<div className="text-white text-sm">{props.fileName}</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row gap-4">
|
||
|
|
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepBackward}>
|
||
|
|
<FaStepBackward size={24} />
|
||
|
|
</button>
|
||
|
|
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
|
||
|
|
{props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
|
||
|
|
</button>
|
||
|
|
<button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepForward}>
|
||
|
|
<FaStepForward size={24} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NowPlaying;
|