A complex component demonstrating hooks, libs, and multiple files with Pokemon API integration.

Complex Component

A complex component demonstrating multi-file structure with hooks, libs, and async server components. Uses the Pokemon API to display a grid of Pokemon cards.

Preview

Open in

Loading preview...

Installation

Terminal

$npx shadcn@latest add @vandoko/complex-component

Usage

import { PokemonCard } from "@/components/complex-component/components/pokemon-card";
import { getPokemonList } from "@/components/complex-component/lib/pokemon";

export default async function Page() {
  const pokemons = await getPokemonList({ limit: 12 });

  return (
    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
      {pokemons?.results.map((p) => (
        <PokemonCard key={p.name} name={p.name} />
      ))}
    </div>
  );
}

Features

Multi-File Structure - Demonstrates components, hooks, and libs organization
Async Server Components - Uses React Server Components with async data fetching
API Integration - Fetches data from Pokemon API with Zod validation
Custom Hooks - Example hook for image URL generation
Caching - Uses React's cache() for request deduplication

File Structure

complex-component/
├── page.tsx              # Main page component
├── components/
│   ├── pokemon-card.tsx  # Card component (async)
│   └── pokemon-image.tsx # Image component (client)
├── hooks/
│   └── use-pokemon.ts    # Custom hook
└── lib/
    └── pokemon.ts        # API functions with Zod