;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/assets/logo-dark.svg b/src/assets/logo-dark.svg
new file mode 100644
index 000000000..dd8202894
--- /dev/null
+++ b/src/assets/logo-dark.svg
@@ -0,0 +1,23 @@
+
diff --git a/src/assets/logo-light.svg b/src/assets/logo-light.svg
new file mode 100644
index 000000000..73284929d
--- /dev/null
+++ b/src/assets/logo-light.svg
@@ -0,0 +1,23 @@
+
diff --git a/src/components/ErrorAlert.tsx b/src/components/ErrorAlert.tsx
new file mode 100644
index 000000000..a2915a4bf
--- /dev/null
+++ b/src/components/ErrorAlert.tsx
@@ -0,0 +1,37 @@
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import { clearErrors } from '@/features/pokemon/pokemonSlice';
+import { Alert } from 'antd';
+import { useEffect } from 'react';
+
+export function ErrorAlert() {
+ const dispatch = useAppDispatch();
+ const errors = useAppSelector((state) => state.pokemon.errors);
+
+ const activeError = errors.list || errors.details || errors.type;
+
+ useEffect(() => {
+ if (activeError) {
+ const timer = setTimeout(() => {
+ dispatch(clearErrors());
+ }, 5000);
+
+ return () => clearTimeout(timer);
+ }
+ }, [activeError, dispatch]);
+
+ if (!activeError) return null;
+
+ return (
+
+ );
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 000000000..51c8e8386
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,5 @@
+import { Outlet } from 'react-router';
+
+export function Layout() {
+ return ;
+}
diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx
new file mode 100644
index 000000000..74b91a4df
--- /dev/null
+++ b/src/components/layouts/MainLayout.tsx
@@ -0,0 +1,21 @@
+import { Flex, Layout } from 'antd';
+import { Outlet } from 'react-router';
+
+const layoutStyle = {
+ overflow: 'hidden',
+ width: 'calc(50% - 20px)',
+ maxWidth: 'calc(50% - 20px)',
+ background: 'black',
+};
+
+export function MainLayout() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/hooks/usePokemon.ts b/src/features/hooks/usePokemon.ts
new file mode 100644
index 000000000..1d22840ed
--- /dev/null
+++ b/src/features/hooks/usePokemon.ts
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+
+import { clearSelected, fetchPokemonByName } from '../pokemon/pokemonSlice';
+
+export function usePokemon() {
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const dispatch = useAppDispatch();
+ const { selected: pokemon, loadingDetails } = useAppSelector(
+ (state) => state.pokemon
+ );
+
+ const fetchPokemonDetails = async (name: string) => {
+ try {
+ setModalOpen(true);
+ await dispatch(fetchPokemonByName(name)).unwrap();
+ } catch (error) {
+ console.log(error);
+ } finally {
+ }
+ };
+
+ const closeModal = () => {
+ setModalOpen(false);
+ dispatch(clearSelected());
+ };
+
+ return {
+ pokemon,
+ loadingDetails,
+ modalOpen,
+ fetchPokemonDetails,
+ closeModal,
+ };
+}
diff --git a/src/features/hooks/usePokemonList.ts b/src/features/hooks/usePokemonList.ts
new file mode 100644
index 000000000..2ac98bfba
--- /dev/null
+++ b/src/features/hooks/usePokemonList.ts
@@ -0,0 +1,93 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+
+import {
+ clearTypeFilter,
+ fetchPokemonByName,
+ fetchPokemons,
+ fetchPokemonsByType,
+} from '../pokemon/pokemonSlice';
+import type {
+ PokemonListItem,
+ PokemonTypeResponse,
+} from '../pokemon/pokemonTypes';
+
+function filterPokemons(
+ list: PokemonListItem[],
+ search: string
+): PokemonListItem[] {
+ if (!search.trim()) return list;
+
+ const term = search.toLowerCase().trim();
+
+ return list.filter((p) => {
+ const nameMatch = p.name.toLowerCase().includes(term);
+ const id = p.url.split('/').filter(Boolean).pop() ?? '';
+ const idMatch = id === term;
+
+ return nameMatch || idMatch;
+ });
+}
+
+export function usePokemonList() {
+ const [search, setSearch] = useState('');
+
+ const dispatch = useAppDispatch();
+ const { list, filteredByType, typeFilter, loadingList, error } =
+ useAppSelector((state) => state.pokemon);
+
+ useEffect(() => {
+ if (list.length === 0 && !typeFilter) {
+ dispatch(fetchPokemons());
+ }
+ }, [dispatch, list.length, typeFilter]);
+
+ useEffect(() => {
+ if (!search.trim() || typeFilter) return;
+
+ const term = search.toLowerCase().trim();
+ const found = list.some((p) => {
+ const id = p.url.split('/').filter(Boolean).pop() ?? '';
+ return p.name.toLowerCase().includes(term) || id === term;
+ });
+
+ if (!found) {
+ const debounce = setTimeout(() => {
+ dispatch(fetchPokemonByName(term));
+ }, 500); // aguarda o usuário parar de digitar
+
+ return () => clearTimeout(debounce);
+ }
+ }, [search, list, dispatch, typeFilter]);
+
+ // Handler para clicar no tipo
+ const handleTypeClick = (type: string) => {
+ if (typeFilter === type) {
+ // Se clicar no mesmo tipo, remove o filtro
+ dispatch(clearTypeFilter());
+ } else {
+ // Busca pokémons desse tipo
+ dispatch(fetchPokemonsByType(type));
+ setSearch(''); // Limpa busca por nome
+ }
+ };
+
+ // Usa lista filtrada por tipo OU lista completa
+ const baseList = typeFilter ? filteredByType : list;
+
+ const filteredList = useMemo(
+ () => filterPokemons(baseList, search),
+ [baseList, search]
+ );
+
+ return {
+ list: filteredList,
+ loadingList,
+ error,
+ search,
+ setSearch,
+ selectedType: typeFilter, // ← para NavBar saber qual tipo está ativo
+ onTypeClick: handleTypeClick, // ← callback para NavBar
+ };
+}
diff --git a/src/features/hooks/usePokemonPagination.ts b/src/features/hooks/usePokemonPagination.ts
new file mode 100644
index 000000000..ce0ba8770
--- /dev/null
+++ b/src/features/hooks/usePokemonPagination.ts
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+
+import { fetchPokemons } from '../pokemon/pokemonSlice';
+
+export function usePokemonPagination() {
+ const dispatch = useAppDispatch();
+
+ const { list, loadingList, pagination } = useAppSelector(
+ (state) => state.pokemon
+ );
+
+ useEffect(() => {
+ dispatch(fetchPokemons({ limit: 10, offset: 0 }));
+ }, [dispatch]);
+
+ const handlePageChange = (page: number, pageSize: number) => {
+ const offset = (page - 1) * pageSize;
+
+ dispatch(fetchPokemons({ limit: pageSize, offset }));
+ };
+
+ return {
+ listPagination: list,
+ loadingPagination: loadingList,
+ pagination: {
+ defaultCurrent: pagination.currentPage,
+ pageSize: pagination.pageSize,
+ total: pagination.count,
+ showSizeChanger: true,
+ pageSizeOptions: ['10', '20', '50', '100'],
+ onChange: handlePageChange,
+ },
+ };
+}
diff --git a/src/features/pokemon/components/PokemonCard.tsx b/src/features/pokemon/components/PokemonCard.tsx
new file mode 100644
index 000000000..21c446fa6
--- /dev/null
+++ b/src/features/pokemon/components/PokemonCard.tsx
@@ -0,0 +1,112 @@
+import { Image, Card, Flex, Typography } from 'antd';
+import { useState } from 'react';
+
+const { Text } = Typography;
+
+interface Props {
+ name: string;
+ url: string;
+ onOpenDetails: (id: string) => void;
+}
+
+export function PokemonCard({ name, url, onOpenDetails }: Props) {
+ const id = url.split('/').filter(Boolean).pop();
+ const [imageUrl, setImageUrl] = useState(
+ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/showdown/${id}.gif`
+ );
+ const [imageError, setImageError] = useState(0);
+
+ const handleImageError = () => {
+ if (imageError === 0) {
+ setImageUrl(
+ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`
+ );
+ setImageError(1);
+ } else {
+ setImageUrl('');
+ }
+ };
+
+ return (
+ onOpenDetails(id!)}
+ hoverable
+ style={{
+ background: 'linear-gradient(145deg, rgb(17, 17, 17), rgb(22, 22, 37))',
+ cursor: 'pointer',
+ border: 'none',
+ height: '100%',
+ }}
+ >
+
+
+ {imageUrl ? (
+
+ ) : (
+
+ ?
+
+ )}
+
+
+ 🔴 Fraco contra:
+
+
+ {typeDetails.damage_relations.double_damage_from.map((type) => (
+
+ {type.name}
+
+ ))}
+
+
+
+
+
+ 🟢 Forte contra:
+
+
+ {typeDetails.damage_relations.double_damage_to.map((type) => (
+
+ {type.name}
+
+ ))}
+
+
+
+
+
+ 🛡️ Resistente a:
+
+
+ {typeDetails.damage_relations.half_damage_from.map((type) => (
+
+ {type.name}
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/features/pokemon/pages/Details.tsx b/src/features/pokemon/pages/Details.tsx
new file mode 100644
index 000000000..363038eae
--- /dev/null
+++ b/src/features/pokemon/pages/Details.tsx
@@ -0,0 +1,34 @@
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import { useParams } from 'react-router';
+import { fetchPokemonByName } from '../pokemonSlice';
+import { useEffect } from 'react';
+
+export function PokemonDetails() {
+ const { name } = useParams();
+ const dispatch = useAppDispatch();
+
+ const { selected, loading, error } = useAppSelector((state) => state.pokemon);
+
+ useEffect(() => {
+ if (name) {
+ dispatch(fetchPokemonByName(name));
+ }
+ }, [name]);
+
+ if (loading) return Carregando...
;
+
+ if (error) return {error}
;
+
+ if (!selected) return null;
+
+ return (
+
+
{selected.name}
+
+
+
+
Altura: {selected.height}
+
Peso: {selected.weight}
+
+
+
+ ) : displayList.length === 0 ? (
+
+
+
+ ) : (
+ <>
+
+ {displayList.map((p, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+