import * as React from "react" ; import { createUseStyles } from "react-jss" ; import { PlayerTitle , TITLES } from "@creature-chess/models" ; type Props = { titleId : PlayerTitle | null ; size ? : "large" | "small" ; } ; const getColor = ( titleId ) => { switch ( titleId ) { case PlayerTitle . Developer : return "#79ffe0" ; case PlayerTitle . Contributor : return "#e89292" ; case PlayerTitle . HallOfFame : return "#f7ee85" ; default : return "#d6d0d0" ; } } ; const useStyles = createUseStyles ( { title : { fontFamily : "Arial, sans-serif" , fontSize : ( { size = "small" } ) => size === "small" ? "0.65rem" : "1rem" , fontWeight : 700 , color : ( { titleId } ) => getColor ( titleId ) , textAlign : "inherit" , textTransform : "uppercase" } } ) ; const Title = ( props ) => { const classes = useStyles ( props ) ; if ( ! props . titleId ) { return null ; } return < span className = { classes . title } > { TITLES [ props . titleId ] . text } < /span>; } ; export { Title } ;