[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { Search, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import PokemonCard from "@/components/pokemon-card" import PokemonDetails from "@/components/pokemon-details" import { useToast } from "@/hooks/use-toast" interface Pokemon { id: number name: string sprites: { front_default: string other: { "official-artwork": { front_default: string } } } types: { type: { name: string } }[] stats: { base_stat: number stat: { name: string } }[] height: number weight: number } export default function Home() { const [searchQuery, setSearchQuery] = useState("") const [pokemon, setPokemon] = useState(null) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [caughtPokemon, setCaughtPokemon] = useState([]) const [activeTab, setActiveTab] = useState("search") const { toast } = useToast() // Load caught pokemon from localStorage on initial render useEffect(() => { const savedPokemon = localStorage.getItem("caughtPokemon") if (savedPokemon) { setCaughtPokemon(JSON.parse(savedPokemon)) } }, []) // Save caught pokemon to localStorage whenever it changes useEffect(() => { localStorage.setItem("caughtPokemon", JSON.stringify(caughtPokemon)) }, [caughtPokemon]) const searchPokemon = async () => { if (!searchQuery.trim()) return setLoading(true) setError("") setPokemon(null) try { const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${searchQuery.toLowerCase()}`) if (!response.ok) { throw new Error("Pokémon not found!") } const data = await response.json() setPokemon(data) } catch (err) { setError(err instanceof Error ? err.message : "Failed to fetch Pokémon") } finally { setLoading(false) } } const catchPokemon = () => { if (!pokemon) return // Check if already caught if (caughtPokemon.some((p) => p.id === pokemon.id)) { toast({ title: "Already caught!", description: `You already have ${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)} in your collection.`, variant: "destructive", }) return } // Add to caught pokemon setCaughtPokemon([...caughtPokemon, pokemon]) toast({ title: "Gotcha!", description: `${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)} was added to your collection!`, variant: "default", }) } const releasePokemon = (id: number) => { setCaughtPokemon(caughtPokemon.filter((p) => p.id !== id)) toast({ title: "Released!", description: "Pokémon was released back into the wild.", variant: "default", }) } const handleRandomPokemon = async () => { setLoading(true) setError("") setPokemon(null) try { // Get a random ID between 1 and 898 (number of Pokémon in the API) const randomId = Math.floor(Math.random() * 898) + 1 const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomId}`) if (!response.ok) { throw new Error("Failed to fetch random Pokémon") } const data = await response.json() setPokemon(data) setSearchQuery(data.name) } catch (err) { setError(err instanceof Error ? err.message : "Failed to fetch Pokémon") } finally { setLoading(false) } } return (

Pokémon Catcher

Search, discover, and catch Pokémon!

Search My Collection ({caughtPokemon.length})

setSearchQuery(e.target.value)} onKeyDown={(e) => e.key === "Enter" && searchPokemon()} className="flex-1" />

{loading &&

} {error && (

{error}

Try searching for a different Pokémon or check your spelling.

)} {pokemon && !loading && ( p.id === pokemon.id)} /> )} {caughtPokemon.length === 0 ? (

Your collection is empty!

) : (

{caughtPokemon.map((pokemon) => ( releasePokemon(pokemon.id)} /> ))}

)}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/pokemon-card.tsx" "use client" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { PokemonTypeColors } from "@/lib/pokemon-types" interface PokemonCardProps { pokemon: { id: number name: string sprites: { front_default: string other: { "official-artwork": { front_default: string } } } types: { type: { name: string } }[] } onRelease: () => void } export default function PokemonCard({ pokemon, onRelease }: PokemonCardProps) { const imageUrl = pokemon.sprites.other["official-artwork"].front_default || pokemon.sprites.front_default return (

#{pokemon.id}

{pokemon.name}

{pokemon.types.map((type) => ( {type.type.name} ))}

) } [V0_FILE]typescriptreact:file="components/pokemon-details.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { PokemonTypeColors } from "@/lib/pokemon-types" interface PokemonDetailsProps { pokemon: { id: number name: string sprites: { front_default: string other: { "official-artwork": { front_default: string } } } types: { type: { name: string } }[] stats: { base_stat: number stat: { name: string } }[] height: number weight: number } onCatch: () => void isCaught: boolean } export default function PokemonDetails({ pokemon, onCatch, isCaught }: PokemonDetailsProps) { const imageUrl = pokemon.sprites.other["official-artwork"].front_default || pokemon.sprites.front_default // Format stat names to be more readable const formatStatName = (name: string) => { const statNames: Record = { hp: "HP", attack: "Attack", defense: "Defense", "special-attack": "Sp. Atk", "special-defense": "Sp. Def", speed: "Speed", } return statNames[name] || name } return (

{pokemon.name}

#{pokemon.id}

{pokemon.types.map((type) => ( {type.type.name} ))}

Height:{" "} {(pokemon.height / 10).toFixed(1)}m

Weight:{" "} {(pokemon.weight / 10).toFixed(1)}kg

Base Stats

{pokemon.stats.map((stat) => (

{formatStatName(stat.stat.name)} {stat.base_stat}

))}

) } [V0_FILE]typescriptreact:file="lib/pokemon-types.ts" export const PokemonTypeColors = { normal: { background: "#A8A878", text: "#fff", }, fire: { background: "#F08030", text: "#fff", }, water: { background: "#6890F0", text: "#fff", }, electric: { background: "#F8D030", text: "#000", }, grass: { background: "#78C850", text: "#fff", }, ice: { background: "#98D8D8", text: "#000", }, fighting: { background: "#C03028", text: "#fff", }, poison: { background: "#A040A0", text: "#fff", }, ground: { background: "#E0C068", text: "#000", }, flying: { background: "#A890F0", text: "#fff", }, psychic: { background: "#F85888", text: "#fff", }, bug: { background: "#A8B820", text: "#fff", }, rock: { background: "#B8A038", text: "#fff", }, ghost: { background: "#705898", text: "#fff", }, dragon: { background: "#7038F8", text: "#fff", }, dark: { background: "#705848", text: "#fff", }, steel: { background: "#B8B8D0", text: "#000", }, fairy: { background: "#EE99AC", text: "#000", }, } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#EF4444", // Pokémon red foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config

About

About