Source

components/MusicSelection/MusicCard/MusicCard.js

  1. // NPM module imports
  2. import React from "react";
  3. import PropTypes from "prop-types";
  5. // Component imports
  6. import RectangularButton from "../../Buttons/RectangularButton/RectangularButton";
  8. // File imports
  9. import * as buttonTypes from "../../Buttons/buttonTypes";
  10. import * as rectButtonBgColors from "../../Buttons/RectangularButton/rectangularButtonColorOptions";
  11. import * as cardColorOptions from "./musicCardColorOptions";
  13. // Style imports
  14. import styles from "./MusicCard.module.scss";
  16. /**
  17.  * Renders the MusicCard component
  18.  * @component
  19.  * @category MusicSelection
  20.  * @author Dan Levy <danlevy124@gmail.com>
  21.  */
  22. const MusicCard = (props) => {
  23.     // Returns the JSX to render
  24.     return (
  25.         <div className={`${styles.musicCard} ${styles[props.cardColor]}`}>
  26.             {/* Music title */}
  27.             <h1 className={styles.musicCardName}>{props.title}</h1>
  29.             {/* Composers */}
  30.             <h2 className={styles.musicCardComposers}>{props.composers}</h2>
  32.             {/* Division line */}
  33.             <span className={styles.musicCardDivisionLine}></span>
  35.             {/* Options */}
  36.             <div className={styles.musicCardButtons}>
  37.                 {/* View song button */}
  38.                 <RectangularButton
  39.                     backgroundColor={rectButtonBgColors.WHITE}
  40.                     type={buttonTypes.BUTTON}
  41.                     value="view-song"
  42.                     text="View Song"
  43.                     onClick={props.onViewSongClick}
  44.                 />
  46.                 {/* View performance button */}
  47.                 <RectangularButton
  48.                     backgroundColor={rectButtonBgColors.WHITE}
  49.                     type={buttonTypes.BUTTON}
  50.                     value="view-performance"
  51.                     text="View Performance"
  52.                     onClick={props.onViewPerformanceClick}
  53.                 />
  54.             </div>
  55.         </div>
  56.     );
  57. };
  59. // Prop types for the MusicCard component
  60. MusicCard.propTypes = {
  61.     /**
  62.      * The title of the music
  63.      */
  64.     title: PropTypes.string.isRequired,
  66.     /**
  67.      * A string containing all composer(s)
  68.      */
  69.     composers: PropTypes.string.isRequired,
  71.     /**
  72.      * The background color of the card.
  73.      * See [options]{@link module:musicCardColorOptions}.
  74.      */
  75.     cardColor: PropTypes.oneOf(Object.values(cardColorOptions)).isRequired,
  77.     /**
  78.      * Click handler for viewing (i.e. practicing) the song
  79.      */
  80.     onViewSongClick: PropTypes.func.isRequired,
  82.     /**
  83.      * Click handler for viewing the performance for the selected song
  84.      */
  85.     onViewPerformanceClick: PropTypes.func.isRequired,
  86. };
  88. export default MusicCard;