+
+
+ 
+ Detalhes de Pokémon
+
+
+
+ {mainPokemon && secondaryPokemon && device === 'desktop' && (
+
+
+ )}
+
+ navigate(name)}
+ >
+ 
+
+ 
+
+ {name}
+
+
+ setCompareOpen(false)} />
+
+ );
+}
diff --git a/lootbox-frontend-challenge/src/hooks/debounce.ts b/lootbox-frontend-challenge/src/hooks/debounce.ts
new file mode 100644
index 000000000..766998a36
--- /dev/null
+++ b/lootbox-frontend-challenge/src/hooks/debounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = (value: string | null, delay = 500) => {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ }, [value, delay]);
+
+ return debouncedValue;
+};
diff --git a/lootbox-frontend-challenge/src/hooks/device.ts b/lootbox-frontend-challenge/src/hooks/device.ts
new file mode 100644
index 000000000..9278ff403
--- /dev/null
+++ b/lootbox-frontend-challenge/src/hooks/device.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import type { DeviceType } from '../models/types/device.type';
+
+export function useDevice(): DeviceType {
+ const [device, setDevice] = useState
+
+ {isMainComponent && (
+
+
+ )}
+
+ }
+ onClick={() => setCompareOpen(true)}
+ className="!border-none !bg-white/20 !text-white hover:!bg-white/30"
+ />
+
+ )}
+
+
+
+
+ + #{pokemon.id} {pokemon.name} +
+ {isMainComponent && ( +
+ 
+
+
+
+ {pokemon.types.map((t) => (
+
+ {t.type.name}
+
+ ))}
+
+
+ {pokemon.stats.map((s) => (
+
+
+
+
+ ))}
+
+
+ {s.stat.name}
+ {s.base_stat}
+
+
+
+ Altura: {(pokemon.height / 10).toFixed(1)} m
+ Peso: {(pokemon.weight / 10).toFixed(1)} kg
+
+
+ 
+
+ );
+}
diff --git a/lootbox-frontend-challenge/src/providers/ant-design.provider.tsx b/lootbox-frontend-challenge/src/providers/ant-design.provider.tsx
new file mode 100644
index 000000000..f956c3bcf
--- /dev/null
+++ b/lootbox-frontend-challenge/src/providers/ant-design.provider.tsx
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { ConfigProvider } from 'antd';
+
+export function AntDesignProvider({ children }: { children: ReactNode }) {
+ return
+ 404
+Ops! Pokémon não encontrado.
+ + + +
+
+ Explore e busque seus Pokémon favoritos
+