CharacterHero CharacterHero.tsx

0% Statements 0/20

100% Branches 1/1

100% Functions 1/1

0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { ICharacter } from '@/shared/types/character';
import './CharacterHero.scss';
import LazyImage from '@/shared/components/LazyImage/LazyImage';
import { motion } from 'framer-motion';
 
const CharacterHero = ({ character }: { character: ICharacter }) => {
  return (
    <motion.div className="character-hero" initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
      <div className="character-hero__bg" aria-hidden="true" />
      <LazyImage src={character.image} alt={character.name} />
      <div className="hero-info">
        <h1>{character.name}</h1>
        <div className={`status status--${character.status.toLowerCase()}`}>{character.status}</div>
        <p>
          <strong>Species:</strong> {character.species} {character.type ? `– ${character.type}` : ''}
          <br />
          <strong>Gender:</strong> {character.gender}
        </p>
      </div>
    </motion.div>
  );
};
 
export default CharacterHero;