+
+ );
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 000000000..bcb63686c
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,136 @@
+import { Button, Drawer, Menu, type MenuProps, Grid } from 'antd';
+import { CloseOutlined, MenuOutlined } from '@ant-design/icons';
+import { Link, useLocation } from 'react-router-dom';
+import { useMemo, useState } from 'react';
+import looqBoxLogo from '../../assets/icons/looqbox_logo.svg';
+
+const { useBreakpoint } = Grid;
+
+type MenuItem = Required
+
+
+
+
+
+ 
+
+
+ }
+ onClick={() => setOpen(true)}
+ type="text"
+ />
+
+
+
+
+
+
+ }
+ onClick={() => setOpen(false)}
+ aria-label="Close menu"
+ />
+
+
+
+
+
+ );
+}
diff --git a/src/components/PokemonSearch/PokemonSearchResults.tsx b/src/components/PokemonSearch/PokemonSearchResults.tsx
new file mode 100644
index 000000000..7a609c322
--- /dev/null
+++ b/src/components/PokemonSearch/PokemonSearchResults.tsx
@@ -0,0 +1,73 @@
+import { Alert, Empty, Skeleton, Space, Typography } from 'antd';
+import type { PokemonIndexItem } from '../../services/pokeapi';
+import { PokemonGrid } from '../PokemonGrid/PokemonGrid';
+import emptySearchImg from '../../assets/icons/search_empty_icon.svg';
+
+const { Title, Text } = Typography;
+
+type Props = {
+ title?: string;
+ loading: boolean;
+ error?: string | null;
+ items: PokemonIndexItem[];
+ showEmpty?: boolean;
+ extra?: React.ReactNode;
+ detailsPath: (name: string) => string;
+};
+
+export function SearchEmptyState() {
+ return (
+ + Start here or view the complete Pokédex. +
+
+
+
+
+
+
+
+
+
+
+ {padDex(d.id)}
+
+
+ {displayName}
+
+
+
+ {topTypes.map((t) => (
+
+
+ {species.status === 'loading' ? (
+
+ {description || 'No description available.'}
+
+ )}
+
+
+ Abilities
+
+
+
+
+
+
+
+ Height
+ {dmToMeters(d.height)}
+
+
+
+ Weight
+ {hgToKg(d.weight)}
+
+
+ {d.abilities.map((a) => (
+
+
+ {formatPokemonName(a.ability.name)}
+ {a.is_hidden ? ' (hidden)' : ''}
+
+ ))}
+
+
+
+
+ {names.map((name, index) => {
+ const id = getPokemonIdByName(name);
+
+ return (
+
+ );
+}
diff --git a/src/pages/PokemonDetails/components/StatsRings.tsx b/src/pages/PokemonDetails/components/StatsRings.tsx
new file mode 100644
index 000000000..0b4ea0fa7
--- /dev/null
+++ b/src/pages/PokemonDetails/components/StatsRings.tsx
@@ -0,0 +1,73 @@
+import { Progress, Typography } from 'antd';
+import { buildStatMap, statPercent, captureRatePercent } from '../utils';
+
+const { Title } = Typography;
+
+type Stat = {
+ base_stat: number;
+ stat: { name: string };
+};
+
+type Props = {
+ stats: Stat[];
+ captureRate: number | null;
+};
+
+export function StatsRings({ stats, captureRate }: Props) {
+ const statMap = buildStatMap(stats);
+
+ const hp = statMap.get('hp') ?? 0;
+ const atk = statMap.get('attack') ?? 0;
+ const def = statMap.get('defense') ?? 0;
+ const spa = statMap.get('special-attack') ?? 0;
+ const spd = statMap.get('special-defense') ?? 0;
+ const spe = statMap.get('speed') ?? 0;
+
+ return (
+ <>
+
+
+
+ );
+ })}
+ {formatPokemonName(name)}
+
+
+ {index < names.length - 1 && →
}
+
+
+
+
+
+ Capture Rate
+
+
+
+
+ );
+}
+
+type StatRingProps = {
+ label: string;
+ value: number;
+};
+
+function StatRing({ label, value }: StatRingProps) {
+ return (
+
+
+ );
+}
diff --git a/src/pages/PokemonDetails/utils.ts b/src/pages/PokemonDetails/utils.ts
new file mode 100644
index 000000000..e1062d02d
--- /dev/null
+++ b/src/pages/PokemonDetails/utils.ts
@@ -0,0 +1,29 @@
+export function clampPercent(v: number) {
+ return Math.max(0, Math.min(100, v));
+}
+
+export function statPercent(baseStat: number) {
+ return clampPercent(Math.round((baseStat / 255) * 100));
+}
+
+export function captureRatePercent(captureRate: number) {
+ return clampPercent(Math.round((captureRate / 255) * 100));
+}
+
+export function dmToMeters(dm: number) {
+ return `${(dm / 10).toFixed(1)}m`;
+}
+
+export function hgToKg(hg: number) {
+ return `${(hg / 10).toFixed(1)}kg`;
+}
+
+export function padDex(id: number) {
+ return `#${String(id).padStart(3, '0')}`;
+}
+
+export function buildStatMap(stats: Array<{ base_stat: number; stat: { name: string } }>) {
+ const map = new Map