Merge pull request #105 from AnaSerg/feature/charts_and_main

Feature/charts and main

src/components/Articles/Article/Article.tsx

@@ -1,30 +1,29 @@
 import styles from "./article.module.css";
-import {ArticleInterface} from "@/types.ts";
-import React from "react";
+import {Card} from "@/types.ts";
+import {ReactElement} from "react";
 import {useNavigate} from "react-router-dom";
 import play from "../../../../public/play.svg";
 
 interface ArticleProps {
-  article: ArticleInterface;
+  article: Card;
 }
 
 
-export const Article: React.FC<ArticleProps> = ({article}) => {
+export const Article = ({article}: ArticleProps): ReactElement => {
   const navigate = useNavigate();
-  const routeChange = () => {
-    navigate(`/useful`);
-  }
+
   return (
-    <div className={styles.article} onClick={routeChange}>
-      <img src={article.banner} className={styles.image}/>
-      {article.type === 'видео' ?
+    <div className={styles.article} onClick={() => navigate(`/entries/${article.id}`)}>
+      <img src={article.preview_image} className={styles.image}/>
+      {article.category.some((temp) => temp.id === 3)
+        ?
         <div className={styles.play}><img src={play} alt="play"/></div>
         :
-        ""}
+        ""
+      }
       <h3 className={styles.title}>{article.title}</h3>
       <div className={styles.container}>
-        <p className={styles.text}>{article.type}</p>
-        <p className={styles.text}>{article.length}</p>
+        {/* <p className={styles.text}>{article.category[0].name}</p> */}
       </div>
     </div>
   );

src/components/Articles/Article/article.module.css

@@ -1,10 +1,11 @@
 .article {
   position: relative;
   display: flex;
+  box-sizing: border-box;
 
   /* width: 47%; */
   width: 156px;
-  height: 210px;
+  height: 234px;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
@@ -43,36 +44,6 @@
   font: var(--font-caption);
 }
 
-.article:last-of-type {
-  flex-direction: column-reverse;
-  justify-content: flex-end;
-  padding: 9px;
-  border: white 12px solid;
-  border-radius: 24px;
-  margin: 0;
-  background: linear-gradient(90deg, rgb(85 69 168 / 80%) 0%, rgb(231 129 195 / 80%) 94.4%),
-  linear-gradient(0deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 20%));
-  background-clip: border-box;
-}
-
-.article:last-of-type > .image {
-  width: 45px;
-  height: 35px;
-  align-self: self-end;
-  margin-top: 13px;
-  margin-right: 14px;
-}
-
-.article:last-of-type > .title {
-  margin: 34px 0 0;
-  color: var(--color-white);
-  font: var(--font-more);
-}
-
-.article:last-of-type > .container {
-  display: none;
-}
-
 .play {
   position: absolute;
   top: 44px;
@@ -83,7 +54,3 @@
   color: #0c4128;
   opacity: 0.8;
 }
-
-.article:last-of-type > .play {
-  display: none;
-}

src/components/Articles/Articles.tsx

@@ -1,31 +1,30 @@
-import {FC} from "react";
+import {ReactElement} from "react";
 import styles from "./articles.module.css";
 import {Article} from "./Article/Article.tsx";
-import {ArticleInterface} from "@/types.ts";
-import vector from "@/assets/Vector.svg"
+import {Card} from "@/types.ts";
+import {useNavigate} from "react-router";
 
 interface ArticlesListProps {
-  articles: ArticleInterface[];
+  articles: Card[];
   title: string;
 }
 
-export const Articles: FC<ArticlesListProps> = ({articles, title}) => {
-  return (
-    <div className={styles.container}>
-      <h3 className={styles.title}>{title}</h3>
-      <div className={styles.articles}>
-        {articles.map((article, index) => (
-          <Article key={index} article={article}/>
-        ))}
-        <Article
-          article={{
-            type: "",
-            title: "Смотреть все статьи и видео",
-            banner: vector,
-            length: "",
-          }}
-        />
+export const Articles = ({articles, title}: ArticlesListProps): ReactElement | null => {
+  const navigate = useNavigate();
+
+  if(articles && articles.length !== 0) {
+    return (
+      <div className={styles.container}>
+        <h3 className={styles.title}>{title}</h3>
+        <div className={styles.articles}>
+          {articles.slice(0, 3).map((article, index) => (
+            <Article key={index} article={article}/>
+          ))}
+          <button onClick={() => navigate('/entries')} className={styles.button}>Смотреть все статьи и видео</button>
+        </div>
       </div>
-    </div>
-  );
+    );
+  } else {
+    return null;
+  }
 };

src/components/Articles/articles.module.css

@@ -15,3 +15,20 @@
   color: var(--color-black);
   font: var(--font-h3);
 }
+
+.button {
+  width: 156px;
+  height: 234px;
+  padding-bottom: 68px;
+  border: 12px solid #fff;
+  border-radius: 20px;
+  background-image: url('./assets/articles-arrow-bg.svg'), url('./assets/articles-btn.jpg');
+  background-position: top 92px right 10px, center;
+  background-repeat: no-repeat no-repeat;
+  background-size: auto, cover;
+  color: #fff;
+  cursor: pointer;
+  font: var(--font-h4-alert);
+  text-align: left;
+}
+

src/components/BurnoutLevel/BurnoutLevel.tsx

@@ -30,7 +30,7 @@ export const BurnoutLevel = ({ burnOutData }: Props) => {
   useEffect(() => {
     if (burnOutData) {
       setBurnoutValues(burnOutData.slice(0));
-    } else if (pathname === "/" && burnoutLevel) {
+    } else if (pathname === "/main" && burnoutLevel) {
       setBurnoutValues(burnoutLevel.slice(0));
     }
   }, [pathname, burnOutData, burnoutLevel]);

src/components/BurnoutTestBanner/BurnoutTestBanner.module.scss

@@ -37,10 +37,6 @@
   }
 }
 
