test

registry-template/registry/new-york/complex-component/components/pokemon-card.tsx

@@ -0,0 +1,25 @@
+import { cache } from "react"
+import { getPokemon } from "@/registry/new-york/complex-component/lib/pokemon"
+import { Card, CardContent } from "@/components/ui/card"
+import { PokemonImage } from "@/registry/new-york/complex-component/components/pokemon-image"
+
+const cachedGetPokemon = cache(getPokemon)
+
+export async function PokemonCard({ name }: { name: string }) {
+  const pokemon = await cachedGetPokemon(name)
+
+  if (!pokemon) {
+    return null
+  }
+
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-center p-2">
+        <div>
+          <PokemonImage name={pokemon.name} number={pokemon.id} />
+        </div>
+        <div className="text-center font-medium">{pokemon.name}</div>
+      </CardContent>
+    </Card>
+  )
+}

registry-template/registry/new-york/complex-component/components/pokemon-image.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+/* eslint-disable @next/next/no-img-element */
+import { usePokemonImage } from "@/registry/new-york/complex-component/hooks/use-pokemon"
+
+export function PokemonImage({
+  name,
+  number,
+}: {
+  name: string
+  number: number
+}) {
+  const imageUrl = usePokemonImage(number)
+
+  if (!imageUrl) {
+    return null
+  }
+
+  return <img src={imageUrl} alt={name} />
+}