import React from 'react'; import { Card, Image } from 'semantic-ui-react'; import { getRarityColor } from '../../utils/assets'; function getRarityStars(rarity: number) { const retVal = []; for (let i = 0; i < rarity; ++i) { retVal.push('\u2605'); } return retVal.join(''); } function CrewCard({crew}) { return ( <Card> <Card.Content> <Image floated="left" size="tiny" src={crew.image} bordered style={{ borderColor: `${getRarityColor(crew.rarity)}` }} /> <Card.Header>{crew.name}</Card.Header> <Card.Meta> <p>{getRarityStars(crew.rarity)}</p> <p> {crew.skills.map(skill => ( <Image key={skill.key} width={30} height={30} inline spaced src={skill.imageUrl} /> ))} </p> </Card.Meta> <Card.Description> {crew.traits.join(', ')} </Card.Description> </Card.Content> </Card> ); } export default CrewCard;