import React from "react" ; import styled from "styled-components" ; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ; import { faStar , faStarHalf } from "@fortawesome/free-solid-svg-icons" ; const FilledStar = styled ( FontAwesomeIcon ) `
  color: orange;
  vertical-align: 0.1em;
` ; const BlankStar = styled ( FontAwesomeIcon ) `
  color: #ccc;
  vertical-align: 0.1em;
` ; const StyledReviewStars = styled ( "span" ) `
  white-space: pre;
` ; const displayFilledStars = ( scale ) : JSX . Element [ ] => { let stars = [ ] ; for ( let n = Math . floor ( scale ) ; n > 0 ; n -- ) { stars . push ( < FilledStar key = { n } icon = { faStar } / > ) ; } return stars ; } ; const displayHalfStar = ( scale ) : JSX . Element | string => { return ( scale - Math . floor ( scale ) ) * 2 ? ( < FilledStar icon = { faStarHalf } / > ) : ( "" ) ; } ; const displayBlankStars = ( scale ) : JSX . Element [ ] => { let stars = [ ] ; for ( let n = 5 - Math . ceil ( scale ) ; n > 0 ; n -- ) { stars . push ( < BlankStar key = { n } icon = { faStar } / > ) ; } return stars ; } ; interface Props { scale : number ; } const ReviewStars = ( { scale } ) => ( < StyledReviewStars > { displayFilledStars ( scale ) } { displayHalfStar ( scale ) } { displayBlankStars ( scale ) } < /StyledReviewStars>); export default ReviewStars ;