diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx index a6019e0..22d35b6 100644 --- a/src/app/[locale]/pages/dashboard/page.tsx +++ b/src/app/[locale]/pages/dashboard/page.tsx @@ -3,7 +3,7 @@ import { Suspense } from 'react'; import ProtectionOverview from '@/app/ui/dashboard/protection-overview'; import StatsGrid from '@/app/ui/dashboard/stats-grid'; import { useTranslations } from 'next-intl'; -import FilesTable from '@/app/ui/dashboard/files-table'; +import FilesTable from '@/app/ui/dashboard/files-table'; export const metadata: Metadata = { title: 'Dashboard', @@ -18,8 +18,10 @@ export default function Page() {

{t("statistics")}

- - +
+ + +
diff --git a/src/app/components/modalWindow.tsx b/src/app/components/modalWindow.tsx new file mode 100644 index 0000000..95c80db --- /dev/null +++ b/src/app/components/modalWindow.tsx @@ -0,0 +1,32 @@ +import React, { ReactNode } from 'react'; + +interface ModalWindowtProps { + children: ReactNode; + state: boolean; + callBack: (value: boolean) => void; +} + +export default function ModalWindow({ children, state, callBack }: ModalWindowtProps) { + console.log(state); + + return ( + <> + {state && ( +
{ + callBack(false); + }} + > +
e.stopPropagation()} + > + {children} +
+
+ ) + } + + ) +} \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 856c77a..1f34179 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -125,4 +125,26 @@ max-width: 500px; margin: 0 auto; } +} + +.modal-wrapper { + position: fixed; + z-index: 101; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: #0000007a; + + .modal-window { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + background: #fff; + color: #000; + border-radius: 20px; + box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 20px; + } } \ No newline at end of file diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 62d4ba4..a08fab2 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -112,6 +112,10 @@ font-size: 28px; font-weight: 700; margin-bottom: 5px; + + &.btn { + user-select: none; + } } &-label { @@ -136,6 +140,38 @@ display: flex; justify-content: center; } + + &-drop-down-list { + position: absolute; + left: 80%; + top: 50%; + max-height: 0; + color: #fff; + font-size: 16px; + border-radius: 20px; + padding: 0; + border: none; + width: 200px; + z-index: 1; + font-weight: 500; + + background: #ffffff00; + overflow: hidden; + transition: all 0.5s ease; + transform: translateY(-50%); + + &.opened { + max-height: 500px; + padding: 20px; + box-shadow: 0 4px 20px #ffffff34; + background: #7165b6; + } + + a:hover { + font-size: 17px; + transition: all 0.3s ease; + } + } } &-switch { @@ -156,6 +192,8 @@ display: grid; grid-template-columns: repeat(5, 1fr); --boder-collor: #f3f4f6; + border-bottom: 1px solid var(--boder-collor); + align-items: center; .stats-item.images { --card-color-1: #f08c00; @@ -199,8 +237,8 @@ } } - &.last-row { - border-bottom: 1px solid var(--boder-collor); + &.second-row { + border-top: none; } &.left-top-corner { @@ -651,4 +689,11 @@ font-weight: bold; margin-left: 5px; } +} + +.page-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 20px; } \ No newline at end of file diff --git a/src/app/ui/dashboard/protection-overview.tsx b/src/app/ui/dashboard/protection-overview.tsx index 5e4319c..326a102 100644 --- a/src/app/ui/dashboard/protection-overview.tsx +++ b/src/app/ui/dashboard/protection-overview.tsx @@ -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 ( -
+

{t('protecting-your-content')}

{t('current-status-of')}

-
-
0
-
{t('total-files')}
-
-
-
-
0
-
{t('check')}
+ + {totalFiles ? ( + <> +
+
0
+
{t('total-files')}
+
+ +
+
+
0
+
{t('check')}
+
+
+
0
+
{t('violations')}
+
+
+ + ) : ( +
+
+ {t('there-are-no-files-yet')} +
+
{ + setOpenDropDownList(!openDropDownList); + }} + ref={dropDownList} + > + {t('add')} +
+
+ + {t('photo-marking')} + + + {t('video-marking')} + + + {t('audio-marking')} + +
+
+
-
-
0
-
{t('violations')}
-
-
+ )} {isOpen ? (
@@ -48,25 +96,27 @@ export default function ProtectionOverview() {
)}
- + + + + + )}
) } \ No newline at end of file diff --git a/src/app/ui/dashboard/stats-grid.tsx b/src/app/ui/dashboard/stats-grid.tsx index e6514ea..8cba27c 100644 --- a/src/app/ui/dashboard/stats-grid.tsx +++ b/src/app/ui/dashboard/stats-grid.tsx @@ -4,7 +4,7 @@ export default function StatsGrid() { const t = useTranslations("Global"); return ( -
+

{t('your-content')}

@@ -25,20 +25,20 @@ export default function StatsGrid() { {t('checks')}
-
+
{t('images')}
-
+
0
-
+
0
-
+
0
-
+
0
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index e1d2a67..25cf4f0 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -114,7 +114,9 @@ "added": "Added", "no-data": "No data", "view-all": "View all", - "days-ago": "days ago" + "days-ago": "days ago", + "there-are-no-files-yet": "There are no files yet", + "add": "Add" }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 332a49f..a24f5b2 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -114,7 +114,9 @@ "added": "Добавлено", "no-data": "Нет данных", "view-all": "Посмотреть все", - "days-ago": "дней назад" + "days-ago": "дней назад", + "there-are-no-files-yet": "Файлов пока нет", + "add": "Добавить" }, "Login-register-form": { "and": "и",