link routes

src/components/aside/AsideNews.tsx

@@ -1,36 +1,39 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+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 NewsCategory from "../global/NewsCategory";
-import NewsDate from '../global/NewsDate';
+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>

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>
   );

src/components/news/News.tsx

@@ -1,11 +1,11 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+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 NewsCategory from "../global/NewsCategory";
-import NewsDate from '../global/NewsDate';
+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>

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;
 }