-.date-till {
-  font: var(--font-body);
-}
-
 .image {
   width: 100%;
   &-container {

src/components/BurnoutTestBanner/BurnoutTestBanner.tsx

@@ -14,7 +14,6 @@ export const BurnoutTestBanner = ({id}: BurnoutTestProps): JSX.Element => {
       <div className={styles.textContainer}>
         <div className={styles.textTop}>
           <h1 className={styles.textHeading}>Пройдите тест о выгорании</h1>
-          <span className={styles.dateTill}>до 20 cентября </span>
         </div>
         <div className={styles.textBottom}>
           <p className={styles.textDescription}>

src/components/EventsMain/EventsMainCard/EventsMainCard.tsx

@@ -22,7 +22,6 @@ export const EventsMainCard: React.FC<Props> = ({item, fetchEvents}) => {
     // if (moveMouse === 0) {
       setIsPopupEventMain(true);
       // console.log(e);
-      console.log('yes');
     // }
 
     // moveMouse ++;
@@ -31,7 +30,6 @@ export const EventsMainCard: React.FC<Props> = ({item, fetchEvents}) => {
     // moveMouse === 0 && console.log(e);
     // moveMouse = 0;
     setIsPopupEventMain(false);
-    console.log('no')
   }
 
 

src/components/EventsMain/EventsMainPopup/eventsMainPopup.module.css

@@ -1,22 +1,23 @@
 .popupEvent {
-  /* display: none; */
-  opacity: 0;
   position: absolute;
   right: 350px;
   bottom: 100px;
-  transition: opacity 0.5s linear;
+  display: none;
+  opacity: 0;
+
+  /* transition: opacity 0.2s linear; */
 }
 
 .popupEvent_active {
-  /* display: block; */
-  opacity: 1;
-  transition: opacity 0.5s linear;
   position: absolute;
   right: 350px;
   bottom: 100px;
+  display: block;
+  border: 1px solid #e9eff2;
   border-radius: 20px;
   box-shadow: var(--shadow-medium);
-  border: 1px solid #e9eff2;
+  opacity: 1;
+  transition: opacity 0.2s linear;
 
   /* top: -64px; */
 }