From 7f56debe167fd492b46cea581001b8b3dff75ba6 Mon Sep 17 00:00:00 2001 From: smanylov Date: Fri, 16 Jan 2026 17:07:02 +0700 Subject: [PATCH] add modal windows --- src/app/components/modalWindow.tsx | 29 ++++ src/app/styles/global-styles.scss | 33 ++++ .../actions-modals/action-analytics.tsx | 34 ++++ .../actions-modals/action-documents.tsx | 33 ++++ .../main-page/actions-modals/action-note.tsx | 48 ++++++ .../main-page/actions-modals/action-time.tsx | 46 +++++ src/app/ui/main-page/cases-list.tsx | 2 +- src/app/ui/main-page/quick-actions.tsx | 159 ++++++++++++------ 8 files changed, 333 insertions(+), 51 deletions(-) create mode 100644 src/app/components/modalWindow.tsx create mode 100644 src/app/ui/main-page/actions-modals/action-analytics.tsx create mode 100644 src/app/ui/main-page/actions-modals/action-documents.tsx create mode 100644 src/app/ui/main-page/actions-modals/action-note.tsx create mode 100644 src/app/ui/main-page/actions-modals/action-time.tsx diff --git a/src/app/components/modalWindow.tsx b/src/app/components/modalWindow.tsx new file mode 100644 index 0000000..e2ee970 --- /dev/null +++ b/src/app/components/modalWindow.tsx @@ -0,0 +1,29 @@ +import React, { ReactNode } from 'react'; + +interface ModalWindowtProps { + children: ReactNode | null; + state: boolean; + callBack: (value: boolean) => void; +} + +export default function ModalWindow({ children, state, callBack }: ModalWindowtProps) { + 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 7c9d13a..6343433 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -72,6 +72,11 @@ padding: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + } } } @@ -82,6 +87,12 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; border: 1px solid transparent; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + border-color: #667eea; + } } .cases-list-wrapper { @@ -195,4 +206,26 @@ } } } +} + +.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: #1f2937; + border-radius: 20px; + box-shadow: 0px 4px 20px #0000001a; + } } \ No newline at end of file diff --git a/src/app/ui/main-page/actions-modals/action-analytics.tsx b/src/app/ui/main-page/actions-modals/action-analytics.tsx new file mode 100644 index 0000000..7092379 --- /dev/null +++ b/src/app/ui/main-page/actions-modals/action-analytics.tsx @@ -0,0 +1,34 @@ +export default function ActionAnalytics() { + return ( +
+
+

+ + Аналитика работы +

+ +
+
+
+

Активных дел

+

7

+
+
+

Время сегодня

+

0 мин

+
+
+

Процент успеха

+

10%

+
+
+

Средний чек

+

+ ₽10 000

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/main-page/actions-modals/action-documents.tsx b/src/app/ui/main-page/actions-modals/action-documents.tsx new file mode 100644 index 0000000..259a618 --- /dev/null +++ b/src/app/ui/main-page/actions-modals/action-documents.tsx @@ -0,0 +1,33 @@ +export default function ActionDocuments() { + return ( +
+
+

+ + Шаблоны документов +

+ +
+
+
+

📄 Исковое заявление

+

Шаблон искового заявления о защите авторских прав

+
+
+

📝 Претензия

+

Досудебная претензия о нарушении прав

+
+
+

⚖️ Ходатайство

+

Ходатайство о приобщении доказательств

+
+
+

✍️ Соглашение

+

Соглашение о правовой помощи

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/main-page/actions-modals/action-note.tsx b/src/app/ui/main-page/actions-modals/action-note.tsx new file mode 100644 index 0000000..4a1fc89 --- /dev/null +++ b/src/app/ui/main-page/actions-modals/action-note.tsx @@ -0,0 +1,48 @@ +export default function ActionNote() { + return ( +
+
+

+ + Создать заметку +

+ +
+
+ + + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/main-page/actions-modals/action-time.tsx b/src/app/ui/main-page/actions-modals/action-time.tsx new file mode 100644 index 0000000..8a528b1 --- /dev/null +++ b/src/app/ui/main-page/actions-modals/action-time.tsx @@ -0,0 +1,46 @@ +export default function ActionTime() { + return ( +
+
+

+ + Добавить время работы +

+ +
+
+ + + +
+
+ + +
+
+ + +
+
+ +
+ +
+ +
+ + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/main-page/cases-list.tsx b/src/app/ui/main-page/cases-list.tsx index 08d5616..066d3f8 100644 --- a/src/app/ui/main-page/cases-list.tsx +++ b/src/app/ui/main-page/cases-list.tsx @@ -39,7 +39,7 @@ export default function CasesList() { - Показать все дела (12) + Показать все дела (0) diff --git a/src/app/ui/main-page/quick-actions.tsx b/src/app/ui/main-page/quick-actions.tsx index 49c1200..2249dcb 100644 --- a/src/app/ui/main-page/quick-actions.tsx +++ b/src/app/ui/main-page/quick-actions.tsx @@ -1,63 +1,122 @@ +'use client' + import { IconBlank, IconDocument, IconClock, IconGraphMultiple } from '@/app/ui/icons/icons'; +import { useState } from 'react'; +import ModalWindow from '@/app/components/modalWindow'; +import ActionAnalytics from '@/app/ui/main-page/actions-modals/action-analytics'; +import ActionDocuments from '@/app/ui/main-page/actions-modals/action-documents'; +import ActionNote from '@/app/ui/main-page/actions-modals/action-note'; +import ActionTime from '@/app/ui/main-page/actions-modals/action-time'; export default function QuickActions() { + const [showModal, setShowModal] = useState(false); + const [showModalContent, setShowModalContent] = useState(null); + return ( -
- + <> +
-
- + -
- + - + + - + + + + + { + setShowModal(false); + }}> + {(() => { + switch (showModalContent) { + case 'note': + return + case 'time': + return + case 'analytics': + return + case 'documents': + return + default: + return
none
; + } + })()} + + + ) } \ No newline at end of file