From 9e02390e0320612df857c777c5354b60b4535f17 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 1 Feb 2023 19:54:25 +0500
Subject: [PATCH] link routes

---
 src/components/aside/AsideNews.tsx     | 25 ++++++++++++++-----------
 src/components/global/NewsCategory.tsx |  7 +++----
 src/components/news/News.tsx           | 24 ++++++++++++++----------
 src/styles/_news.scss                  |  5 +++++
 4 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/components/aside/AsideNews.tsx b/src/components/aside/AsideNews.tsx
index 997d9d2..de4800f 100644
--- a/src/components/aside/AsideNews.tsx
+++ b/src/components/aside/AsideNews.tsx
@@ -1,36 +1,39 @@
 // Modules
-import { Link } from 'react-router-dom';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from "react-router-dom";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 // Images
-import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
+import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
 // Components
-import NewsCategory from '../global/NewsCategory';
-import NewsDate from '../global/NewsDate';
+import NewsCategory from "../global/NewsCategory";
+import NewsDate from "../global/NewsDate";
 
 interface Props {
   title: string;
-  category: string;
   date: string;
   img: string;
-  link: string;
 }
 
-const AsideNews = ({ title, category, date, img, link }: Props) => {
+const AsideNews = ({ title, date, img }: Props) => {
   return (
     <div className="aside-news">
       <div className="aside-news-wrapper">
         <div className="aside-news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
+          <LazyLoadImage
+            src={img}
+            alt="image"
+            useIntersectionObserver
+            effect="blur"
+          />
         </div>
         <div className="aside-news-info">
           <div className="aside-news-info-inner">
             <div className="aside-news-status">
-              <NewsCategory title="политика" link="" />
+              <NewsCategory title="политика" />
               <NewsDate date={date} />
             </div>
             <h2 className="aside-news-title">{title}</h2>
           </div>
-          <Link to={`/${link}`} className="aside-news-link">
+          <Link to={`/news/1`} className="aside-news-link">
             <span>прочитать все</span> <ArrRight />
           </Link>
         </div>
diff --git a/src/components/global/NewsCategory.tsx b/src/components/global/NewsCategory.tsx
index d367bc9..56682d2 100644
--- a/src/components/global/NewsCategory.tsx
+++ b/src/components/global/NewsCategory.tsx
@@ -1,14 +1,13 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 interface Props {
   title: string;
-  link: string;
 }
 
-const NewsCategory = ({ title, link }: Props) => {
+const NewsCategory = ({ title }: Props) => {
   return (
-    <Link to={`/${link}`} className="news-category">
+    <Link to={`/category/asd`} className="news-category">
       {title}
     </Link>
   );
diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx
index ed70a24..1a0e3be 100644
--- a/src/components/news/News.tsx
+++ b/src/components/news/News.tsx
@@ -1,11 +1,11 @@
 // Modules
-import { Link } from 'react-router-dom';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from "react-router-dom";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 // Images
-import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
+import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
 // Components
-import NewsCategory from '../global/NewsCategory';
-import NewsDate from '../global/NewsDate';
+import NewsCategory from "../global/NewsCategory";
+import NewsDate from "../global/NewsDate";
 
 interface Props {
   title: string;
@@ -13,26 +13,30 @@ interface Props {
   category: string;
   date: string;
   img: string;
-  link: string;
 }
 
-const News = ({ title, text, category, date, img, link }: Props) => {
+const News = ({ title, text, category, date, img }: Props) => {
   return (
     <div className="news">
       <div className="news-wrapper">
         <div className="news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
+          <LazyLoadImage
+            src={img}
+            alt="image"
+            useIntersectionObserver
+            effect="blur"
+          />
         </div>
         <div className="news-info">
           <div className="news-info-inner">
             <h2 className="news-title">{title}</h2>
             <div className="news-status">
-              <NewsCategory title={category} link="" />
+              <NewsCategory title={category} />
               <NewsDate date={date} />
             </div>
             <div className="news-text">{text}</div>
           </div>
-          <Link to={`/${link}`} className="news-link">
+          <Link to={`/news/1`} className="news-link">
             <span>прочитать все</span> <ArrRight />
           </Link>
         </div>
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index 8eb446f..38f7ee7 100644
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@@ -9,6 +9,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
+  gap: 1.6rem;
 }
 
 .news-info-inner {
@@ -41,4 +42,8 @@
   font-size: 1.4rem;
   font-weight: 400;
   color: $body;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }