add new marking-content layout

src/app/components/tanstakTable.tsx

@@ -18,6 +18,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { getUserFilesData, removeUserFile } from '@/app/actions/fileEntity';
 import ModalWindow from '@/app/components/modalWindow';
 import { toast } from 'sonner';
+import { pluralize } from '@/app/lib/pluralize';
 
 type FileType = 'image' | 'video' | 'audio';
 
@@ -603,6 +604,11 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		},
 	});
 
+	const pluralizeFiles = (number: number) => {
+		const translate = [t('file'), t('files-few'), t('files')];
+		return pluralize(number, translate[0], translate[1], translate[2]);
+	};
+
 	return (
 		<div className="tanstak-table-wrapper">
 			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
@@ -755,7 +761,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						</strong>
 					</span>
 					<span className="pagination-info-files">
-						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {t('files')}
+						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {pluralizeFiles(filteredData.length || 0)}
 					</span>
 				</div>