this repo has no description
pagingation null check
+91
-118
+21
src/components/ui/input.tsx
+21
src/components/ui/input.tsx
···
1
+
import type * as React from "react";
2
+
3
+
import { cn } from "~/lib/utils";
4
+
5
+
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6
+
return (
7
+
<input
8
+
type={type}
9
+
data-slot="input"
10
+
className={cn(
11
+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14
+
className,
15
+
)}
16
+
{...props}
17
+
/>
18
+
);
19
+
}
20
+
21
+
export { Input };
+8
-30
src/routes/basic.tsx
+8
-30
src/routes/basic.tsx
···
1
1
import { useSuspenseQuery } from "@tanstack/react-query";
2
-
import { Link } from "@tanstack/react-router";
3
-
import { buttonVariants } from "~/components/ui/button";
4
-
5
2
import { useServerFn } from "@tanstack/react-start";
6
3
import * as v from "valibot";
4
+
import { PaginationNav } from "~/components/pagination-nav";
7
5
import {
8
6
Table,
9
7
TableBody,
···
12
10
TableHeader,
13
11
TableRow,
14
12
} from "~/components/ui/table";
15
-
import { cn } from "~/lib/utils";
16
13
import {
17
14
POKEMON_LIMIT,
18
15
getPokemonListQueryKey,
···
38
35
});
39
36
40
37
return (
41
-
<div className="p-4">
38
+
<main className="p-4">
42
39
<h1 className="text-2xl font-bold mb-4">
43
40
National Pokédex: Pokémon {currentOffset + 1}-
44
41
{currentOffset + POKEMON_LIMIT}
···
70
67
))}
71
68
</TableBody>
72
69
</Table>
73
-
<div className="flex justify-center gap-4 mt-4">
74
-
<Link
75
-
to="/basic"
76
-
className={buttonVariants({
77
-
variant: "outline",
78
-
className: cn(!data.prevOffset && "opacity-50 cursor-not-allowed"),
79
-
})}
80
-
search={{ offset: Number(data.prevOffset) }}
81
-
disabled={!data.prevOffset}
82
-
>
83
-
Previous
84
-
</Link>
85
-
<Link
86
-
to="/basic"
87
-
search={{ offset: Number(data.nextOffset) }}
88
-
className={buttonVariants({
89
-
variant: "outline",
90
-
className: cn(!data.nextOffset && "opacity-50 cursor-not-allowed"),
91
-
})}
92
-
disabled={!data.nextOffset}
93
-
>
94
-
Next
95
-
</Link>
96
-
</div>
97
-
</div>
70
+
<PaginationNav
71
+
prevOffset={data.prevOffset ?? undefined}
72
+
nextOffset={data.nextOffset ?? undefined}
73
+
to="/basic"
74
+
/>
75
+
</main>
98
76
);
99
77
}
+6
-30
src/routes/intent-preloading.tsx
+6
-30
src/routes/intent-preloading.tsx
···
1
1
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
2
-
import { Link } from "@tanstack/react-router";
3
-
import { buttonVariants } from "~/components/ui/button";
4
-
5
2
import { useServerFn } from "@tanstack/react-start";
6
3
import * as v from "valibot";
4
+
import { PaginationNav } from "~/components/pagination-nav";
7
5
import {
8
6
Table,
9
7
TableBody,
···
12
10
TableHeader,
13
11
TableRow,
14
12
} from "~/components/ui/table";
15
-
import { cn } from "~/lib/utils";
16
13
import {
17
14
POKEMON_LIMIT,
18
15
getPokemonListQueryKey,
···
89
86
))}
90
87
</TableBody>
91
88
</Table>
92
-
<div className="flex justify-center gap-4 mt-4">
93
-
<Link
94
-
to="/intent-preloading"
95
-
preload="intent"
96
-
className={buttonVariants({
97
-
variant: "outline",
98
-
className: cn(!data.prevOffset && "opacity-50 cursor-not-allowed"),
99
-
})}
100
-
search={{ offset: Number(data.prevOffset) }}
101
-
disabled={!data.prevOffset}
102
-
>
103
-
Previous
104
-
</Link>
105
-
<Link
106
-
to="/intent-preloading"
107
-
preload="intent"
108
-
search={{ offset: Number(data.nextOffset) }}
109
-
className={buttonVariants({
110
-
variant: "outline",
111
-
className: cn(!data.nextOffset && "opacity-50 cursor-not-allowed"),
112
-
})}
113
-
disabled={!data.nextOffset}
114
-
>
115
-
Next
116
-
</Link>
117
-
</div>
89
+
<PaginationNav
90
+
prevOffset={data.prevOffset ?? undefined}
91
+
nextOffset={data.nextOffset ?? undefined}
92
+
to="/intent-preloading"
93
+
/>
118
94
</div>
119
95
);
120
96
}
+6
-30
src/routes/pagination.tsx
+6
-30
src/routes/pagination.tsx
···
3
3
useQueryClient,
4
4
useSuspenseQuery,
5
5
} from "@tanstack/react-query";
6
-
import { Link } from "@tanstack/react-router";
7
-
import { buttonVariants } from "~/components/ui/button";
8
-
9
6
import { useServerFn } from "@tanstack/react-start";
10
7
import * as v from "valibot";
8
+
import { PaginationNav } from "~/components/pagination-nav";
11
9
import {
12
10
Table,
13
11
TableBody,
···
16
14
TableHeader,
17
15
TableRow,
18
16
} from "~/components/ui/table";
19
-
import { cn } from "~/lib/utils";
20
17
import {
21
18
POKEMON_LIMIT,
22
19
getPokemonListQueryKey,
···
108
105
))}
109
106
</TableBody>
110
107
</Table>
111
-
<div className="flex justify-center gap-4 mt-4">
112
-
<Link
113
-
to="/pagination"
114
-
preload="intent"
115
-
className={buttonVariants({
116
-
variant: "outline",
117
-
className: cn(!data.prevOffset && "opacity-50 cursor-not-allowed"),
118
-
})}
119
-
search={{ offset: Number(data.prevOffset) }}
120
-
disabled={!data.prevOffset}
121
-
>
122
-
Previous
123
-
</Link>
124
-
<Link
125
-
to="/pagination"
126
-
preload="intent"
127
-
search={{ offset: Number(data.nextOffset) }}
128
-
className={buttonVariants({
129
-
variant: "outline",
130
-
className: cn(!data.nextOffset && "opacity-50 cursor-not-allowed"),
131
-
})}
132
-
disabled={!data.nextOffset}
133
-
>
134
-
Next
135
-
</Link>
136
-
</div>
108
+
<PaginationNav
109
+
prevOffset={data.prevOffset ?? undefined}
110
+
nextOffset={data.nextOffset ?? undefined}
111
+
to="/pagination"
112
+
/>
137
113
</div>
138
114
);
139
115
}
+6
-28
src/routes/preloading.tsx
+6
-28
src/routes/preloading.tsx
···
1
1
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
2
-
import { Link } from "@tanstack/react-router";
3
-
import { buttonVariants } from "~/components/ui/button";
4
-
5
2
import { useServerFn } from "@tanstack/react-start";
6
3
import * as v from "valibot";
4
+
import { PaginationNav } from "~/components/pagination-nav";
7
5
import {
8
6
Table,
9
7
TableBody,
···
12
10
TableHeader,
13
11
TableRow,
14
12
} from "~/components/ui/table";
15
-
import { cn } from "~/lib/utils";
16
13
import {
17
14
POKEMON_LIMIT,
18
15
getPokemonListQueryKey,
···
89
86
))}
90
87
</TableBody>
91
88
</Table>
92
-
<div className="flex justify-center gap-4 mt-4">
93
-
<Link
94
-
to="/preloading"
95
-
className={buttonVariants({
96
-
variant: "outline",
97
-
className: cn(!data.prevOffset && "opacity-50 cursor-not-allowed"),
98
-
})}
99
-
search={{ offset: Number(data.prevOffset) }}
100
-
disabled={!data.prevOffset}
101
-
>
102
-
Previous
103
-
</Link>
104
-
<Link
105
-
to="/preloading"
106
-
search={{ offset: Number(data.nextOffset) }}
107
-
className={buttonVariants({
108
-
variant: "outline",
109
-
className: cn(!data.nextOffset && "opacity-50 cursor-not-allowed"),
110
-
})}
111
-
disabled={!data.nextOffset}
112
-
>
113
-
Next
114
-
</Link>
115
-
</div>
89
+
<PaginationNav
90
+
prevOffset={data.prevOffset ?? undefined}
91
+
nextOffset={data.nextOffset ?? undefined}
92
+
to="/preloading"
93
+
/>
116
94
</div>
117
95
);
118
96
}