Added Pokedex component

develop
Jason Zhu 2023-03-19 15:38:29 +11:00
parent 4a8ad0256b
commit 3139f53236
3 changed files with 20 additions and 7 deletions

View File

@ -2,14 +2,14 @@ import React from 'react';
import './App.css'; import './App.css';
import Header from 'components/Header'; import Header from 'components/Header';
import Filters from 'components/Filters'; import Filters from 'components/Filters';
import { Pokemon } from 'features/Pokedex/Pokemon'; import { Pokedex } from './features/Pokedex/Pokedex';
function App() { function App() {
return ( return (
<div className="App app_container"> <div className="App app_container">
<Header /> <Header />
<Filters /> <Filters />
<Pokemon /> <Pokedex />
</div> </div>
); );
} }

View File

@ -0,0 +1,8 @@
import React from 'react';
import { Pokemon } from './Pokemon';
import charizard from 'assets/charizard.svg';
export function Pokedex() {
return <Pokemon name={'Charizard'} number={'#006'} image={charizard} />;
}

View File

@ -1,12 +1,17 @@
import React from 'react'; import React from 'react';
import './Pokemon.css'; import './Pokemon.css';
import charizard from '../../../assets/charizard.svg';
export function Pokemon() { interface PokemonProps {
name: string;
number: string;
image: string;
}
export function Pokemon({ name, number, image }: PokemonProps) {
return ( return (
<div className="thumbnail__container"> <div className="thumbnail__container">
<div className="card__header"> <div className="card__header">
<div className="poke__number">#006</div> <div className="poke__number">{number}</div>
<div className="info__icon"> <div className="info__icon">
<svg <svg
stroke="currentColor" stroke="currentColor"
@ -22,10 +27,10 @@ export function Pokemon() {
</div> </div>
</div> </div>
<div className="image__container"> <div className="image__container">
<img src={charizard} alt="test" height={150} /> <img src={image} alt="test" height={150} />
</div> </div>
<div className="poke__name"> <div className="poke__name">
<h3>Charizard</h3> <h3>{name}</h3>
</div> </div>
</div> </div>
); );