This commit is contained in:
Kakabay 2023-03-10 15:30:00 +05:00
parent 25d1fab119
commit 0c5c5c4648
3 changed files with 25 additions and 36 deletions

View File

@ -62,7 +62,7 @@ const Aside = ({ type }: Props) => {
<AsideNews <AsideNews
key={uuidv4()} key={uuidv4()}
title={el?.title} title={el?.title}
date={dateParse(el?.published_at)} date={el?.published_at}
category={el.categories[0]?.name} category={el.categories[0]?.name}
img={el?.featured_images[0]?.path} img={el?.featured_images[0]?.path}
id={el?.id} id={el?.id}

View File

@ -1,6 +1,6 @@
// Icons // Icons
import { Dispatch, SetStateAction } from "react"; import { Dispatch, SetStateAction } from 'react';
import { ReactComponent as Arr } from "../../assets/icons/pagintaion-arr.svg"; import { ReactComponent as Arr } from '../../assets/icons/pagintaion-arr.svg';
interface IProps { interface IProps {
pages: number; pages: number;
@ -9,7 +9,7 @@ interface IProps {
} }
const Pagination = ({ pages, activePage, setActivePage }: IProps) => { const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
console.log(pages, activePage + 1); // console.log(pages, activePage + 1);
const handleOnClick = (page: number) => { const handleOnClick = (page: number) => {
setActivePage(page); setActivePage(page);
}; };
@ -18,8 +18,7 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
<button <button
type="button" type="button"
disabled={activePage - 1 < 1} disabled={activePage - 1 < 1}
onClick={() => handleOnClick(activePage - 1)} onClick={() => handleOnClick(activePage - 1)}>
>
<Arr className="pagination-arr pagination-arr-left" /> <Arr className="pagination-arr pagination-arr-left" />
</button> </button>
<div className="pagination-nums"> <div className="pagination-nums">
@ -28,8 +27,7 @@ const Pagination = ({ pages, activePage, setActivePage }: IProps) => {
<button <button
type="button" type="button"
disabled={activePage + 1 >= pages} disabled={activePage + 1 >= pages}
onClick={() => handleOnClick(activePage + 1)} onClick={() => handleOnClick(activePage + 1)}>
>
<Arr className="pagination-arr pagination-arr-right" /> <Arr className="pagination-arr pagination-arr-right" />
</button> </button>
</div> </div>

View File

@ -1,23 +1,23 @@
// Modules // 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';
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from 'uuid';
import ReactPlayer from "react-player"; import ReactPlayer from 'react-player';
// Components // Components
import NewsCategory from "../global/NewsCategory"; import NewsCategory from '../global/NewsCategory';
import NewsDate from "../global/NewsDate"; import NewsDate from '../global/NewsDate';
import { IPostsData } from "../../types/data.types"; import { IPostsData } from '../../types/data.types';
import placeholder from "../../assets/images/placeholder.webp"; import placeholder from '../../assets/images/placeholder.webp';
import { dateParse } from "../../helpers/dateParser"; import { dateParse } from '../../helpers/dateParser';
interface Props { interface Props {
id: IPostsData["id"]; id: IPostsData['id'];
title: IPostsData["title"]; title: IPostsData['title'];
text: IPostsData["content_html"]; text: IPostsData['content_html'];
categories: IPostsData["categories"]; categories: IPostsData['categories'];
date: IPostsData["published_at"]; date: IPostsData['published_at'];
img: IPostsData["featured_images"][0]["path"]; img: IPostsData['featured_images'][0]['path'];
video: { video: {
type: string; type: string;
url: string; url: string;
@ -29,14 +29,8 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
<Link to={`/news/${id}`}> <Link to={`/news/${id}`}>
<div className="news-wrapper"> <div className="news-wrapper">
<div className="news-image"> <div className="news-image">
{video.type === "video" ? ( {video.type === 'video' ? (
<ReactPlayer <ReactPlayer url={video.url} controls light={img} width="100%" height="100%" />
url={video.url}
controls
light={img}
width="100%"
height="100%"
/>
) : ( ) : (
<LazyLoadImage <LazyLoadImage
src={img} src={img}
@ -57,13 +51,10 @@ const News = ({ id, title, text, categories, date, img, video }: Props) => {
})} })}
</div> </div>
<div className="news-status-right"> <div className="news-status-right">
<NewsDate date={dateParse(date)} /> <NewsDate date={date} />
</div> </div>
</div> </div>
<div <div className="news-text" dangerouslySetInnerHTML={{ __html: text }}></div>
className="news-text"
dangerouslySetInnerHTML={{ __html: text }}
></div>
</div> </div>
</div> </div>
</div> </div>