7 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/components/PokemonGrid.tsx:
--------------------------------------------------------------------------------
1 | import { PokemonDetail } from "@/routes";
2 |
3 | import { PokemonCard } from "./PokemonCard";
4 | import { Pokemon } from "@/types";
5 |
6 | export function PokemonGrid({ pokemon }: { pokemon: Pokemon[] }) {
7 | return (
8 |
8 |
16 |
17 |
19 | {pokemon.name}
18 |
9 | {pokemon.map((p) => (
10 |
11 |
13 | ))}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/components/PokemonInfo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import { useEffect, useState } from "react";
4 | import { Pokemon } from "@/types";
5 |
6 | export function PokemonInfo({
7 | id,
8 | pokemon: initialPokemon,
9 | }: {
10 | id: number;
11 | pokemon?: Pokemon;
12 | }) {
13 | const [data, setData] = useState
27 |
59 | ) : null;
60 | }
61 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/components/SelectableGrid.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 |
4 | import { Pokemon } from "@/types";
5 |
6 | import { PokemonDetail } from "@/routes";
7 |
8 | import { PokemonCard } from "./PokemonCard";
9 | import { PokemonInfo } from "./PokemonInfo";
10 |
11 | export function SelectableGrid({ pokemon }: { pokemon: Pokemon[] }) {
12 | const [selected, setSelected] = useState
28 |
58 |
29 |
37 |
38 |
39 |
57 | {pokemon.name}
40 |
41 |
44 | Species
42 | {pokemon.species}
43 |
45 |
48 | Types
46 | {pokemon.types}
47 |
49 |
52 | Stats
50 | {pokemon.stats}
51 |
53 |
56 | Moves
54 | {pokemon.moves}
55 |
16 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProNextJS/declarative-routing/5d933852b072461eea9aa266cb55d0a0f1ee01f7/examples/nextjs/finished/src/app/favicon.ico
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 |
10 | --card: 0 0% 100%;
11 | --card-foreground: 222.2 84% 4.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 222.2 84% 4.9%;
15 |
16 | --primary: 222.2 47.4% 11.2%;
17 | --primary-foreground: 210 40% 98%;
18 |
19 | --secondary: 210 40% 96.1%;
20 | --secondary-foreground: 222.2 47.4% 11.2%;
21 |
22 | --muted: 210 40% 96.1%;
23 | --muted-foreground: 215.4 16.3% 46.9%;
24 |
25 | --accent: 210 40% 96.1%;
26 | --accent-foreground: 222.2 47.4% 11.2%;
27 |
28 | --destructive: 0 84.2% 60.2%;
29 | --destructive-foreground: 210 40% 98%;
30 |
31 | --border: 214.3 31.8% 91.4%;
32 | --input: 214.3 31.8% 91.4%;
33 | --ring: 222.2 84% 4.9%;
34 |
35 | --radius: 0.5rem;
36 | }
37 |
38 | .dark {
39 | --background: 222.2 84% 4.9%;
40 | --foreground: 210 40% 98%;
41 |
42 | --card: 222.2 84% 4.9%;
43 | --card-foreground: 210 40% 98%;
44 |
45 | --popover: 222.2 84% 4.9%;
46 | --popover-foreground: 210 40% 98%;
47 |
48 | --primary: 210 40% 98%;
49 | --primary-foreground: 222.2 47.4% 11.2%;
50 |
51 | --secondary: 217.2 32.6% 17.5%;
52 | --secondary-foreground: 210 40% 98%;
53 |
54 | --muted: 217.2 32.6% 17.5%;
55 | --muted-foreground: 215 20.2% 65.1%;
56 |
57 | --accent: 217.2 32.6% 17.5%;
58 | --accent-foreground: 210 40% 98%;
59 |
60 | --destructive: 0 62.8% 30.6%;
61 | --destructive-foreground: 210 40% 98%;
62 |
63 | --border: 217.2 32.6% 17.5%;
64 | --input: 217.2 32.6% 17.5%;
65 | --ring: 212.7 26.8% 83.9%;
66 | }
67 | }
68 |
69 | @layer base {
70 | * {
71 | @apply border-border;
72 | }
73 | body {
74 | @apply bg-background text-foreground;
75 | }
76 | }
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 |
4 | import { Home, Search } from "@/routes";
5 |
6 | import "./globals.css";
7 |
8 | const inter = Inter({ subsets: ["latin"] });
9 |
10 | export const metadata: Metadata = {
11 | title: "Create Next App",
12 | description: "Generated by create next app"
13 | };
14 |
15 | export default function RootLayout({
16 | children
17 | }: Readonly<{
18 | children: React.ReactNode;
19 | }>) {
20 | return (
21 |
22 |
23 |
17 | {pokemon.map((p) => (
18 |
23 | {selected && (
24 | setSelected(p)} key={p.id}>
19 |
21 | ))}
22 |
25 |
26 |
28 |
29 | )}
30 | {children}
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/page.info.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const Route = {
4 | name: "Home",
5 | params: z.object({
6 | })
7 | };
8 |
9 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { getFullPokemon } from "@/pokemon";
2 |
3 | import { SelectableGrid } from "@/app/components/SelectableGrid";
4 |
5 | export default async function Home() {
6 | const pokemon = await getFullPokemon();
7 |
8 | return (
9 |
28 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/search/page.info.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const Route = {
4 | name: "Search",
5 | params: z.object({}),
6 | search: z.object({
7 | q: z.string().optional(),
8 | limit: z.coerce.number().optional()
9 | })
10 | };
11 |
--------------------------------------------------------------------------------
/examples/nextjs/finished/src/app/search/page.tsx:
--------------------------------------------------------------------------------
1 | import { getFullPokemon } from "@/pokemon";
2 |
3 | import SearchList from "./SearchList";
4 |
5 | export const dynamic = "force-dynamic";
6 |
7 | export default async function SearchPage({
8 | searchParams
9 | }: {
10 | searchParams: { q?: string };
11 | }) {
12 | const pokemon = await getFullPokemon(10, searchParams.q);
13 |
14 | return (
15 |
29 | setQuery(e.target.value)}
34 | onKeyUp={(e) => {
35 | if (e.key !== "Enter") return;
36 | search();
37 | }}
38 | />
39 |
47 |
48 |
7 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/components/PokemonGrid.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { PokemonCard } from "./PokemonCard";
4 | import { Pokemon } from "@/types";
5 |
6 | export function PokemonGrid({ pokemon }: { pokemon: Pokemon[] }) {
7 | return (
8 |
8 |
16 |
17 |
19 | {pokemon.name}
18 |
9 | {pokemon.map((p) => (
10 |
11 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/components/PokemonInfo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import { useEffect, useState } from "react";
4 | import { Pokemon } from "@/types";
5 |
6 | export function PokemonInfo({
7 | id,
8 | pokemon: initialPokemon,
9 | }: {
10 | id: number;
11 | pokemon?: Pokemon;
12 | }) {
13 | const [data, setData] = useState
27 |
59 | ) : null;
60 | }
61 |
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/components/SelectableGrid.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import Link from "next/link";
4 |
5 | import { Pokemon } from "@/types";
6 |
7 | import { PokemonCard } from "./PokemonCard";
8 | import { PokemonInfo } from "./PokemonInfo";
9 |
10 | export function SelectableGrid({ pokemon }: { pokemon: Pokemon[] }) {
11 | const [selected, setSelected] = useState
28 |
58 |
29 |
37 |
38 |
39 |
57 | {pokemon.name}
40 |
41 |
44 | Species
42 | {pokemon.species}
43 |
45 |
48 | Types
46 | {pokemon.types}
47 |
49 |
52 | Stats
50 | {pokemon.stats}
51 |
53 |
56 | Moves
54 | {pokemon.moves}
55 |
15 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProNextJS/declarative-routing/5d933852b072461eea9aa266cb55d0a0f1ee01f7/examples/nextjs/starter/src/app/favicon.ico
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 |
10 | --card: 0 0% 100%;
11 | --card-foreground: 222.2 84% 4.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 222.2 84% 4.9%;
15 |
16 | --primary: 222.2 47.4% 11.2%;
17 | --primary-foreground: 210 40% 98%;
18 |
19 | --secondary: 210 40% 96.1%;
20 | --secondary-foreground: 222.2 47.4% 11.2%;
21 |
22 | --muted: 210 40% 96.1%;
23 | --muted-foreground: 215.4 16.3% 46.9%;
24 |
25 | --accent: 210 40% 96.1%;
26 | --accent-foreground: 222.2 47.4% 11.2%;
27 |
28 | --destructive: 0 84.2% 60.2%;
29 | --destructive-foreground: 210 40% 98%;
30 |
31 | --border: 214.3 31.8% 91.4%;
32 | --input: 214.3 31.8% 91.4%;
33 | --ring: 222.2 84% 4.9%;
34 |
35 | --radius: 0.5rem;
36 | }
37 |
38 | .dark {
39 | --background: 222.2 84% 4.9%;
40 | --foreground: 210 40% 98%;
41 |
42 | --card: 222.2 84% 4.9%;
43 | --card-foreground: 210 40% 98%;
44 |
45 | --popover: 222.2 84% 4.9%;
46 | --popover-foreground: 210 40% 98%;
47 |
48 | --primary: 210 40% 98%;
49 | --primary-foreground: 222.2 47.4% 11.2%;
50 |
51 | --secondary: 217.2 32.6% 17.5%;
52 | --secondary-foreground: 210 40% 98%;
53 |
54 | --muted: 217.2 32.6% 17.5%;
55 | --muted-foreground: 215 20.2% 65.1%;
56 |
57 | --accent: 217.2 32.6% 17.5%;
58 | --accent-foreground: 210 40% 98%;
59 |
60 | --destructive: 0 62.8% 30.6%;
61 | --destructive-foreground: 210 40% 98%;
62 |
63 | --border: 217.2 32.6% 17.5%;
64 | --input: 217.2 32.6% 17.5%;
65 | --ring: 212.7 26.8% 83.9%;
66 | }
67 | }
68 |
69 | @layer base {
70 | * {
71 | @apply border-border;
72 | }
73 | body {
74 | @apply bg-background text-foreground;
75 | }
76 | }
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import Link from "next/link";
4 |
5 | import "./globals.css";
6 |
7 | const inter = Inter({ subsets: ["latin"] });
8 |
9 | export const metadata: Metadata = {
10 | title: "Create Next App",
11 | description: "Generated by create next app",
12 | };
13 |
14 | export default function RootLayout({
15 | children,
16 | }: Readonly<{
17 | children: React.ReactNode;
18 | }>) {
19 | return (
20 |
21 |
22 |
16 | {pokemon.map((p) => (
17 |
22 | {selected && (
23 | setSelected(p)} key={p.id}>
18 |
20 | ))}
21 |
24 |
25 |
28 | )}
29 | {children}
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { getFullPokemon } from "@/pokemon";
2 |
3 | import { SelectableGrid } from "@/app/components/SelectableGrid";
4 |
5 | export default async function Home() {
6 | const pokemon = await getFullPokemon();
7 |
8 | return (
9 |
27 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/examples/nextjs/starter/src/app/search/page.tsx:
--------------------------------------------------------------------------------
1 | import { getFullPokemon } from "@/pokemon";
2 |
3 | import SearchList from "./SearchList";
4 |
5 | export const dynamic = "force-dynamic";
6 |
7 | export default async function SearchPage({
8 | searchParams,
9 | }: {
10 | searchParams: { q?: string };
11 | }) {
12 | const pokemon = await getFullPokemon(10, searchParams.q);
13 |
14 | return (
15 |
28 | setQuery(e.target.value)}
33 | onKeyUp={(e) => {
34 | if (e.key !== "Enter") return;
35 | search();
36 | }}
37 | />
38 |
46 |
47 |
7 |
20 | );
21 | });
22 |
--------------------------------------------------------------------------------
/examples/qwikcity/finished/src/components/PokemonGrid.tsx:
--------------------------------------------------------------------------------
1 | import { PokemonCard } from "./PokemonCard";
2 | import type { Pokemon } from "~/types";
3 | import { component$ } from "@builder.io/qwik";
4 | import { PokemonPokemonId } from "~/declarativeRoutes";
5 |
6 | export const PokemonGrid = component$<{ pokemon: Pokemon[] }>(({ pokemon }) => {
7 | return (
8 |
8 | 
15 |
16 |
17 |
19 | {pokemon.name}
18 |
9 | {pokemon.map((p) => (
10 |
11 |
13 | ))}
14 |
15 | );
16 | });
17 |
--------------------------------------------------------------------------------
/examples/qwikcity/finished/src/components/PokemonInfo.tsx:
--------------------------------------------------------------------------------
1 | import type { Pokemon } from "~/types";
2 | import { component$, useSignal, useTask$ } from "@builder.io/qwik";
3 | import { useLocation } from "@builder.io/qwik-city";
4 |
5 | export const PokemonInfo = component$<{
6 | id: number;
7 | pokemon?: Pokemon;
8 | }>(({ id, pokemon: initialPokemon }) => {
9 | const pokemonData = useSignal
25 |
57 | ) : null;
58 | });
59 |
--------------------------------------------------------------------------------
/examples/qwikcity/finished/src/components/SelectableGrid.tsx:
--------------------------------------------------------------------------------
1 | import { component$, useSignal } from "@builder.io/qwik";
2 | import { PokemonPokemonId } from "~/declarativeRoutes";
3 | import type { Pokemon } from "~/types";
4 | import { PokemonCard } from "./PokemonCard";
5 | import { PokemonInfo } from "./PokemonInfo";
6 |
7 | export default component$<{ pokemon: Pokemon[] }>(({ pokemon }) => {
8 | const selectedId = useSignal
26 |
56 |
27 |
34 |
35 |
36 |
37 |
55 | {pokemon.name}
38 |
39 |
42 | Species
40 | {pokemon.species}
41 |
43 |
46 | Types
44 | {pokemon.types}
45 |
47 |
50 | Stats
48 | {pokemon.stats}
49 |
51 |
54 | Moves
52 | {pokemon.moves}
53 |
12 |
27 | );
28 | });
29 |
--------------------------------------------------------------------------------
/examples/qwikcity/finished/src/components/router-head/router-head.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from "@builder.io/qwik";
2 | import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
3 |
4 | /**
5 | * The RouterHead component is placed inside of the document `` element.
6 | */
7 | export const RouterHead = component$(() => {
8 | const head = useDocumentHead();
9 | const loc = useLocation();
10 |
11 | return (
12 | <>
13 |
13 | {pokemon.map((p) => (
14 |
19 | {selectedId.value && (
20 | (selectedId.value = p.id)} key={p.id}>
15 |
17 | ))}
18 |
21 |
22 |
24 |
25 | )}
26 |
26 |
28 |
29 | );
30 | });
31 |
--------------------------------------------------------------------------------
/examples/qwikcity/finished/src/routes/pokemon/[pokemonId]/index.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from "@builder.io/qwik";
2 | import { routeLoader$ } from "@builder.io/qwik-city";
3 | import { PokemonInfo } from "~/components/PokemonInfo";
4 | import { PokemonPokemonId } from "~/declarativeRoutes";
5 | import { useParams } from "~/declarativeRoutes/hooks";
6 | import { getPokemon } from "~/pokemon";
7 |
8 | export const useGetPokemon = routeLoader$(async ({ params }) => {
9 | return getPokemon(Number(params.pokemonId));
10 | });
11 |
12 | export default component$(() => {
13 | const { pokemonId } = useParams(PokemonPokemonId);
14 | const pokemon = useGetPokemon();
15 |
16 | return (
17 |
27 |
48 | );
49 | });
50 |
--------------------------------------------------------------------------------
/examples/qwikcity/finished/src/routes/search/index.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from "@builder.io/qwik";
2 | import { useGetFullPokemon } from "~/routes/index";
3 | import SearchList from "./SearchList";
4 | export { useGetFullPokemon } from "~/routes/index";
5 |
6 | export default component$(() => {
7 | const pokemon = useGetFullPokemon();
8 |
9 | return (
10 |
28 | {
33 | if (e.key !== "Enter") {
34 | return;
35 | }
36 | search();
37 | }}
38 | />
39 |
45 |
46 |
7 |
20 | );
21 | });
22 |
--------------------------------------------------------------------------------
/examples/qwikcity/starter/src/components/PokemonGrid.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@builder.io/qwik-city";
2 | import { PokemonCard } from "./PokemonCard";
3 | import type { Pokemon } from "~/types";
4 | import { component$ } from "@builder.io/qwik";
5 |
6 | export const PokemonGrid = component$<{ pokemon: Pokemon[] }>(({ pokemon }) => {
7 | return (
8 |
8 |
15 |
16 |
17 |
19 | {pokemon.name}
18 |
9 | {pokemon.map((p) => (
10 |
11 |
15 | );
16 | });
17 |
--------------------------------------------------------------------------------
/examples/qwikcity/starter/src/components/PokemonInfo.tsx:
--------------------------------------------------------------------------------
1 | import type { Pokemon } from "~/types";
2 | import { component$, useSignal, useTask$ } from "@builder.io/qwik";
3 | import { useLocation } from "@builder.io/qwik-city";
4 |
5 | export const PokemonInfo = component$<{
6 | id: number;
7 | pokemon?: Pokemon;
8 | }>(({ id, pokemon: initialPokemon }) => {
9 | const pokemonData = useSignal
25 |
57 | ) : null;
58 | });
59 |
--------------------------------------------------------------------------------
/examples/qwikcity/starter/src/components/SelectableGrid.tsx:
--------------------------------------------------------------------------------
1 | import { component$, useSignal } from "@builder.io/qwik";
2 | import { Link } from "@builder.io/qwik-city";
3 | import type { Pokemon } from "~/types";
4 | import { PokemonCard } from "./PokemonCard";
5 | import { PokemonInfo } from "./PokemonInfo";
6 |
7 | export default component$<{ pokemon: Pokemon[] }>(({ pokemon }) => {
8 | const selectedId = useSignal
26 |
56 |
27 |
34 |
35 |
36 |
37 |
55 | {pokemon.name}
38 |
39 |
42 | Species
40 | {pokemon.species}
41 |
43 |
46 | Types
44 | {pokemon.types}
45 |
47 |
50 | Stats
48 | {pokemon.stats}
49 |
51 |
54 | Moves
52 | {pokemon.moves}
53 |
12 |
27 | );
28 | });
29 |
--------------------------------------------------------------------------------
/examples/qwikcity/starter/src/components/router-head/router-head.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from "@builder.io/qwik";
2 | import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
3 |
4 | /**
5 | * The RouterHead component is placed inside of the document `` element.
6 | */
7 | export const RouterHead = component$(() => {
8 | const head = useDocumentHead();
9 | const loc = useLocation();
10 |
11 | return (
12 | <>
13 |
13 | {pokemon.map((p) => (
14 |
19 | {selectedId.value && (
20 | (selectedId.value = p.id)} key={p.id}>
15 |
17 | ))}
18 |
21 |
22 |
25 | )}
26 |
29 |
31 |
32 | );
33 | });
34 |
--------------------------------------------------------------------------------
/examples/qwikcity/starter/src/routes/pokemon/[pokemonId]/index.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from "@builder.io/qwik";
2 | import { routeLoader$, useLocation } from "@builder.io/qwik-city";
3 | import { PokemonInfo } from "~/components/PokemonInfo";
4 | import { getPokemon } from "~/pokemon";
5 |
6 | export const useGetPokemon = routeLoader$(async ({ params }) => {
7 | return getPokemon(Number(params.pokemonId));
8 | });
9 |
10 | export default component$(() => {
11 | const location = useLocation();
12 | const pokemonId = location.params.pokemonId;
13 |
14 | const pokemon = useGetPokemon();
15 |
16 | return (
17 |
26 |
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/examples/qwikcity/starter/src/routes/search/index.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from "@builder.io/qwik";
2 | import { useGetFullPokemon } from "~/routes/index";
3 | import SearchList from "./SearchList";
4 | export { useGetFullPokemon } from "~/routes/index";
5 |
6 | export default component$(() => {
7 | const pokemon = useGetFullPokemon();
8 |
9 | return (
10 |
27 | {
32 | if (e.key !== "Enter") {
33 | return;
34 | }
35 | search();
36 | }}
37 | />
38 |
44 |
45 |
6 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/examples/react-router/finished/src/components/PokemonGrid.tsx:
--------------------------------------------------------------------------------
1 | import { PokemonDetail } from "@/routeTable";
2 |
3 | import { PokemonCard } from "./PokemonCard";
4 | import { Pokemon } from "@/types";
5 |
6 | export function PokemonGrid({ pokemon }: { pokemon: Pokemon[] }) {
7 | return (
8 |
7 |
14 |
15 |
16 |
18 | {pokemon.name}
17 |
9 | {pokemon.map((p) => (
10 |
11 |
13 | ))}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/react-router/finished/src/components/PokemonInfo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useEffect, useState } from "react";
3 |
4 | import { Pokemon } from "@/types";
5 | import { getPokemon } from "@/pokemon";
6 |
7 | export function PokemonInfo({
8 | id,
9 | pokemon: initialPokemon,
10 | }: {
11 | id: number;
12 | pokemon?: Pokemon;
13 | }) {
14 | const [data, setData] = useState
28 |
60 | ) : null;
61 | }
62 |
--------------------------------------------------------------------------------
/examples/react-router/finished/src/components/SearchList.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import { useSearchParams } from "react-router-dom";
4 |
5 | import { Input } from "@/components/ui/input";
6 | import { Pokemon } from "@/types";
7 | import { PokemonGrid } from "@/components/PokemonGrid";
8 | import { getFullPokemon } from "@/pokemon";
9 |
10 | export function SearchList({
11 | pokemon: initialPokemon,
12 | }: {
13 | pokemon: Pokemon[];
14 | }) {
15 | const [params] = useSearchParams();
16 | const [query, setQuery] = useState(params?.get("q") ?? "");
17 | const [pokemon, setPokemon] = useState(initialPokemon);
18 |
19 | const search = async () => {
20 | const pokemon = await getFullPokemon(10, query);
21 | setPokemon(pokemon);
22 | };
23 |
24 | return (
25 |
29 |
59 |
30 |
37 |
38 |
39 |
40 |
58 | {pokemon.name}
41 |
42 |
45 | Species
43 | {pokemon.species}
44 |
46 |
49 | Types
47 | {pokemon.types}
48 |
50 |
53 | Stats
51 | {pokemon.stats}
52 |
54 |
57 | Moves
55 | {pokemon.moves}
56 |
26 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/examples/react-router/finished/src/components/SelectableGrid.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import { PokemonDetail } from "@/routeTable";
4 |
5 | import { Pokemon } from "@/types";
6 |
7 | import { PokemonCard } from "./PokemonCard";
8 | import { PokemonInfo } from "./PokemonInfo";
9 |
10 | export function SelectableGrid({ pokemon }: { pokemon: Pokemon[] }) {
11 | const [selected, setSelected] = useState
27 | setQuery(e.target.value)}
32 | onKeyUp={(e) => {
33 | if (e.key !== "Enter") return;
34 | search();
35 | }}
36 | />
37 |
45 |
46 |
15 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/react-router/finished/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes
16 | {pokemon.map((p) => (
17 |
22 | {selected && (
23 | setSelected(p)} key={p.id}>
18 |
20 | ))}
21 |
24 |
25 |
27 |
28 | )}
29 |
12 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/react-router/finished/src/pokemon.ts:
--------------------------------------------------------------------------------
1 | import { Pokemon } from "./types";
2 |
3 | function upperCaseFirstLetter(string: string) {
4 | return string.charAt(0).toUpperCase() + string.slice(1);
5 | }
6 |
7 | function summarizePokemon(pokemon: any): Pokemon {
8 | return {
9 | name: upperCaseFirstLetter(pokemon.name),
10 | id: pokemon.id,
11 | image:
12 | pokemon.sprites?.other?.["official-artwork"]?.front_default ||
13 | pokemon.sprites.front_default,
14 | species: pokemon.species.name,
15 | types: pokemon.types
16 | .slice(0, 10)
17 | .map((s: any) => s.type.name)
18 | .join(", "),
19 | stats: pokemon.stats
20 | .slice(0, 10)
21 | .map((s: any) => `${s.stat.name}: ${s.base_stat}`)
22 | .join(", "),
23 | moves: pokemon.moves
24 | .slice(0, 10)
25 | .map((m: any) => m.move.name)
26 | .join(", "),
27 | };
28 | }
29 |
30 | export async function getFullPokemon(
31 | limit: number = 10,
32 | q?: string
33 | ): Promise
6 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/examples/react-router/starter/src/components/PokemonGrid.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | import { PokemonCard } from "./PokemonCard";
4 | import { Pokemon } from "@/types";
5 |
6 | export function PokemonGrid({ pokemon }: { pokemon: Pokemon[] }) {
7 | return (
8 |
7 |
14 |
15 |
16 |
18 | {pokemon.name}
17 |
9 | {pokemon.map((p) => (
10 |
11 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/react-router/starter/src/components/PokemonInfo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useEffect, useState } from "react";
3 |
4 | import { Pokemon } from "@/types";
5 | import { getPokemon } from "@/pokemon";
6 |
7 | export function PokemonInfo({
8 | id,
9 | pokemon: initialPokemon,
10 | }: {
11 | id: number;
12 | pokemon?: Pokemon;
13 | }) {
14 | const [data, setData] = useState
28 |
60 | ) : null;
61 | }
62 |
--------------------------------------------------------------------------------
/examples/react-router/starter/src/components/SearchList.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import { useSearchParams } from "react-router-dom";
4 |
5 | import { Input } from "@/components/ui/input";
6 | import { Pokemon } from "@/types";
7 | import { PokemonGrid } from "@/components/PokemonGrid";
8 | import { getFullPokemon } from "@/pokemon";
9 |
10 | export function SearchList({
11 | pokemon: initialPokemon,
12 | }: {
13 | pokemon: Pokemon[];
14 | }) {
15 | const [params] = useSearchParams();
16 | const [query, setQuery] = useState(params?.get("q") ?? "");
17 | const [pokemon, setPokemon] = useState(initialPokemon);
18 |
19 | const search = async () => {
20 | const pokemon = await getFullPokemon(10, query);
21 | setPokemon(pokemon);
22 | };
23 |
24 | return (
25 |
29 |
59 |
30 |
37 |
38 |
39 |
40 |
58 | {pokemon.name}
41 |
42 |
45 | Species
43 | {pokemon.species}
44 |
46 |
49 | Types
47 | {pokemon.types}
48 |
50 |
53 | Stats
51 | {pokemon.stats}
52 |
54 |
57 | Moves
55 | {pokemon.moves}
56 |
26 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/examples/react-router/starter/src/components/SelectableGrid.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import { Link } from "react-router-dom";
4 |
5 | import { Pokemon } from "@/types";
6 |
7 | import { PokemonCard } from "./PokemonCard";
8 | import { PokemonInfo } from "./PokemonInfo";
9 |
10 | export function SelectableGrid({ pokemon }: { pokemon: Pokemon[] }) {
11 | const [selected, setSelected] = useState
27 | setQuery(e.target.value)}
32 | onKeyUp={(e) => {
33 | if (e.key !== "Enter") return;
34 | search();
35 | }}
36 | />
37 |
45 |
46 |
15 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/react-router/starter/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes
16 | {pokemon.map((p) => (
17 |
22 | {selected && (
23 | setSelected(p)} key={p.id}>
18 |
20 | ))}
21 |
24 |
25 |
28 | )}
29 |
15 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/examples/react-router/starter/src/pokemon.ts:
--------------------------------------------------------------------------------
1 | import { Pokemon } from "./types";
2 |
3 | function upperCaseFirstLetter(string: string) {
4 | return string.charAt(0).toUpperCase() + string.slice(1);
5 | }
6 |
7 | function summarizePokemon(pokemon: any): Pokemon {
8 | return {
9 | name: upperCaseFirstLetter(pokemon.name),
10 | id: pokemon.id,
11 | image:
12 | pokemon.sprites?.other?.["official-artwork"]?.front_default ||
13 | pokemon.sprites.front_default,
14 | species: pokemon.species.name,
15 | types: pokemon.types
16 | .slice(0, 10)
17 | .map((s: any) => s.type.name)
18 | .join(", "),
19 | stats: pokemon.stats
20 | .slice(0, 10)
21 | .map((s: any) => `${s.stat.name}: ${s.base_stat}`)
22 | .join(", "),
23 | moves: pokemon.moves
24 | .slice(0, 10)
25 | .map((m: any) => m.move.name)
26 | .join(", "),
27 | };
28 | }
29 |
30 | export async function getFullPokemon(
31 | limit: number = 10,
32 | q?: string
33 | ): Promise