Перенесла карточку сотрудника в папку попапа, использовала попап для …

…создания дочернего попапа

src/components/NewEmployee/NewEmployee.module.scss → src/components/Popup/NewEmployee/NewEmployee.module.scss

@@ -1,8 +1,15 @@
-@use '../../globalStyles/variables.scss' as v;
-@use '../../globalStyles/mixins.scss' as m;
+@use '../../../globalStyles/variables.scss' as v;
+@use '../../../globalStyles/mixins.scss' as m;
+
+.newEmployee {
+  width: 557px;
+  background-color: v.$login-background;
+}
 
 .newEmployeeContainer {
   width: 509px;
+  margin: auto;
+  padding: 24px 0;
   display: flex;
   flex-direction: column;
   gap: 16px;

src/components/Popup/NewEmployee/NewEmployee.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import UniversalInput from 'ui-lib/Inputs/UniversalInput/UniversalInput';
+import EmailInput from 'ui-lib/Inputs/EmailInput/EmailInput';
+import PasswordInput from 'ui-lib/Inputs/PasswordInput/PasswordInput';
+import { UniversalButton } from 'ui-lib/Buttons';
+import Popup from '../Popup';
+import styles from './NewEmployee.module.scss';
+import additionalStyles from '../../../ui-lib/Inputs/UniversalInput/UniversalInput.module.scss';
+
+const NewEmployeePopup: React.FC<{ closePopup: () => void }> = ({ closePopup }) => {
+  const name = '';
+  const lastName = '';
+  const email = '';
+  const nickname = '';
+  const password = '';
+  const errorText = '';
+  const [isValid, setIslValid] = useState(false);
+
+  const handleCancel = () => {
+    closePopup();
+  };
+  return (
+    <Popup isOpen onClose={closePopup}>
+      <form className={styles.newEmployee}>
+        <div className={styles.newEmployeeContainer}>
+          <div className={styles.newEmployeeWrapper}>
+            <UniversalInput
+              className={styles.nameEmployee}
+              id={name}
+              label='Имя'
+              placeholder='Иван'
+              width={246.5}
+            />
+            <UniversalInput
+              className={styles.nameEmployee}
+              id={lastName}
+              label='Фамилия'
+              placeholder='Иванов'
+              width={246.5}
+            />
+          </div>
+          <UniversalInput
+            className={`${additionalStyles.input} ${isValid ? styles.invalidInput : ''}`}
+            id={nickname}
+            label='Telegram'
+            placeholder='@BorKate'
+          />
+          {isValid && <p className={styles.errorText}>{errorText}</p>}
+          <EmailInput
+            className={`${additionalStyles.input} ${isValid ? styles.invalidInput : ''}`}
+            id={email}
+          />
+          {isValid && <p className={styles.errorText}>{errorText}</p>}
+          <PasswordInput id={password} />
+          <div className={styles.newEmployeeWrapper}>
+            <UniversalButton className={styles.newEmployeeAddButton} width={246.5}>
+              Добавить сотрудника
+            </UniversalButton>
+            <UniversalButton
+              className={styles.newEmployeeButton}
+              isFilled={false}
+              width={246.5}
+              onClick={handleCancel}
+            >
+              Отменить
+            </UniversalButton>
+          </div>
+        </div>
+      </form>
+    </Popup>
+  );
+};
+
+export default NewEmployeePopup;

src/components/SideBar/SideBar.tsx

@@ -11,6 +11,7 @@ import {
 import { lid } from 'assets/images'; // Initial image
 import SideBarUser from 'components/SideBarUser/SideBarUser';
 import SideBarUserMenu from 'components/SideBarUserMenu/SideBarUserMenu';
+import NewEmployeePopup from 'components/Popup/NewEmployee/NewEmployee';
 import React, { useState } from 'react';
 import { useSelector } from 'services/hooks';
 import { TTask } from 'types/types';
@@ -23,11 +24,20 @@ const SideBar: React.FC = () => {
   const currentUsers = useSelector((state) => state.users);
 
   const [isSidebarMenuOpen, setisSidebarMenuOpen] = useState(false);
+  const [isNewEmployeePopupOpen, setIsNewEmployeePopupOpen] = useState(false);
 
   const handleToggleMenu = () => {
     setisSidebarMenuOpen(!isSidebarMenuOpen);
   };
 
+  const handleNewEmployeeButtonClick = () => {
+    setIsNewEmployeePopupOpen(true);
+  };
+
+  const handleCancel = () => {
+    setIsNewEmployeePopupOpen(false);
+  };
+
   return (
     <section className={styles.SideBar}>
       <div onClick={handleToggleMenu} className={styles.userWrapper}>
@@ -76,7 +86,7 @@ const SideBar: React.FC = () => {
       </ul>
       <div className={styles.teamWrapper}>
         <h2 className={styles.teamName}>Команда</h2>
-        <button className={styles.teamImg} />
+        <button className={styles.teamImg} onClick={handleNewEmployeeButtonClick} />
       </div>
       <ul className={styles.membersWrapper}>
         <li className={styles.teamLi}>
@@ -87,6 +97,7 @@ const SideBar: React.FC = () => {
           return <SideBarUser fullName={user.first_name} key={uuidv4()} />;
         })}
       </ul>
+      {isNewEmployeePopupOpen && <NewEmployeePopup closePopup={handleCancel} />}
     </section>
   );
 };