add my content layout

src/app/ui/my-content/new/my-content-page-title.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useTranslations } from 'next-intl';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import { convertBytes } from '@/app/lib/convertBytes';
+
+export default function MyContentPageTitleColorFrame({ title, description }: { title: string, description: string }) {
+	const t = useTranslations('Global');
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
+	return (
+		<div className="page-title-color-frame">
+			<div className="header-content">
+				<div className="header-main">
+					<h1>
+						{t(title)}
+					</h1>
+					<p>
+						{t(description)}
+					</p>
+				</div>
+				<div className="header-stats">
+					<div className="header-stat-item">
+						<div className="header-stat-value">{filesInfo?.all_files_quantity}</div>
+						<div className="header-stat-label">Файлов</div>
+					</div>
+					<div className="header-stat-divider"></div>
+					<div className="header-stat-item">
+						<div className="header-stat-value">0</div>
+						<div className="header-stat-label">Защищено</div>
+					</div>
+					<div className="header-stat-divider"></div>
+					<div className="header-stat-item">
+						<div className="header-stat-value">{filesInfo.all_files_size ? convertBytes(filesInfo.all_files_size) : 0}</div>
+						<div className="header-stat-label">Хранилище</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/my-content/new/my-content-stats-overview.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useTranslations } from 'next-intl';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import {convertBytes} from '@/app/lib/convertBytes';
+
+export default function MyContentStatsOverview() {
+	const t = useTranslations('Global');
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
+	return (
+		<div className="my-content-stats-overview">
+			<div className="stat-card files" data-icon="📄">
+				<div className="stat-header">
+					<div className="stat-icon">📄</div>
+					<div className="stat-trend">+0%</div>
+				</div>
+				<div className="stat-value">{filesInfo?.all_files_quantity}</div>
+				<div className="stat-label">Всего файлов</div>
+			</div>
+
+			<div className="stat-card protected" data-icon="🛡">
+				<div className="stat-header">
+					<div className="stat-icon">🛡</div>
+					<div className="stat-trend">+0%</div>
+				</div>
+				<div className="stat-value">0</div>
+				<div className="stat-label">Защищено файлов</div>
+			</div>
+
+			<div className="stat-card checks" data-icon="🔍">
+				<div className="stat-header">
+					<div className="stat-icon">🔍</div>
+					<div className="stat-trend">+0%</div>
+				</div>
+				<div className="stat-value">0</div>
+				<div className="stat-label">Проверок защиты</div>
+			</div>
+
+			<div className="stat-card storage" data-icon="💾">
+				<div className="stat-header">
+					<div className="stat-icon">💾</div>
+					<div className="stat-trend">+0%</div>
+				</div>
+				<div className="stat-value">{filesInfo.all_files_size ? convertBytes(filesInfo.all_files_size) : 0}</div>
+				<div className="stat-label">Хранилище</div>
+			</div>
+		</div>
+	)
+}