122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
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 = [
|
|
{ name: 'images', value: 33, color: '#f08c00' },
|
|
{ name: 'videos', value: 50, color: '#2f9e44' },
|
|
{ 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 grow">
|
|
<h3>{t('protecting-your-content')}</h3>
|
|
<p>{t('current-status-of')}</p>
|
|
<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
|
|
|
|
|
|
{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>
|
|
)}
|
|
{isOpen ? (
|
|
<div className="protection-stat total-usage">
|
|
<PieChartComponent data={data} />
|
|
</div>
|
|
) : (
|
|
<div className="protection-stat total-usage">
|
|
<div className="protection-stat-value">0 / 0</div>
|
|
<div className="protection-stat-label">
|
|
{t('disk-space-used')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!!totalFiles && (
|
|
<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"
|
|
>
|
|
<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>
|
|
)
|
|
} |