@@ -624,9 +633,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
return (
-
+
+ {(() => {
+ 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')
+ }
+ })()}
+
+
{/* Фильтры */}
-
+
{t('date-filter')}:
@@ -779,20 +804,24 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
-
-
+ {table.getCanPreviousPage() && (
+
+ )}
+ {table.getCanPreviousPage() && (
+
+ )}
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
@@ -822,22 +851,26 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
})}
-
-
+ {table.getCanNextPage() && (
+
+ )}
+ {table.getCanNextPage() && (
+
+ )}
-
+
);
}
\ No newline at end of file
diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss
index b362b23..d67eab1 100644
--- a/src/app/styles/global-styles.scss
+++ b/src/app/styles/global-styles.scss
@@ -370,15 +370,24 @@
.color {
&-image {
- color: v.$color-image;
+ color: v.$white;
+ background: v.$color-image;
+ padding: 8px;
+ border-radius: 6px;
}
&-audio {
- color: v.$color-audio;
+ color: v.$white;
+ background: v.$color-audio;
+ padding: 8px;
+ border-radius: 6px;
}
&-video {
- color: v.$color-video;
+ color: v.$white;
+ background: v.$color-video;
+ padding: 8px;
+ border-radius: 6px;
}
}
diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss
index d435660..a5f566a 100644
--- a/src/app/styles/pages-styles.scss
+++ b/src/app/styles/pages-styles.scss
@@ -463,6 +463,24 @@
border-bottom: 1px solid var(--color-gray-200);
}
+ .tanstak-table-title {
+ font-size: 18px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ color: #1f2937;
+ margin-bottom: 20px;
+
+ &::before {
+ content: '';
+ width: 6px;
+ height: 6px;
+ background: #6366f1;
+ border-radius: 50%;
+ margin-right: 10px;
+ }
+ }
+
.tanstak-table-filtres {
display: flex;
flex-direction: column;
@@ -544,6 +562,12 @@
border: 2px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 1px 2px #0000000d;
+ color: v.$p-color;
+
+ .icon {
+ width: 18px;
+ }
+
/* */
&:hover {
@@ -562,12 +586,10 @@
gap: 0.25rem;
button {
- border: 2px solid v.$p-color;
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
+ border: 2px solid #e2e8f0;
+ padding: 0.25rem 0.75rem;
border-radius: 10px;
+ color: v.$p-color;
&.current {
background-color: v.$p-color;
@@ -592,8 +614,7 @@
.tanstak-table {
width: 100%;
- table-layout: fixed;
- /* table-layout: auto; */
+ /* table-layout: fixed; */
@media (max-width: 1200px) {
width: 1200px;
@@ -663,11 +684,49 @@
}
td {
- padding-left: 1rem;
- padding-right: 1rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding: 15px 0;
white-space: nowrap;
+
+ &:first-child {
+ padding-left: 15px;
+ }
+
+ &:last-child {
+ padding-right: 15px;
+ }
+ }
+
+ .table-item {
+ color: v.$text-s;
+ font-size: 14px;
+ }
+
+ .table-item-protected {
+ color: #10b981;
+ font-size: 12px;
+ position: relative;
+ margin-left: 5px;
+ padding-left: 5px;
+
+ &::before {
+ content: '•';
+ color: v.$text-s;
+ position: absolute;
+ left: -5px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+
+ .table-item-extension {
+ text-transform: uppercase;
+ font-size: 14px;
+ }
+
+ .table-item-status {
+ padding: 2px 10px;
+ border-radius: 15px;
+ background-color: v.$b-color-2;
}
.actions {
@@ -685,15 +744,43 @@
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
- border-radius: 4px;
+ border-radius: 8px;
color: v.$white;
+ cursor: pointer;
+ transition: all 0.3s ease-in;
- .icon {}
+ .icon {
+ width: 18px;
+ }
@media (max-width: 1200px) {
padding: 4px;
}
}
+
+ span {
+ padding-left: 5px;
+ }
+ }
+
+ .table-action-download {
+ display: flex;
+ background-color: #3b72e0;
+ align-items: center;
+
+ &:hover {
+ background-color: #2d56a8;
+ }
+ }
+
+ .table-action-delete {
+ display: flex;
+ background-color: #e80a14;
+ align-items: center;
+
+ &:hover {
+ background-color: #9f0712;
+ }
}
}
}
@@ -1245,7 +1332,7 @@
right: -50%;
width: 200%;
height: 200%;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx
index 6f3e370..12cd2c4 100644
--- a/src/app/ui/icons/icons.tsx
+++ b/src/app/ui/icons/icons.tsx
@@ -1,12 +1,8 @@
/* https://icon-sets.iconify.design/ic/ */
-import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
-
export function IconImageFile() {
return (
-
+
)
}
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 0326d69..a0318ae 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -174,7 +174,13 @@
"monitoring-copyright-infringements": "Monitoring copyright infringements",
"monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online",
"referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded.",
- "upload-date": "Upload date"
+ "upload-date": "Upload date",
+ "download": "Download",
+ "delete": "Delete",
+ "table-description": "Table of all files",
+ "protected-image": "Protected images",
+ "protected-video": "Protected videos",
+ "protected-audio": "Protected audio"
},
"Login-register-form": {
"and": "and",
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 02d5b49..e6ea473 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -174,7 +174,13 @@
"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете",
"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение.",
- "upload-date": "Дата загрузки"
+ "upload-date": "Дата загрузки",
+ "download": "Скачать",
+ "delete": "Удалить",
+ "table-description": "Таблица всех файлов",
+ "protected-image": "Защищенные изображения",
+ "protected-video": "Защищенные видео",
+ "protected-audio": "Защищенные аудио"
},
"Login-register-form": {
"and": "и",