import * as React from "react" ; import { createUseStyles } from "react-jss" ; type Props = { name : string ; position : number ; isLocal ? : boolean ; } ; const getLocalStyles = ( { isLocal = false } ) : { fontStyle : string ; color : string ; } | { } => isLocal ? { fontStyle : "italic" , color : "#ffcd75" } : { } ; const useStyles = createUseStyles ( { name : ( props ) => ( { fontFamily : "Arial, sans-serif" , fontSize : "0.8em" , fontWeight : 700 , color : "#fff" , textTransform : "uppercase" , ... getLocalStyles ( props ) } ) } ) ; const PlayerName = ( props ) => { const classes = useStyles ( props ) ; return < span className = { classes . name } > { props . position } . & nbsp ; { props . name } < /span>; } ; export { PlayerName } ;