SOROKA-140: mock data for articles (#21)

SOROKA-140: mock data for articles

src/pages/Articles.tsx

@@ -1,10 +1,6 @@
 import { useState } from "react";
-
 import { Link } from "react-router-dom";
-import Farfor from "../assets/images/articles_farfor.jpg";
-import Grafin from "../assets/images/articles_grafin.jpg";
-import Ikona from "../assets/images/articles_ikona.jpg";
-import Petr from "../assets/images/articles_petr.jpg";
+import { ARTICLES } from "../utils/constants";
 
 const Articles = () => {
   const [imageUrl, setImageUrl] = useState<string>("");
@@ -124,58 +120,19 @@ const Articles = () => {
       <div className="main_section right flex column content--start items--start">
         <h1 className="section_title blue">Статьи</h1>
         <div className="section_content articles_container">
-          <div className="articles_block">
-            <Link
-              className="articles_link"
-              to="/single-article/1"
-              onMouseEnter={() => setImageUrl(Petr)}
-              onMouseLeave={() => setImageUrl("")}
-            >
-              <div className="articles_title">
-                Невозможно было не узнать его: всякого поражало врожденное ему величие. <br />
-                Живописные портреты Петра Великого
-              </div>
-              <div className="articles_author">Автор: Оксана Каяндер</div>
-            </Link>
-          </div>
-          <div className="articles_block">
-            <Link
-              className="articles_link"
-              to="/single-article/2"
-              onMouseEnter={() => setImageUrl(Ikona)}
-              onMouseLeave={() => setImageUrl("")}
-            >
-              <div className="articles_title">Петровская иконография в западно-европейских изданиях XVIII–XIX веков</div>
-              <div className="articles_author">Автор: Марина Трубановская</div>
-            </Link>
-          </div>
-          <div className="articles_block">
-            <Link
-              className="articles_link"
-              to="/single-article/3"
-              onMouseEnter={() => setImageUrl(Grafin)}
-              onMouseLeave={() => setImageUrl("")}
-            >
-              <div className="articles_title">
-                Приказал подать cамый большой бокал, какой только могли найти. Три этюда о кубке
-              </div>
-              <div className="articles_author">Автор: Марина Брюханова</div>
-            </Link>
-          </div>
-          <div className="articles_block">
-            <Link
-              className="articles_link"
-              to="/single-article/4"
-              onMouseEnter={() => setImageUrl(Farfor)}
-              onMouseLeave={() => setImageUrl("")}
-            >
-              <div className="articles_title">
-                И памяти твоей Великий Петр верна твоя Россия. <br />
-                Петровский Петергоф в произведениях Императорского фарфорового завода первой четверти XIX века
-              </div>
-              <div className="articles_author">Автор: Тамара Носович</div>
-            </Link>
-          </div>
+          {ARTICLES.map((article) => (
+            <div className="articles_block">
+              <Link
+                className="articles_link"
+                to={`/single-article/${article.slug}`}
+                onMouseEnter={() => setImageUrl(article.preview)}
+                onMouseLeave={() => setImageUrl("")}
+              >
+                <div className="articles_title">{article.title}</div>
+                <div className="articles_author">Автор: {article.author}</div>
+              </Link>
+            </div>
+          ))}
         </div>
       </div>
     </main>

src/pages/SingleArticle.tsx

@@ -1,55 +1,34 @@
-import Petr from "../assets/images/articles_petr.jpg";
 import PageLayout from "../components/PageLayout";
-
-const SingleArticle = () => (
-  <PageLayout
-    breadcrumbs={[
-      { label: "Кабинет", link: "/cabinet" },
-      { label: "Статьи", link: "/articles", active: true }
-    ]}
-  >
-    <article className="article_container">
-      <h1 className="article_title">
-        Приказал подать cамый большой бокал, какой только могли найти.
-        <br />
-        Три этюда о кубке
-      </h1>
-
-      <div className="article_author flex row content--start items--start">
-        <div className="article_author_point">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <circle r="50%" cx="50%" cy="50%" fill="#0000ff" stroke="#0000ff" strokeWidth="0"></circle>
-          </svg>
+import { useParams } from "react-router-dom";
+import { ARTICLES } from "../utils/constants";
+
+const SingleArticle = () => {
+  const { id } = useParams();
+  const article = ARTICLES.find((article) => article.slug === id);
+  return article ? (
+    <PageLayout
+      breadcrumbs={[
+        { label: "Кабинет", link: "/cabinet" },
+        { label: "Статьи", link: "/articles", active: true }
+      ]}
+    >
+      <article className="article_container">
+        <h1 className="article_title">{article.title}</h1>
+
+        <div className="article_author flex row content--start items--start">
+          <div className="article_author_point">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+              <circle r="50%" cx="50%" cy="50%" fill="#0000ff" stroke="#0000ff" strokeWidth="0"></circle>
+            </svg>
+          </div>
+          <div className="article_author_name">Автор: {article.author}</div>
         </div>
-        <div className="article_author_name">Автор: Марина Брюханова</div>
-      </div>
-
-      <h2 className="article_subtitle">Kубок заздравный</h2>
-
-      <p className="article_content">
-        В образах ярких, выдающихся исторических личностей необыкновенно притягательны их человеческие, житейские привычки и
-        пристрастия, которые многократно приближают к нам людей прошедших эпох, сокращая временную и социальную дистанцию. В
-        этом смысле Петр Великий оставил потомкам исключительное нематериальное наследие, получившее воплощение в конкретных
-        материальных памятниках. Мы же, со своей стороны, стремимся через них постичь личность первого российского императора.
-      </p>
-
-      <p className="article_content">
-        В образах ярких, выдающихся исторических личностей необыкновенно притягательны их человеческие, житейские привычки и
-        пристрастия, которые многократно приближают к нам людей прошедших эпох, сокращая временную и социальную дистанцию. В
-        этом смысле Петр Великий оставил потомкам исключительное нематериальное наследие, получившее воплощение в конкретных
-        материальных памятниках. Мы же, со своей стороны, стремимся через них постичь личность первого российского императора.
-      </p>
-
-      <img className="article_image" src={Petr} alt="" />
-
-      <p className="article_content">
-        В образах ярких, выдающихся исторических личностей необыкновенно притягательны их человеческие, житейские привычки и
-        пристрастия, которые многократно приближают к нам людей прошедших эпох, сокращая временную и социальную дистанцию. В
-        этом смысле Петр Великий оставил потомкам исключительное нематериальное наследие, получившее воплощение в конкретных
-        материальных памятниках. Мы же, со своей стороны, стремимся через них постичь личность первого российского императора.
-      </p>
-    </article>
-  </PageLayout>
-);
+        {article.content}
+      </article>
+    </PageLayout>
+  ) : (
+    <div>Error 404</div>
+  );
+};
 
 export default SingleArticle;