add counter

src/components/Calendar/Calendar.js

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import style from './Calendar.module.css';
 import calendarMale from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import CalendarComponent from './CalendarComponent';
+import { currentMonth } from './calendarHelper';
 
 const Calendar = () => {
+  const [month, setMonth] = useState('');
+
+  useEffect(() => {
+    setMonth(currentMonth);
+  }, [month]);
+
   return (
     <section className={style.calendar}>
       <div className="container">
@@ -36,7 +43,7 @@ const Calendar = () => {
           <div className="col-12 col-xl-12">
             <CalendarComponent />
             <p className={style.calendarFooter__text}>
-              Июнь : <span> 60 часов </span>
+              {month} : <span> 60 часов </span>
             </p>
           </div>
         </div>

src/components/Calendar/CalendarComponent.js

@@ -5,7 +5,7 @@ import rectangle from '../../images/rectangle__calendar.png';
 import calendarIcon from '../../images/calendar_icon.png';
 import moment from 'moment';
 import 'moment/locale/ru';
-import calendarHelper from './calendarHelper';
+import { calendarHelper, currentMonthAndDay } from './calendarHelper';
 
 const CalendarComponent = () => {
   const [value, setValue] = useState(moment());
@@ -30,10 +30,6 @@ const CalendarComponent = () => {
     return '';
   }
 
-  function currentMonth(day) {
-    return day.format('D MMMM');
-  }
-
   function prevMonth() {
     return value.clone().subtract(1, 'month');
   }
@@ -82,7 +78,7 @@ const CalendarComponent = () => {
                 id="btn"
               >
                 <img className={style.calendarIcon} src={calendarIcon} alt="" />
-                {currentMonth(day)}
+                {currentMonthAndDay()}
               </button>
             ))
           )}

src/components/Calendar/calendarHelper.js

@@ -1,4 +1,7 @@
-export default function calendarHelper(value) {
+import moment from 'moment';
+import 'moment/locale/ru';
+
+export function calendarHelper(value) {
   const startDay = value.clone().startOf('month').startOf('week').startOf('day');
   const endDay = value.clone().endOf('month').endOf('week');
 
@@ -16,3 +19,17 @@ export default function calendarHelper(value) {
 
   return calendar;
 }
+
+export function currentMonth() {
+  const currentMonth = moment().format('MMMM');
+
+  return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1);
+}
+
+// export function currentMonthAndDay(day) {
+//   return day.format('D MMMM');
+// }
+
+export function currentMonthAndDay() {
+  return moment().format('D MMMM');
+}

src/components/Candidate/sections/Section.module.css

@@ -114,7 +114,6 @@
     font-family: 'Muller';
     font-size: 1.3em;
     letter-spacing: normal;
-    line-height: 56.7px;
     text-align: left;
     border: none;
     text-align: center;

src/components/Description/Description.module.css

@@ -86,7 +86,6 @@
 
 @media (max-width: 575.98px) {
   .description__text {
-    /* text-align: center; */
     margin-left: 20px;
     font-size: 1.6em;
   }
@@ -151,7 +150,7 @@
 
 @media (max-width: 575.98px) {
   .description__sp {
-    font-size: 1.6em;
+    font-size: 1.5em;
     text-align: center;
     margin-bottom: 120px;
   }

src/components/Home/Home.js

@@ -65,7 +65,9 @@ const Home = ({ onTestFunc }) => {
     fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page')
       .then((response) => response.json())
       .then((res) => {
+        console.log('RES', res);
         const keys = Object.keys(res);
+
         const values = Object.values(res);
 
         const tempTags = values.map((item, index) =>

src/components/ReportForm/ReportForm.js

@@ -1,22 +1,35 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import style from './ReportForm.module.css';
 import calendarIcon from '../../images/calendar_icon.png';
 import ellipse from '../../images/ellipse.png';
+import remove from '../../images/remove.png';
+import addIcon from '../../images/addIcon.png';
+import { currentMonthAndDay } from '../Calendar/calendarHelper';
 
 const ReportForm = () => {
+  let count = 1;
+
+  const [formId, setFormId] = useState([count]);
+
+  console.log('CCCCCCCCCC', count);
+
+  const addId = () => {
+    count++;
+  };
+
   return (
     <section className="reportForm">
       <div className="container">
         <div className="row">
           <div className="col-xl-12">
-            <div className={style.reportForm__header}>
+            <div className={style.reportForm__block}>
-              <div className={style.reportForm__headerTitle}>
+              <div className={style.reportForm__blockTitle}>
                 <h2>Добавить отчет</h2>
                 <h3>Дата заполнения отчета:</h3>
               </div>
-              <div className={style.reportForm__headerImg}>
+              <div className={style.reportForm__blockImg}>
                 <img className={style.calendarIcon} src={calendarIcon} alt="" />
-                15 июня
+                {currentMonthAndDay()}
               </div>
               <div className={style.reportForm__tasks}>
                 <img src={ellipse} alt="" />
@@ -25,6 +38,73 @@ const ReportForm = () => {
             </div>
           </div>
         </div>
+
+        <div className="row">
+          <div className="col-8">
+            <div className={style.reportForm__text}>
+              <p className={style.text1}>Краткое описание задачи</p>
+              <p className={style.text2}>Количество часов</p>
+            </div>
+
+            {formId.map((id) => (
+              <form id={id} key={id} className={style.reportForm__form}>
+                <span>{id}.</span>
+                <div className={style.input__text}>
+                  <input name="text" type="text" />
+                </div>
+                <div className={style.input__number}>
+                  <input name="number" type="number" />
+                </div>
+                <img src={remove} alt="" />
+              </form>
+            ))}
+            {/* <form id="1" className={style.reportForm__form}>
+              <span>1.</span>
+              <div className={style.input__text}>
+                <input name="text" type="text" />
+              </div>
+              <div className={style.input__number}>
+                <input name="number" type="number" />
+              </div>
+              <img src={remove} alt="" />
+            </form> */}
+
+            <div className={style.reportForm__formAdd}>
+              <img onClick={() => addId()} src={addIcon} alt="" />
+              <span>Добавить еще </span>
+            </div>
+          </div>
+          <div className="col-4"></div>
+        </div>
+
+        <div className="row">
+          <div className="col-12">
+            <div className={style.reportForm__inptuBox}>
+              <div className={style.reportForm__tasks}>
+                <img src={ellipse} alt="" />
+                <span>Какие сложности возникли?</span>
+              </div>
+              <input type="text" />
+              <div className={style.reportForm__tasks}>
+                <img src={ellipse} alt="" />
+                <span>Что планируется сделать завтра?</span>
+              </div>
+              <input type="text" />
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-12">
+            <div className={style.reportForm__footer}>
+              <button className={style.reportForm__footer__btn} type="submit">
+                Отправить
+              </button>
+              <p className={style.reportForm__footer__text}>
+                Всего за день : <span>60 часов</span>
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );

src/components/ReportForm/ReportForm.module.css

@@ -1,8 +1,8 @@
-.reportForm__headerTitle {
+.reportForm__blockTitle {
   margin-top: 76px;
 }
 
-.reportForm__headerTitle > h2 {
+.reportForm__blockTitle > h2 {
   color: #282828;
   font-family: 'GT Eesti Pro Display';
   font-size: 3.3em;
@@ -13,7 +13,7 @@
   text-align: left;
 }
 
-.reportForm__headerTitle > h3 {
+.reportForm__blockTitle > h3 {
   font-family: 'GT Eesti Pro Display';
   font-size: 2.1em;
   font-weight: 400;
@@ -25,7 +25,7 @@
   margin-bottom: 35px;
 }
 
-.reportForm__headerImg {
+.reportForm__blockImg {
   width: 280px;
   height: 42px;
   box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
@@ -43,7 +43,7 @@
   text-align: left;
 }
 
-.reportForm__headerImg > img {
+.reportForm__blockImg > img {
   margin-left: 20px;
   margin-right: 20px;
 }
@@ -71,3 +71,169 @@
   line-height: 16.81px;
   text-align: left;
 }
+
+.reportForm__text {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 40px;
+}
+
+.reportForm__text > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.3em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+  margin-bottom: 26px;
+}
+
+.text1 {
+  margin-left: 20px;
+}
+
+.text2 {
+  margin-right: 86px;
+}
+
+.reportForm__form {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 14px;
+  margin-bottom: 28px;
+}
+
+.reportForm__form > span {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  text-align: left;
+  position: absolute;
+  left: 0;
+  bottom: 7px;
+}
+
+.input__text,
+.input__number {
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+}
+
+/* .input__text > label,
+.input__number > label {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.3em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+  margin-bottom: 26px;
+} */
+
+/* .input__text > label {
+  margin-left: -13px;
+} */
+
+.input__text > input {
+  width: 460px;
+  height: 42px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+  outline: none;
+  font-size: 1.8em;
+}
+
+.input__number > input {
+  width: 141px;
+  height: 42px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+  outline: none;
+  font-size: 1.8em;
+}
+
+.reportForm__form > img {
+  margin-top: 5px;
+  width: 23px;
+  height: 23px;
+}
+
+.reportForm__formAdd {
+  margin-left: 28px;
+}
+
+.reportForm__formAdd > span {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.3em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+  margin-left: 20px;
+}
+
+.reportForm__inptuBox > input {
+  margin-left: 10px;
+  margin-top: 30px;
+  margin-bottom: 40px;
+  width: 460px;
+  height: 42px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+}
+
+.reportForm__footer {
+  display: flex;
+  align-items: center;
+}
+
+.reportForm__footer__btn {
+  width: 166px;
+  height: 62px;
+  box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
+  border-radius: 31px;
+  background-color: #ffffff;
+  background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
+    linear-gradient(
+      36deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.16) 47%,
+      rgba(255, 255, 255, 0.17) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+  color: #ffffff;
+  font-family: 'Muller';
+  font-size: 1.6em;
+  letter-spacing: normal;
+  text-align: center;
+  border: none;
+}
+
+.reportForm__footer__text {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.9em;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 22.38px;
+  text-align: left;
+  margin-left: 40px;
+  margin-bottom: 0;
+}
+
+.reportForm__footer__text > span {
+  font-weight: 100;
+}