fix: button and label language

This commit is contained in:
Sukma Gladys 2024-09-20 10:56:49 +07:00
parent 78ab7ca655
commit cab2cf777a

View File

@ -23,8 +23,6 @@ import {
PaginationContent, PaginationContent,
PaginationEllipsis, PaginationEllipsis,
PaginationItem, PaginationItem,
PaginationNext,
PaginationPrevious,
} from "@/shadcn/components/ui/pagination"; } from "@/shadcn/components/ui/pagination";
import { import {
Select, Select,
@ -33,6 +31,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/shadcn/components/ui/select"; } from "@/shadcn/components/ui/select";
import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
type PaginatedResponse<T extends Record<string, unknown>> = { type PaginatedResponse<T extends Record<string, unknown>> = {
data: Array<T>; data: Array<T>;
@ -90,7 +89,7 @@ const createCreateButton = (
variant={"outline"} variant={"outline"}
onClick={addQuery} onClick={addQuery}
> >
Create New Tambah Data
<TbPlus /> <TbPlus />
</Button> </Button>
); );
@ -180,13 +179,15 @@ const CustomPagination = ({
<Pagination> <Pagination>
<PaginationContent className="flex flex-col items-center gap-4 md:flex-row"> <PaginationContent className="flex flex-col items-center gap-4 md:flex-row">
<PaginationItem className="w-full md:w-auto"> <PaginationItem className="w-full md:w-auto">
<PaginationPrevious <Button
onClick={() => onChange(Math.max(1, currentPage - 1))} onClick={() => onChange(Math.max(1, currentPage - 1))}
aria-disabled={currentPage - 1 == 0 ? true : false} disabled={currentPage - 1 == 0 ? true : false}
className="w-full gap-2 md:w-auto" className="w-full gap-2 md:w-auto"
variant={"ghost"}
> >
Previous <HiChevronLeft />
</PaginationPrevious> Sebelumnya
</Button>
</PaginationItem> </PaginationItem>
<div className="flex flex-wrap justify-center gap-2"> <div className="flex flex-wrap justify-center gap-2">
{getPaginationItems().map((item) => ( {getPaginationItems().map((item) => (
@ -196,13 +197,15 @@ const CustomPagination = ({
))} ))}
</div> </div>
<PaginationItem className="w-full md:w-auto"> <PaginationItem className="w-full md:w-auto">
<PaginationNext <Button
onClick={() => onChange(Math.min(totalPages, currentPage + 1))} onClick={() => onChange(Math.min(totalPages, currentPage + 1))}
aria-disabled={currentPage == totalPages ? true : false} disabled={currentPage == totalPages ? true : false}
className="w-full gap-2 md:w-auto" className="w-full gap-2 md:w-auto"
variant={"ghost"}
> >
Next Selanjutnya
</PaginationNext> <HiChevronRight />
</Button>
</PaginationItem> </PaginationItem>
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
@ -295,7 +298,7 @@ export default function PageTemplate<
className="w-full max-w-xs pl-10" className="w-full max-w-xs pl-10"
value={filterOptions.q} value={filterOptions.q}
onChange={(e) => handleSearchQueryChange(e.target.value)} onChange={(e) => handleSearchQueryChange(e.target.value)}
placeholder="Search..." placeholder="Pencarian..."
/> />
</div> </div>
<div className="flex"> <div className="flex">
@ -310,7 +313,7 @@ export default function PageTemplate<
{query.data && ( {query.data && (
<div className="pt-4 flex flex-col md:flex-row lg:flex-row items-center justify-between gap-2"> <div className="pt-4 flex flex-col md:flex-row lg:flex-row items-center justify-between gap-2">
<div className="flex flex-row lg:flex-col items-center w-fit gap-2"> <div className="flex flex-row lg:flex-col items-center w-fit gap-2">
<span className="block text-sm font-medium text-muted-foreground">Per Page</span> <span className="block text-sm font-medium text-muted-foreground whitespace-nowrap">Per Halaman</span>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
setFilterOptions((prev) => ({ setFilterOptions((prev) => ({
@ -341,7 +344,7 @@ export default function PageTemplate<
/> />
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<span className="text-sm text-muted-foreground whitespace-nowrap"> <span className="text-sm text-muted-foreground whitespace-nowrap">
Showing {query.data.data.length} of {query.data._metadata.totalItems} Menampilkan {query.data.data.length} dari {query.data._metadata.totalItems}
</span> </span>
</div> </div>
</div> </div>