this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

pagingation null check

+91 -118
+44
src/components/pagination-nav.tsx
··· 1 + import { type FileRoutesByPath, Link } from "@tanstack/react-router"; 2 + import { cn } from "~/lib/utils"; 3 + import { Button } from "./ui/button"; 4 + 5 + export function PaginationNav(props: { 6 + prevOffset: number | undefined; 7 + nextOffset: number | undefined; 8 + to: keyof FileRoutesByPath; 9 + }) { 10 + return ( 11 + <nav className="flex justify-center gap-4 mt-4"> 12 + <Button 13 + variant="outline" 14 + className={cn( 15 + props.prevOffset == null && "opacity-50 cursor-not-allowed", 16 + )} 17 + asChild 18 + > 19 + <Link 20 + to={props.to} 21 + search={{ offset: props.prevOffset }} 22 + disabled={props.prevOffset == null} 23 + > 24 + Previous 25 + </Link> 26 + </Button> 27 + <Button 28 + variant="outline" 29 + className={cn( 30 + props.nextOffset == null && "opacity-50 cursor-not-allowed", 31 + )} 32 + asChild 33 + > 34 + <Link 35 + to={props.to} 36 + search={{ offset: props.nextOffset }} 37 + disabled={props.nextOffset == null} 38 + > 39 + Next 40 + </Link> 41 + </Button> 42 + </nav> 43 + ); 44 + }
+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
··· 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
··· 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
··· 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
··· 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 }