добавляет карточки с достижениями на профиль

codEnjoyer · Dec 5, 2023 · 34bc743 · 34bc743
1 parent 7aa200e
commit 34bc743
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 11 deletions.
diff --git a/frontend/src/UIComponents/modalWindow/ModalWindow.tsx b/frontend/src/UIComponents/modalWindow/ModalWindow.tsx
@@ -13,7 +13,6 @@ const ModalWindow: React.FC<ModalWindowProps> =
     ({body, onClose, windowContentStyles}: PropsWithChildren<ModalWindowProps>) => {
         const element = useRef(null);
 
-
         useEffect(() => {
             const onKeypress = (e: KeyboardEvent) => e?.key === "Esc" || e.key === "Escape" ? onClose() : null;
             gsap.fromTo(element.current, {opacity: 0}, {opacity: 1, duration: 0.2})

diff --git a/frontend/src/components/mapMenu/UIMapMenu/UserProfile/Achievement.tsx b/frontend/src/components/mapMenu/UIMapMenu/UserProfile/Achievement.tsx
@@ -1,13 +1,21 @@
 import React from 'react';
 
 interface IPropTypes {
-    name: string
+    name: string,
+    description: string
 }
 
 const Achievement: React.FC<IPropTypes> = ({name}) => {
     return (
-        <li>
-            {name}
+        <li className="achievements-list-item">
+            <p>{name}</p>
+            <div className="achievement-image">
+                <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M0.5 45.5V40.5H5.5V0.5H30.5V3H40.5V40.5H45.5V45.5H35.5V8H30.5V45.5H0.5ZM20.5 25.5C21.2083 25.5 21.8021 25.2604 22.2813 24.7813C22.7604 24.3021 23 23.7083 23 23C23 22.2917 22.7604 21.6979 22.2813 21.2188C21.8021 20.7396 21.2083 20.5 20.5 20.5C19.7917 20.5 19.1979 20.7396 18.7188 21.2188C18.2396 21.6979 18 22.2917 18 23C18 23.7083 18.2396 24.3021 18.7188 24.7813C19.1979 25.2604 19.7917 25.5 20.5 25.5ZM10.5 40.5H25.5V5.5H10.5V40.5Z"
+                        fill="#2B2A29"/>
+                </svg>
+            </div>
         </li>
     );
 };

diff --git a/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx
@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import CustomInput from "../../../../UIComponents/customInput/CustomInput.tsx";
 import {IUserType} from "../../../../types/UserType.ts";
 import Achievement from "./Achievement.tsx";
+import {IAchievementType} from "../../../../types/AchievementType.ts";
 
 
 interface IUserProfileModalProps {
@@ -12,6 +13,12 @@ interface IUserProfileModalProps {
 
 
 const UserProfileModalBody: React.FC<IUserProfileModalProps> = ({user, formattedDate}) => {
+    const achievements: IAchievementType[] = [
+        {id: "1", title: "Начало работы", description: "Описание 1"},
+        {id: "2", title: "Середина работы ", description: "Описание 2"},
+        {id: "3", title: "Конец работы ", description: "Описание 3"}
+    ]
+
     useEffect(() => {
         console.log(user)
     }, [user])
@@ -29,15 +36,20 @@ const UserProfileModalBody: React.FC<IUserProfileModalProps> = ({user, formatted
                              height="55px" placeholder="ФИО"/>
                 <CustomInput type="email" width="350px" placeholder="email" disabled={true} value={user?.email}
                              height="55px"/>
-                <CustomInput type="text" width="350px" placeholder="Дата трудоустройства" disabled={true} defaultValue={formattedDate}
+                <CustomInput type="text" width="350px" placeholder="Дата трудоустройства" disabled={true}
+                             defaultValue={formattedDate}
                              height="55px"/>
             </div>
             <div className="achievements">
-                <p>ДОСТИЖЕНИЯ</p>
-                <ul>
-                    <Achievement name="Достижение 1"/>
-                    <Achievement name="Достижение 2"/>
-                    <Achievement name="Достижение 3"/>
+                <p className="achievements-title">ДОСТИЖЕНИЯ</p>
+                <ul className="achievements-list">
+                    {achievements.map((achievement) =>
+                        <Achievement
+                            name={achievement.title}
+                            key={achievement.id}
+                            description={achievement.description}
+                        />
+                    )}
                 </ul>
             </div>
         </div>

diff --git a/frontend/src/styles/mapMenu.css b/frontend/src/styles/mapMenu.css
diff --git a/frontend/src/styles/mapMenu.css.map b/frontend/src/styles/mapMenu.css.map
diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -128,3 +128,27 @@
   height: 60px;
   border-radius: 10px;
 }
+
+.achievements-list {
+  display: flex;
+  flex-direction: row;
+}
+
+.achievements-title {
+  text-align: left;
+  margin-left: 10px;
+}
+
+.achievements-list-item {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+  background: $cardBGColor;
+  width: 150px;
+  height: 120px;
+  border-radius: 20px;
+}
+
+.achievement-image {
+  margin-top: 10px;
+}
diff --git a/frontend/src/types/AchievementType.ts b/frontend/src/types/AchievementType.ts
@@ -0,0 +1,5 @@
+export interface IAchievementType {
+    id: string,
+    title: string,
+    description: string,
+}