-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into example-4ygf
- Loading branch information
Showing
9 changed files
with
253 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,16 @@ | ||
| import InvoicesTable from '@/app/ui/invoices/table'; | ||
|
|
||
| export default function Page() { | ||
| export default function Page({ | ||
| searchParams, | ||
| }: { | ||
| searchParams: { | ||
| query: string; | ||
| page: string; | ||
| }; | ||
| }) { | ||
| return ( | ||
| <div> | ||
| <InvoicesTable /> | ||
| <InvoicesTable searchParams={searchParams} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| 'use client'; | ||
|
|
||
| import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; | ||
| import { usePathname, useSearchParams } from 'next/navigation'; | ||
| import clsx from 'clsx'; | ||
| import Link from 'next/link'; | ||
|
|
||
| export default function PaginationButtons({ | ||
| totalPages, | ||
| currentPage, | ||
| }: { | ||
| totalPages: number; | ||
| currentPage: number; | ||
| }) { | ||
| const pathname = usePathname(); | ||
| const searchParams = useSearchParams(); | ||
| const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1); | ||
|
|
||
| const createPageUrl = (pageNumber: number) => { | ||
| const newSearchParams = new URLSearchParams(searchParams.toString()); | ||
| newSearchParams.set('page', pageNumber.toString()); | ||
| return `${pathname}?${newSearchParams.toString()}`; | ||
| }; | ||
|
|
||
| const PreviousPageTag = currentPage === 1 ? 'p' : Link; | ||
| const NextPageTag = currentPage === totalPages ? 'p' : Link; | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-end"> | ||
| <PreviousPageTag | ||
| href={createPageUrl(currentPage - 1)} | ||
| className={clsx( | ||
| 'flex h-8 w-8 items-center justify-center rounded-l-md border border-gray-300', | ||
| { | ||
| 'text-gray-300': currentPage === 1, | ||
| }, | ||
| )} | ||
| > | ||
| <ChevronLeftIcon className="w-4" /> | ||
| </PreviousPageTag> | ||
| {pageNumbers.map((page) => { | ||
| const PageTag = page === currentPage ? 'p' : Link; | ||
| return ( | ||
| <PageTag | ||
| key={page} | ||
| href={createPageUrl(page)} | ||
| className={clsx( | ||
| 'flex h-8 w-8 items-center justify-center border-y border-r border-gray-300 text-sm', | ||
| { | ||
| 'border-blue-600 bg-blue-600 text-white': currentPage === page, | ||
| }, | ||
| )} | ||
| > | ||
| {page} | ||
| </PageTag> | ||
| ); | ||
| })} | ||
| <NextPageTag | ||
| href={createPageUrl(currentPage + 1)} | ||
| className={clsx( | ||
| 'flex h-8 w-8 items-center justify-center rounded-r-md border border-l-0 border-gray-300', | ||
| { | ||
| 'text-gray-300': currentPage === totalPages, | ||
| }, | ||
| )} | ||
| > | ||
| <ChevronRightIcon className="w-4" /> | ||
| </NextPageTag> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| 'use client'; | ||
|
|
||
| import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; | ||
| import { usePathname, useRouter, useSearchParams } from 'next/navigation'; | ||
| import { useTransition } from 'react'; | ||
|
|
||
| export default function TableSearch() { | ||
| const { replace } = useRouter(); | ||
| const searchParams = useSearchParams()!; | ||
| const pathname = usePathname(); | ||
| const [isPending, startTransition] = useTransition(); | ||
|
|
||
| function handleSearch(term: string) { | ||
| const params = new URLSearchParams(searchParams); | ||
| if (term) { | ||
| params.set('query', term); | ||
| } else { | ||
| params.delete('query'); | ||
| } | ||
|
|
||
| startTransition(() => { | ||
| replace(`${pathname}?${params.toString()}`); | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="relative max-w-md flex-grow"> | ||
| <label htmlFor="search" className="sr-only"> | ||
| Search | ||
| </label> | ||
| <div className="relative flex items-center px-2 py-2"> | ||
| <MagnifyingGlassIcon className="h-5 text-gray-400" /> | ||
| <input | ||
| type="text" | ||
| placeholder="Search..." | ||
| onChange={(e) => handleSearch(e.target.value)} | ||
| className="absolute inset-0 w-full rounded-md border border-gray-300 bg-transparent p-2 pl-8 text-sm" | ||
| /> | ||
| </div> | ||
| {isPending && <LoadingIcon />} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function LoadingIcon() { | ||
| return ( | ||
| <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center"> | ||
| <svg | ||
| className="-ml-1 mr-3 h-5 w-5 animate-spin text-gray-700" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <circle | ||
| className="opacity-25" | ||
| cx="12" | ||
| cy="12" | ||
| r="10" | ||
| stroke="currentColor" | ||
| stroke-width="4" | ||
| /> | ||
| <path | ||
| className="opacity-75" | ||
| fill="currentColor" | ||
| d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters