Added Pokedex component
parent
4a8ad0256b
commit
3139f53236
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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} />;
|
||||||
|
}
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue