feat: web i18n (#1286)

packages/ui/primitives/data-table-pagination.tsx

@@ -1,3 +1,4 @@
+import { Plural, Trans } from '@lingui/macro';
 import type { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { match } from 'ts-pattern';
@@ -26,8 +27,10 @@ export function DataTablePagination<TData>({
         {match(additionalInformation)
           .with('SelectedCount', () => (
             <span>
-              {table.getFilteredSelectedRowModel().rows.length} of{' '}
-              {table.getFilteredRowModel().rows.length} row(s) selected.
+              <Trans>
+                {table.getFilteredSelectedRowModel().rows.length} of{' '}
+                {table.getFilteredRowModel().rows.length} row(s) selected.
+              </Trans>
             </span>
           ))
           .with('VisibleCount', () => {
@@ -35,7 +38,11 @@ export function DataTablePagination<TData>({
 
             return (
               <span data-testid="data-table-count">
-                Showing {visibleRows} result{visibleRows > 1 && 's'}.
+                <Plural
+                  value={visibleRows}
+                  one={`Showing # result.`}
+                  other={`Showing # results.`}
+                />
               </span>
             );
           })
@@ -44,7 +51,9 @@ export function DataTablePagination<TData>({
       </div>
 
       <div className="flex items-center gap-x-2">
-        <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
+        <p className="whitespace-nowrap text-sm font-medium">
+          <Trans>Rows per page</Trans>
+        </p>
         <Select
           value={`${table.getState().pagination.pageSize}`}
           onValueChange={(value) => {
@@ -65,7 +74,9 @@ export function DataTablePagination<TData>({
       </div>
       <div className="flex flex-wrap items-center gap-x-6 gap-y-4 lg:gap-x-8">
         <div className="flex items-center text-sm font-medium md:justify-center">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+          <Trans>
+            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+          </Trans>
         </div>
 
         <div className="flex items-center gap-x-2">