my-content-page and fix adaptive styles

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",

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 (
+		<>
+			<div className="flex justify-between flex-wrap gap-x-8">
+				<MyContentInfoBlock />
+				<div className="protection-overview grow">
+					<PieChartComponent data={data} />
+				</div>
+			</div>
+			<FilesTable fileType={'all'}/>
+		</>
+	)
+}

src/app/components/PieChartComponent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 

src/app/components/tanstakTable.tsx

@@ -337,6 +337,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				},
 				cell: ({ row }) => (
 					<div className="actions">
+						<div className="actions-group">
 							<button
 								onClick={() => handleView(row.original)}
 								className="bg-blue-500 hover:bg-blue-600"
@@ -350,6 +351,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							>
 								<IconFileOpen />
 							</button>
+						</div>
+						<div className="actions-group">
 							<button
 								onClick={() => handleProtect(row.original)}
 								className="bg-violet-500 hover:bg-violet-600"
@@ -363,6 +366,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 								<IconDelete />
 							</button>
 						</div>
+
+					</div>
 				),
 				enableSorting: false,
 				enableColumnFilter: false,

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;
+		}
 	}
 }
 

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) {
+.file-stats-container {
-	.tanstak-table {
+	padding: 1rem;
-		max-width: 800px;
+
-		margin: 0 auto;
+	@media (min-width: 640px) {
+		padding: 1.5rem;
 	}
 }
 
-@media (max-width: 1200px) {
+.file-stats-grid {
-	.tanstak-table {
+	display: grid;
-		max-width: 500px;
+	grid-template-columns: 1fr 1fr;
-		margin: 0 auto;
+	grid-auto-rows: 1fr 1fr;
+	gap: 1rem;
+
+	@media (min-width: 640px) {
+		grid-template-columns: repeat(1, 1fr);
+		gap: 1.5rem;
 	}
-} */
+
+	@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;
+	}
+}

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;

src/app/ui/icons/icons.tsx

@@ -26,6 +26,16 @@ export function IconAudioFile() {
 	)
 }
 
+
+export function IconDocument() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
+			<path fill="currentColor" d="M19.834 19.75a2.25 2.25 0 0 1-2.25 2.25h-10.5a2.25 2.25 0 0 1-2.25-2.25V9.621c0-.596.236-1.169.658-1.59L10.86 2.66A2.25 2.25 0 0 1 12.45 2h5.133a2.25 2.25 0 0 1 2.25 2.25zm-2.25.75a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75h-5.002l.002 4a2.25 2.25 0 0 1-2.25 2.25h-4v10c0 .414.335.75.75.75zM7.393 8.25l3.69-3.691.001 2.941a.75.75 0 0 1-.75.75zm1.19 6.25a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75">
+			</path>
+		</svg>
+	)
+}
+
 export function IconShield() {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">

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 (
+		<div className="block-wrapper auto grow">
+			<div className="file-stats-container">
+				<div className="file-stats-grid">
+					<div className="file-stat-card">
+						<div className="file-stat-content">
+							<div className="file-stat-icon-wrapper image-icon">
+								<IconImageFile />
+							</div>
+							<div className="file-stat-info">
+								<h4 className="file-stat-title">Image</h4>
+								<span className="file-stat-usage">0%</span>
+							</div>
+						</div>
+						<div className="file-stat-details">
+							<span className="file-stat-count">0 files</span>
+							<span className="file-stat-size">0 GB</span>
+						</div>
+					</div>
+
+					<div className="file-stat-card">
+						<div className="file-stat-content">
+							<div className="file-stat-icon-wrapper video-icon">
+								<IconVideoFile />
+							</div>
+							<div className="file-stat-info">
+								<h4 className="file-stat-title">Videos</h4>
+								<span className="file-stat-usage">0%</span>
+							</div>
+						</div>
+						<div className="file-stat-details">
+							<span className="file-stat-count">0 files</span>
+							<span className="file-stat-size">0 GB</span>
+						</div>
+					</div>
+
+					<div className="file-stat-card">
+						<div className="file-stat-content">
+							<div className="file-stat-icon-wrapper audio-icon">
+								<IconAudioFile />
+							</div>
+							<div className="file-stat-info">
+								<h4 className="file-stat-title">Audios</h4>
+								<span className="file-stat-usage">0%</span>
+							</div>
+						</div>
+						<div className="file-stat-details">
+							<span className="file-stat-count">0 files</span>
+							<span className="file-stat-size">0 GB</span>
+						</div>
+					</div>
+
+					<div className="file-stat-card">
+						<div className="file-stat-content">
+							<div className="file-stat-icon-wrapper document-icon">
+								<IconDocument />
+							</div>
+							<div className="file-stat-info">
+								<h4 className="file-stat-title">Documents</h4>
+								<span className="file-stat-usage">0%</span>
+							</div>
+						</div>
+						<div className="file-stat-details">
+							<span className="file-stat-count">0 files</span>
+							<span className="file-stat-size">0 GB</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

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() {
 						<svg viewBox="0 0 24 24" fill="currentColor">
 							<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
 						</svg>
-						<p className="hidden md:block">{t('home')}</p>
+						<p className="">{t('home')}</p>
 					</Link>
 
 					<DropDownList />
@@ -88,7 +88,7 @@ export default function NavLinks() {
 								<svg viewBox="0 0 24 24" fill="currentColor">
 									<path d={link.img}></path>
 								</svg>
-								<p className="hidden md:block">{link.name}</p>
+								<p className="">{link.name}</p>
 							</Link>
 						);
 					})}
@@ -104,7 +104,7 @@ export default function NavLinks() {
 						<svg viewBox="0 0 24 24" fill="currentColor">
 							<path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"></path>
 						</svg>
-						<p className="hidden md:block">{t('exit')}</p>
+						<p className="">{t('exit')}</p>
 					</Link>
 				</ul>
 			</nav>

src/i18n/messages/en.json

@@ -16,6 +16,7 @@
 		"violations": "Violations",
 		"checks": "Checks",
 		"check": "Checks",
+		"documents": "Documents",
 		"videos": "Videos",
 		"video": "videos",
 		"audios": "Audio",

src/i18n/messages/ru.json

@@ -16,6 +16,7 @@
 		"violations": "Нарушения",
 		"checks": "Проверки",
 		"check": "Проверок",
+		"documents": "Документы",
 		"videos": "Видео",
 		"video": "видео",
 		"audios": "Аудио",