Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-22 04:31:39 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: translation patterns

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2025-07-24 16:42:24 +00:00
parent 87e0ea2ee3
commit 582fe91b14
9 changed files with 141 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/remix/app/components/tables/internal-audit-log-table.tsx
View File

@ -1,5 +1,5 @@
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import type { DateTimeFormatOptions } from 'luxon'; import type { DateTimeFormatOptions } from 'luxon';
import { UAParser } from 'ua-parser-js'; import { UAParser } from 'ua-parser-js';
@ -41,11 +41,21 @@ export const InternalAuditLogTable = ({ logs }: AuditLogDataTableProps) => {
<Table overflowHidden> <Table overflowHidden>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>{_(msg`Time`)}</TableHead> <TableHead>
<TableHead>{_(msg`User`)}</TableHead> <Trans>Time</Trans>
<TableHead>{_(msg`Action`)}</TableHead> </TableHead>
<TableHead>{_(msg`IP Address`)}</TableHead> <TableHead>
<TableHead>{_(msg`Browser`)}</TableHead> <Trans>User</Trans>
</TableHead>
<TableHead>
<Trans>Action</Trans>
</TableHead>
<TableHead>
<Trans>IP Address</Trans>
</TableHead>
<TableHead>
<Trans>Browser</Trans>
</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>

37
apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx
View File

@ -1,5 +1,6 @@
import { msg } from '@lingui/core/macro'; import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { redirect } from 'react-router'; import { redirect } from 'react-router';
@ -77,25 +78,33 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
return ( return (
<div className="print-provider pointer-events-none mx-auto max-w-screen-md"> <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
<div className="flex items-center"> <div className="flex items-center">
<h1 className="my-8 text-2xl font-bold">{_(msg`Version History`)}</h1> <h1 className="my-8 text-2xl font-bold">
<Trans>Version History</Trans>
</h1>
</div> </div>
<Card> <Card>
<CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs"> <CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs">
<p> <p>
<span className="font-medium">{_(msg`Document ID`)}</span> <span className="font-medium">
<Trans>Document ID</Trans>
</span>
<span className="mt-1 block break-words">{document.id}</span> <span className="mt-1 block break-words">{document.id}</span>
</p> </p>
<p> <p>
<span className="font-medium">{_(msg`Enclosed Document`)}</span> <span className="font-medium">
<Trans>Enclosed Document</Trans>
</span>
<span className="mt-1 block break-words">{document.title}</span> <span className="mt-1 block break-words">{document.title}</span>
</p> </p>
<p> <p>
<span className="font-medium">{_(msg`Status`)}</span> <span className="font-medium">
<Trans>Status</Trans>
</span>
<span className="mt-1 block"> <span className="mt-1 block">
{_( {_(
@ -105,7 +114,9 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
</p> </p>
<p> <p>
<span className="font-medium">{_(msg`Owner`)}</span> <span className="font-medium">
<Trans>Owner</Trans>
</span>
<span className="mt-1 block break-words"> <span className="mt-1 block break-words">
{document.user.name} ({document.user.email}) {document.user.name} ({document.user.email})
@ -113,7 +124,9 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
</p> </p>
<p> <p>
<span className="font-medium">{_(msg`Created At`)}</span> <span className="font-medium">
<Trans>Created At</Trans>
</span>
<span className="mt-1 block"> <span className="mt-1 block">
{DateTime.fromJSDate(document.createdAt) {DateTime.fromJSDate(document.createdAt)
@ -123,7 +136,9 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
</p> </p>
<p> <p>
<span className="font-medium">{_(msg`Last Updated`)}</span> <span className="font-medium">
<Trans>Last Updated</Trans>
</span>
<span className="mt-1 block"> <span className="mt-1 block">
{DateTime.fromJSDate(document.updatedAt) {DateTime.fromJSDate(document.updatedAt)
@ -133,7 +148,9 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
</p> </p>
<p> <p>
<span className="font-medium">{_(msg`Time Zone`)}</span> <span className="font-medium">
<Trans>Time Zone</Trans>
</span>
<span className="mt-1 block break-words"> <span className="mt-1 block break-words">
{document.documentMeta?.timezone ?? 'N/A'} {document.documentMeta?.timezone ?? 'N/A'}
@ -141,7 +158,9 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
</p> </p>
<div> <div>
<p className="font-medium">{_(msg`Recipients`)}</p> <p className="font-medium">
<Trans>Recipients</Trans>
</p>
<ul className="mt-1 list-inside list-disc"> <ul className="mt-1 list-inside list-disc">
{document.recipients.map((recipient) => ( {document.recipients.map((recipient) => (

55
apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx
View File

@ -1,5 +1,6 @@
import { msg } from '@lingui/core/macro'; import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import { FieldType, SigningStatus } from '@prisma/client'; import { FieldType, SigningStatus } from '@prisma/client';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { redirect } from 'react-router'; import { redirect } from 'react-router';
@ -199,7 +200,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
return ( return (
<div className="print-provider pointer-events-none mx-auto max-w-screen-md"> <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
<div className="flex items-center"> <div className="flex items-center">
<h1 className="my-8 text-2xl font-bold">{_(msg`Signing Certificate`)}</h1> <h1 className="my-8 text-2xl font-bold">
<Trans>Signing Certificate</Trans>
</h1>
</div> </div>
<Card> <Card>
@ -207,9 +210,15 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
<Table overflowHidden> <Table overflowHidden>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>{_(msg`Signer Events`)}</TableHead> <TableHead>
<TableHead>{_(msg`Signature`)}</TableHead> <Trans>Signer Events</Trans>
<TableHead>{_(msg`Details`)}</TableHead> </TableHead>
<TableHead>
<Trans>Signature</Trans>
</TableHead>
<TableHead>
<Trans>Details</Trans>
</TableHead>
{/* <TableHead>Security</TableHead> */} {/* <TableHead>Security</TableHead> */}
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@ -229,7 +238,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
</p> </p>
<p className="text-muted-foreground mt-2 text-sm print:text-xs"> <p className="text-muted-foreground mt-2 text-sm print:text-xs">
<span className="font-medium">{_(msg`Authentication Level`)}:</span>{' '} <span className="font-medium">
<Trans>Authentication Level</Trans>:
</span>{' '}
<span className="block">{getAuthenticationLevel(recipient.id)}</span> <span className="block">{getAuthenticationLevel(recipient.id)}</span>
</p> </p>
</TableCell> </TableCell>
@ -259,7 +270,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
</div> </div>
<p className="text-muted-foreground mt-2 text-sm print:text-xs"> <p className="text-muted-foreground mt-2 text-sm print:text-xs">
<span className="font-medium">{_(msg`Signature ID`)}:</span>{' '} <span className="font-medium">
<Trans>Signature ID</Trans>:
</span>{' '}
<span className="block font-mono uppercase"> <span className="block font-mono uppercase">
{signature.secondaryId} {signature.secondaryId}
</span> </span>
@ -270,14 +283,18 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
)} )}
<p className="text-muted-foreground mt-2 text-sm print:text-xs"> <p className="text-muted-foreground mt-2 text-sm print:text-xs">
<span className="font-medium">{_(msg`IP Address`)}:</span>{' '} <span className="font-medium">
<Trans>IP Address</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)} {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)}
</span> </span>
</p> </p>
<p className="text-muted-foreground mt-1 text-sm print:text-xs"> <p className="text-muted-foreground mt-1 text-sm print:text-xs">
<span className="font-medium">{_(msg`Device`)}:</span>{' '} <span className="font-medium">
<Trans>Device</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)} {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
</span> </span>
@ -287,7 +304,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
<TableCell truncate={false} className="w-[min-content] align-top"> <TableCell truncate={false} className="w-[min-content] align-top">
<div className="space-y-1"> <div className="space-y-1">
<p className="text-muted-foreground text-sm print:text-xs"> <p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">{_(msg`Sent`)}:</span>{' '} <span className="font-medium">
<Trans>Sent</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{logs.EMAIL_SENT[0] {logs.EMAIL_SENT[0]
? DateTime.fromJSDate(logs.EMAIL_SENT[0].createdAt) ? DateTime.fromJSDate(logs.EMAIL_SENT[0].createdAt)
@ -298,7 +317,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
</p> </p>
<p className="text-muted-foreground text-sm print:text-xs"> <p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">{_(msg`Viewed`)}:</span>{' '} <span className="font-medium">
<Trans>Viewed</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{logs.DOCUMENT_OPENED[0] {logs.DOCUMENT_OPENED[0]
? DateTime.fromJSDate(logs.DOCUMENT_OPENED[0].createdAt) ? DateTime.fromJSDate(logs.DOCUMENT_OPENED[0].createdAt)
@ -310,7 +331,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
{logs.DOCUMENT_RECIPIENT_REJECTED[0] ? ( {logs.DOCUMENT_RECIPIENT_REJECTED[0] ? (
<p className="text-muted-foreground text-sm print:text-xs"> <p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">{_(msg`Rejected`)}:</span>{' '} <span className="font-medium">
<Trans>Rejected</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{logs.DOCUMENT_RECIPIENT_REJECTED[0] {logs.DOCUMENT_RECIPIENT_REJECTED[0]
? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_REJECTED[0].createdAt) ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_REJECTED[0].createdAt)
@ -321,7 +344,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
</p> </p>
) : ( ) : (
<p className="text-muted-foreground text-sm print:text-xs"> <p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">{_(msg`Signed`)}:</span>{' '} <span className="font-medium">
<Trans>Signed</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{logs.DOCUMENT_RECIPIENT_COMPLETED[0] {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
? DateTime.fromJSDate( ? DateTime.fromJSDate(
@ -335,7 +360,9 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
)} )}
<p className="text-muted-foreground text-sm print:text-xs"> <p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">{_(msg`Reason`)}:</span>{' '} <span className="font-medium">
<Trans>Reason</Trans>:
</span>{' '}
<span className="inline-block"> <span className="inline-block">
{recipient.signingStatus === SigningStatus.REJECTED {recipient.signingStatus === SigningStatus.REJECTED
? recipient.rejectionReason ? recipient.rejectionReason
@ -371,7 +398,7 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
<div className="flex items-end justify-end gap-x-4"> <div className="flex items-end justify-end gap-x-4">
<p className="flex-shrink-0 text-sm font-medium print:text-xs"> <p className="flex-shrink-0 text-sm font-medium print:text-xs">
{_(msg`Signing certificate provided by`)}: <Trans>Signing certificate provided by</Trans>:
</p> </p>
<BrandingLogo className="max-h-6 print:max-h-4" /> <BrandingLogo className="max-h-6 print:max-h-4" />
</div> </div>

13
apps/remix/app/routes/embed+/v1+/authoring+/document.create.tsx
View File

@ -1,5 +1,6 @@
import { useLayoutEffect, useState } from 'react'; import { useLayoutEffect, useState } from 'react';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
@ -51,8 +52,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
if (!configuration || !configuration.documentData) { if (!configuration || !configuration.documentData) {
toast({ toast({
variant: 'destructive', variant: 'destructive',
title: _('Error'), title: _(msg`Error`),
description: _('Please configure the document first'), description: _(msg`Please configure the document first`),
}); });
return; return;
@ -103,8 +104,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
}); });
toast({ toast({
title: _('Success'), title: _(msg`Success`),
description: _('Document created successfully'), description: _(msg`Document created successfully`),
}); });
// Send a message to the parent window with the document details // Send a message to the parent window with the document details
@ -130,8 +131,8 @@ export default function EmbeddingAuthoringDocumentCreatePage() {
toast({ toast({
variant: 'destructive', variant: 'destructive',
title: _('Error'), title: _(msg`Error`),
description: _('Failed to create document'), description: _(msg`Failed to create document`),
}); });
} }
}; };

13
apps/remix/app/routes/embed+/v1+/authoring+/template.create.tsx
View File

@ -1,5 +1,6 @@
import { useLayoutEffect, useState } from 'react'; import { useLayoutEffect, useState } from 'react';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
@ -49,8 +50,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
if (!configuration || !configuration.documentData) { if (!configuration || !configuration.documentData) {
toast({ toast({
variant: 'destructive', variant: 'destructive',
title: _('Error'), title: _(msg`Error`),
description: _('Please configure the template first'), description: _(msg`Please configure the template first`),
}); });
return; return;
@ -93,8 +94,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
}); });
toast({ toast({
title: _('Success'), title: _(msg`Success`),
description: _('Template created successfully'), description: _(msg`Template created successfully`),
}); });
// Send a message to the parent window with the template details // Send a message to the parent window with the template details
@ -120,8 +121,8 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
toast({ toast({
variant: 'destructive', variant: 'destructive',
title: _('Error'), title: _(msg`Error`),
description: _('Failed to create template'), description: _(msg`Failed to create template`),
}); });
} }
}; };

5
packages/ui/components/document/document-download-button.tsx
View File

@ -1,6 +1,7 @@
import type { HTMLAttributes } from 'react'; import type { HTMLAttributes } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro'; import { Trans } from '@lingui/react/macro';
import type { DocumentData } from '@prisma/client'; import type { DocumentData } from '@prisma/client';
@ -45,8 +46,8 @@ export const DocumentDownloadButton = ({
setIsLoading(false); setIsLoading(false);
toast({ toast({
title: _('Something went wrong'), title: _(msg`Something went wrong`),
description: _('An error occurred while downloading your document.'), description: _(msg`An error occurred while downloading your document.`),
variant: 'destructive', variant: 'destructive',
}); });
} }

20
packages/ui/primitives/data-table-pagination.tsx
View File

@ -1,5 +1,3 @@
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react';
import { Plural, Trans } from '@lingui/react/macro'; import { Plural, Trans } from '@lingui/react/macro';
import type { Table } from '@tanstack/react-table'; import type { Table } from '@tanstack/react-table';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'; import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
@ -23,8 +21,6 @@ export function DataTablePagination<TData>({
table, table,
additionalInformation = 'VisibleCount', additionalInformation = 'VisibleCount',
}: DataTablePaginationProps<TData>) { }: DataTablePaginationProps<TData>) {
const { _ } = useLingui();
return ( return (
<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2"> <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
<div className="text-muted-foreground flex-1 text-sm"> <div className="text-muted-foreground flex-1 text-sm">
@ -90,7 +86,9 @@ export function DataTablePagination<TData>({
onClick={() => table.setPageIndex(0)} onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<span className="sr-only">{_(msg`Go to first page`)}</span> <Trans>
<span className="sr-only">Go to first page</span>
</Trans>
<ChevronsLeft className="h-4 w-4" /> <ChevronsLeft className="h-4 w-4" />
</Button> </Button>
<Button <Button
@ -99,7 +97,9 @@ export function DataTablePagination<TData>({
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<span className="sr-only">{_(msg`Go to previous page`)}</span> <Trans>
<span className="sr-only">Go to previous page</span>
</Trans>
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
</Button> </Button>
<Button <Button
@ -108,7 +108,9 @@ export function DataTablePagination<TData>({
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<span className="sr-only">{_(msg`Go to next page`)}</span> <Trans>
<span className="sr-only">Go to next page</span>
</Trans>
<ChevronRight className="h-4 w-4" /> <ChevronRight className="h-4 w-4" />
</Button> </Button>
<Button <Button
@ -117,7 +119,9 @@ export function DataTablePagination<TData>({
onClick={() => table.setPageIndex(table.getPageCount() - 1)} onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<span className="sr-only">{_(msg`Go to last page`)}</span> <Trans>
<span className="sr-only">Go to last page</span>
</Trans>
<ChevronsRight className="h-4 w-4" /> <ChevronsRight className="h-4 w-4" />
</Button> </Button>
</div> </div>

5
packages/ui/primitives/data-table/data-table-faceted-filter.tsx
View File

@ -3,6 +3,7 @@ import * as React from 'react';
import type { MessageDescriptor } from '@lingui/core'; import type { MessageDescriptor } from '@lingui/core';
import { msg } from '@lingui/core/macro'; import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react'; import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import type { Column } from '@tanstack/react-table'; import type { Column } from '@tanstack/react-table';
import { Check } from 'lucide-react'; import { Check } from 'lucide-react';
@ -83,7 +84,9 @@ export function DataTableFacetedFilter<TData, TValue>({
<PopoverContent className="w-[200px] p-0" align="start"> <PopoverContent className="w-[200px] p-0" align="start">
<Command> <Command>
<CommandList> <CommandList>
<CommandEmpty>{_(msg`No results found.`)}</CommandEmpty> <CommandEmpty>
<Trans>No results found.</Trans>
</CommandEmpty>
<CommandGroup> <CommandGroup>
{options.map((option) => { {options.map((option) => {
const isSelected = selectedValuesSet.has(option.value); const isSelected = selectedValuesSet.has(option.value);

31
packages/ui/primitives/data-table/data-table-pagination.tsx
View File

@ -1,3 +1,4 @@
import { Trans } from '@lingui/react/macro';
import type { Table } from '@tanstack/react-table'; import type { Table } from '@tanstack/react-table';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'; import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
@ -12,12 +13,16 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
return ( return (
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between px-2">
<div className="text-muted-foreground flex-1 text-sm"> <div className="text-muted-foreground flex-1 text-sm">
{table.getFilteredSelectedRowModel().rows.length} of{' '} <Trans>
{table.getFilteredRowModel().rows.length} row(s) selected. {table.getFilteredSelectedRowModel().rows.length} of{' '}
{table.getFilteredRowModel().rows.length} row(s) selected.
</Trans>
</div> </div>
<div className="flex items-center space-x-6 lg:space-x-8"> <div className="flex items-center space-x-6 lg:space-x-8">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<p className="text-sm font-medium">Rows per page</p> <p className="text-sm font-medium">
<Trans>Rows per page</Trans>
</p>
<Select <Select
value={`${table.getState().pagination.pageSize}`} value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => { onValueChange={(value) => {
@ -37,7 +42,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
</Select> </Select>
</div> </div>
<div className="flex w-[100px] items-center justify-center text-sm font-medium"> <div className="flex w-[100px] items-center justify-center text-sm font-medium">
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()} <Trans>
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
</Trans>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Button <Button
@ -46,7 +53,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
onClick={() => table.setPageIndex(0)} onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<span className="sr-only">Go to first page</span> <Trans>
<span className="sr-only">Go to first page</span>
</Trans>
<ChevronsLeft /> <ChevronsLeft />
</Button> </Button>
<Button <Button
@ -55,7 +64,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<span className="sr-only">Go to previous page</span> <Trans>
<span className="sr-only">Go to previous page</span>
</Trans>
<ChevronLeft /> <ChevronLeft />
</Button> </Button>
<Button <Button
@ -64,7 +75,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<span className="sr-only">Go to next page</span> <Trans>
<span className="sr-only">Go to next page</span>
</Trans>
<ChevronRight /> <ChevronRight />
</Button> </Button>
<Button <Button
@ -73,7 +86,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
onClick={() => table.setPageIndex(table.getPageCount() - 1)} onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<span className="sr-only">Go to last page</span> <Trans>
<span className="sr-only">Go to last page</span>
</Trans>
<ChevronsRight /> <ChevronsRight />
</Button> </Button>
</div> </div>