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

develop

Browse Source
This commit is contained in:
smanylov
2025-12-18 17:21:18 +07:00
parent a538fe1684
commit 7540dd57de
8 changed files with 201 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/dashboard/protection-overview.tsx
+83 -33
View File
@@ -1,8 +1,10 @@
'use client'
import { useState } from 'react';
import { useState, useRef } from 'react';
import { PieChartComponent } from '@/app/components/PieChartComponent';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useClickOutside } from '@/app/hooks/useClickOutside';
const data = [
@@ -11,30 +13,76 @@ const data = [
{ name: 'audios', value: 25, color: '#1971c2' },
];
/* нужно что бы включать выключать кнопки добавления маркировок */
const totalFiles = 1;
export default function ProtectionOverview() {
const [isOpen, setIsOpen] = useState(false);
const t = useTranslations('Global');
const [openDropDownList, setOpenDropDownList] = useState(false);
const dropDownList = useRef(null);
useClickOutside(dropDownList, () => {
setOpenDropDownList(false)
});
return (
<div className="protection-overview">
<div className="protection-overview grow">
<h3>{t('protecting-your-content')}</h3>
<p>{t('current-status-of')}</p>
<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
<div className="protection-stat total-files">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('total-files')}</div>
</div>
<div className="protection-stat total-checks">
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
{totalFiles ? (
<>
<div className="protection-stat total-files">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('total-files')}</div>
</div>
<div className="protection-stat total-checks">
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
</div>
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
</div>
</div>
</>
) : (
<div className="protection-stat total-files relative">
<div className="protection-stat-label">
{t('there-are-no-files-yet')}
</div>
<div
className="protection-stat-value btn"
onClick={() => {
setOpenDropDownList(!openDropDownList);
}}
ref={dropDownList}
>
{t('add')}
<div
className={`protection-stat-drop-down-list ${openDropDownList ? 'opened' : ''}`}
>
<div
className="flex flex-col text-center"
>
<Link href='/pages/marking-photo'>
{t('photo-marking')}
</Link>
<Link href='/pages/marking-video'>
{t('video-marking')}
</Link>
<Link href='/pages/marking-audio'>
{t('audio-marking')}
</Link>
</div>
</div>
</div>
</div>
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
</div>
</div>
)}
{isOpen ? (
<div className="protection-stat total-usage">
<PieChartComponent data={data} />
@@ -48,25 +96,27 @@ export default function ProtectionOverview() {
</div>
)}
</div>
<button
className="protection-overview-switch cursor-pointer"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<svg
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
{!!totalFiles && (
<button
className="protection-overview-switch cursor-pointer"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
<svg
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
)}
</div>
)
}
src/app/ui/dashboard/stats-grid.tsx
+6 -6
View File
@@ -4,7 +4,7 @@ export default function StatsGrid() {
const t = useTranslations("Global");
return (
<div className="block-wrapper stats-wrapper">
<div className="block-wrapper stats-wrapper grow">
<h3>
{t('your-content')}
</h3>
@@ -25,20 +25,20 @@ export default function StatsGrid() {
{t('checks')}
</div>
<div className="stats-item first-column images">
<div className="stats-item first-column second-row images">
<IconImageFile />
{t('images')}
</div>
<div className="stats-item">
<div className="stats-item second-row">
0
</div>
<div className="stats-item">
<div className="stats-item second-row">
0
</div>
<div className="stats-item">
<div className="stats-item second-row">
0
</div>
<div className="stats-item last-column">
<div className="stats-item second-row last-column">
0
</div>