frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit styles

Browse Source
This commit is contained in:
smanylov
2026-01-21 15:05:02 +07:00
parent fb661df8a1
commit fc7efbfa07
8 changed files with 212 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/tanstakTable.tsx
+84 -51
View File
@@ -98,7 +98,7 @@ const cutFileName = (fileName: string) => {
const extension = fileName.substring(lastDotIndex);
if (fileName.length <= MAX_FILE_NAME_LENGTH) {
return nameWithoutExtension;
return fileName;
}
const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
@@ -199,14 +199,15 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
),
cell: ({ row }) => (
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 table-item">
<FileTypeIcon type={row.original.fileType} />
<div>
<div className="font-medium w-full truncate" title={row.original.fileName}>
{/* {row.original.fileName} */}
{cutFileName(row.original.fileName)}
<span className="font-semibold">
{cutFileName(row.original.fileName)}
</span>
<br />
{cutFileExtension(row.original.fileName)} • <span className="text-[#10b981]">{row.original?.status}</span>
<span className="table-item-extension">{cutFileExtension(row.original.fileName)}</span> <span className="table-item-protected">{row.original?.status}</span>
</div>
</div>
</div>
@@ -283,7 +284,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
),
cell: ({ row }) => (
<div className="text-center">
<div className="text-center table-item">
{row.original.size !== undefined ? convertBytes(row.original.size) : '-'}
</div>
),
@@ -317,7 +318,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
),
cell: ({ row }) => {
return (
<div className="text-center">
<div className="text-center table-item">
{row.original.uploadDate ? (
<>
{formatDate(row.original.uploadDate)}
@@ -361,8 +362,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
),
cell: ({ row }) => {
return (
<div className={`text-center font-semibold`}>
{t('status')}
<div className="text-center font-semibold table-item">
<span className="table-item-status">
{t('status')}
</span>
</div>
)
},
@@ -378,33 +381,39 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
},
cell: ({ row }) => (
<div className="actions">
<div className="actions-group">
<div className="actions-group" style={{ display: "none" }}>
<button
onClick={() => handleView(row.original)}
className="bg-blue-500 hover:bg-blue-600"
>
<IconEye />
</button>
<button
onClick={() => handleDownload(row.original)}
disabled={isFileLoading}
className="bg-green-500 hover:bg-green-600"
>
<IconFileDownload />
</button>
</div>
<div className="actions-group">
<button
onClick={() => handleProtect(row.original)}
className="bg-violet-500 hover:bg-violet-600"
>
<IconShieldExclamation />
</button>
</div>
<div className="actions-group">
<button
onClick={() => handleDownload(row.original)}
disabled={isFileLoading}
className="table-action-download"
>
<IconFileDownload />
<span>
{t('download')}
</span>
</button>
<button
onClick={() => handleOpenWindowForRemove(row.original)}
className="bg-red-700 hover:bg-red-800"
className="table-action-delete"
>
<IconDelete />
<span>
{t('delete')}
</span>
</button>
</div>
@@ -624,9 +633,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
return (
<div className="tanstak-table-wrapper">
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
<h3
className="tanstak-table-title"
>
{(() => {
switch (fileType) {
case 'image':
return t('protected-image')
case 'video':
return t('protected-video')
case 'audio':
return t('protected-audio')
default:
return t('table-description')
}
})()}
</h3>
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
{/* Фильтры */}
<div className="tanstak-table-filtres">
<div className="tanstak-table-filtres" style={{ display: "none" }}>
<div className="table-filtres-wrapper">
<div className="table-filtres-item">
<div className="table-filtres-label">{t('date-filter')}:</div>
@@ -779,20 +804,24 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
<div className="pagination-controls">
<button
className="arrow"
onClick={() => table.firstPage()}
disabled={!table.getCanPreviousPage()}
>
<IconDoubleArrowLeft />
</button>
<button
className="arrow"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<IconArrowLeft />
</button>
{table.getCanPreviousPage() && (
<button
className="arrow"
onClick={() => table.firstPage()}
disabled={!table.getCanPreviousPage()}
>
<IconDoubleArrowLeft />
</button>
)}
{table.getCanPreviousPage() && (
<button
className="arrow"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<IconArrowLeft />
</button>
)}
<div className="pagination-controls-pages">
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
@@ -822,22 +851,26 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
})}
</div>
<button
className="arrow"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<IconArrowRight />
</button>
<button
className="arrow"
onClick={() => table.lastPage()}
disabled={!table.getCanNextPage()}
>
<IconDoubleArrowRight />
</button>
{table.getCanNextPage() && (
<button
className="arrow"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<IconArrowRight />
</button>
)}
{table.getCanNextPage() && (
<button
className="arrow"
onClick={() => table.lastPage()}
disabled={!table.getCanNextPage()}
>
<IconDoubleArrowRight />
</button>
)}
</div>
</div>
</div>
</div >
);
}