diff --git a/package.json b/package.json index 9f95a93..42f9f68 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.10.0", + "version": "0.11.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/[locale]/pages/my-content/page.tsx b/src/app/[locale]/pages/my-content/page.tsx new file mode 100644 index 0000000..df62bf9 --- /dev/null +++ b/src/app/[locale]/pages/my-content/page.tsx @@ -0,0 +1,24 @@ +import MyContentInfoBlock from '@/app/ui/my-content/my-content-info-block'; +import { PieChartComponent } from '@/app/components/PieChartComponent'; +import FilesTable from '@/app/ui/dashboard/files-table'; + +const data = [ + { name: 'images', value: 33, color: '#f08c00' }, + { name: 'videos', value: 50, color: '#2f9e44' }, + { name: 'audios', value: 25, color: '#1971c2' }, + { name: 'documents', value: 25, color: '#a561e6' }, +]; + +export default function Page() { + return ( + <> +
+ +
+ +
+
+ + + ) +} \ No newline at end of file diff --git a/src/app/components/PieChartComponent.tsx b/src/app/components/PieChartComponent.tsx index 801a5e3..49de2b9 100644 --- a/src/app/components/PieChartComponent.tsx +++ b/src/app/components/PieChartComponent.tsx @@ -1,3 +1,5 @@ +'use client' + import { useTranslations } from 'next-intl'; import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'; diff --git a/src/app/components/tanstakTable.tsx b/src/app/components/tanstakTable.tsx index 7b9916d..d6516fa 100644 --- a/src/app/components/tanstakTable.tsx +++ b/src/app/components/tanstakTable.tsx @@ -337,31 +337,36 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { }, cell: ({ row }) => (
- - - - +
+ + +
+
+ + +
+
), enableSorting: false, diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 914a09e..739765a 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -33,7 +33,8 @@ } .main-containter-wrapper { - margin-left: var(--side-bar-width);; + margin-left: var(--side-bar-width); + ; flex: 1; padding: 30px; background: v.$bg-light; @@ -141,13 +142,18 @@ cursor: pointer; position: absolute; top: 50%; - right: 10px; + right: 0px; + padding: 10px; transform: translateY(-50%); svg { width: 16px; color: #686060; transition: color 0.2s ease; + + &:hover { + color: v.$s-color; + } } &.show { @@ -213,6 +219,11 @@ width: 20px; height: 20px; } + + @media (max-width: 1200px) { + padding: 5px 15px; + font-size: 15px; + } } .sub-link { @@ -262,11 +273,23 @@ font-size: 24px; font-weight: 600; text-transform: uppercase; + white-space: nowrap; + + @media (max-width: 1200px) { + padding: 0 15px 20px; + font-size: 20px; + } svg { width: 32px; height: 32px; margin-right: 15px; + + @media (max-width: 1200px) { + width: 28px; + height: 28px; + margin-right: 5px; + } } } diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index e69f2ac..cebaebd 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -625,9 +625,14 @@ .actions { display: flex; justify-content: center; - gap: 0.5rem; + gap: 5px; flex-wrap: wrap; + &-group { + display: flex; + gap: 5px; + } + button { padding: 4px 12px; font-size: 14px; @@ -646,16 +651,141 @@ } } -/* @media (max-width: 1300px) { - .tanstak-table { - max-width: 800px; - margin: 0 auto; +.file-stats-container { + padding: 1rem; + + @media (min-width: 640px) { + padding: 1.5rem; } } -@media (max-width: 1200px) { - .tanstak-table { - max-width: 500px; - margin: 0 auto; +.file-stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 1fr 1fr; + gap: 1rem; + + @media (min-width: 640px) { + grid-template-columns: repeat(1, 1fr); + gap: 1.5rem; } -} */ \ No newline at end of file + + @media (min-width: 1280px) { + grid-template-columns: repeat(2, 1fr); + } +} + +.file-stat-card { + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 1rem; + border: 1px solid v.$b-color-2; + background-color: v.$white; + padding: 1rem; + + @media (min-width: 1280px) { + padding-right: 1.25rem; + } +} + +.file-stat-content { + display: flex; + align-items: center; + gap: 1rem; +} + +.file-stat-icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 52px; + height: 52px; + border-radius: 0.75rem; + + &.image-icon { + color: v.$color-image; + } + + &.video-icon { + color: v.$color-video; + } + + &.audio-icon { + color: v.$color-audio; + } + + &.document-icon { + color: v.$color-document; + } +} + +// Icon SVG +.file-stat-icon { + width: 24px; + height: 24px; +} + +// Text Info +.file-stat-info { + display: flex; + flex-direction: column; +} + +.file-stat-title { + font-size: 0.875rem; + font-weight: 500; + color: v.$text-p; + margin-bottom: 0.25rem; + line-height: 1.25; +} + +.file-stat-usage { + font-size: 0.875rem; + color: v.$text-s; + display: block; + line-height: 1.25; +} + +// Details (Right Side) +.file-stat-details { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.file-stat-count { + font-size: 0.875rem; + color: v.$text-s; + display: block; + margin-bottom: 0.25rem; + text-align: right; + line-height: 1.25; +} + +.file-stat-size { + font-size: 0.875rem; + color: v.$text-s; + display: block; + text-align: right; + line-height: 1.25; +} + +@media (max-width: 639px) { + .file-stat-card { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .file-stat-details { + align-items: flex-start; + width: 100%; + padding-left: 68px; + } + + .file-stat-count, + .file-stat-size { + text-align: left; + } +} \ No newline at end of file diff --git a/src/app/styles/variable.scss b/src/app/styles/variable.scss index b5799a6..fc22098 100644 --- a/src/app/styles/variable.scss +++ b/src/app/styles/variable.scss @@ -16,6 +16,7 @@ $red: #dc2626; $color-image: #f08c00; $color-video: #2f9e44; $color-audio: #1971c2; +$color-document: #a561e6; :root { --side-bar-width: 280px; diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx index ea6031d..f4c74e1 100644 --- a/src/app/ui/icons/icons.tsx +++ b/src/app/ui/icons/icons.tsx @@ -26,6 +26,16 @@ export function IconAudioFile() { ) } + +export function IconDocument() { + return ( + + + + + ) +} + export function IconShield() { return ( diff --git a/src/app/ui/my-content/my-content-info-block.tsx b/src/app/ui/my-content/my-content-info-block.tsx new file mode 100644 index 0000000..b8cb607 --- /dev/null +++ b/src/app/ui/my-content/my-content-info-block.tsx @@ -0,0 +1,75 @@ +import { IconDocument, IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons'; + +export default function MyContentInfoBlock() { + return ( +
+
+
+
+
+
+ +
+
+

Image

+ 0% +
+
+
+ 0 files + 0 GB +
+
+ +
+
+
+ +
+
+

Videos

+ 0% +
+
+
+ 0 files + 0 GB +
+
+ +
+
+
+ +
+
+

Audios

+ 0% +
+
+
+ 0 files + 0 GB +
+
+ +
+
+
+ +
+
+

Documents

+ 0% +
+
+
+ 0 files + 0 GB +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/nav-links.tsx b/src/app/ui/nav-links.tsx index c74b51f..e8f660c 100644 --- a/src/app/ui/nav-links.tsx +++ b/src/app/ui/nav-links.tsx @@ -25,7 +25,7 @@ export default function NavLinks() { }, { name: t('my-content'), - href: '/pages/emptypage', + href: '/pages/my-content', img: 'M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z' }, { @@ -68,7 +68,7 @@ export default function NavLinks() { -

{t('home')}

+

{t('home')}

@@ -88,7 +88,7 @@ export default function NavLinks() { -

{link.name}

+

{link.name}

); })} @@ -104,7 +104,7 @@ export default function NavLinks() { -

{t('exit')}

+

{t('exit')}

diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 946213f..0dd0c81 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -16,6 +16,7 @@ "violations": "Violations", "checks": "Checks", "check": "Checks", + "documents": "Documents", "videos": "Videos", "video": "videos", "audios": "Audio", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 26d7c12..3ae3eb2 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -16,6 +16,7 @@ "violations": "Нарушения", "checks": "Проверки", "check": "Проверок", + "documents": "Документы", "videos": "Видео", "video": "видео", "audios": "Аудио",