QueueCube/frontend/src/components/App.tsx

import React, { HTMLAttributes, useState } from 'react';
import SongTable from './SongTable';
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>
  );
};


const App: React.FC = () => {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <div className="flex items-center justify-center h-screen w-screen bg-black py-10">
      <div className="bg-violet-900 w-full md:max-w-xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
        <NowPlaying 
          className="flex flex-row md:rounded-t-2xl" 
          songName={"Song Name"} 
          fileName={"Song Name.mp3"} 
          isPlaying={isPlaying} 
          onPlayPause={() => setIsPlaying(!isPlaying)} 
          onStepForward={() => {}} 
          onStepBackward={() => {}} 
        />
        <SongTable />
      </div>
    </div>
  );
};

export default App;