Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

news article img -> slider

This commit is contained in:
VividTruthKeeper 2023-02-09 17:44:15 +05:00
parent 9650b5b157
commit 8dd300528c
4 changed files with 105 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/news/NewsArticleImg.tsx Normal file
View File

@ -0,0 +1,18 @@
// Modules
import { LazyLoadImage } from "react-lazy-load-image-component";
interface IProps {
img: string;
title: string;
}
const NewsArticleImg = ({ img, title }: IProps) => {
return (
<div className={"news-article-image"}>
<LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
<div className="swiper-lazy-preloader"></div>
</div>
);
};
export default NewsArticleImg;

46
src/components/news/NewsArticleSlider.tsx Normal file
View File

@ -0,0 +1,46 @@
// Modules
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper";
// Components
import NewsArticleImg from "./NewsArticleImg";
// Images
import Placeholder from "../../assets/images/placeholder3.png";
import { titlePlaceholder } from "../main/MainContent";
const NewsArticleSlider = () => {
return (
<div className="news-article-slider">
<Swiper
spaceBetween={24}
slidesPerView={1}
loop
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
modules={[Navigation, Pagination, Autoplay]}
pagination={{
type: "bullets",
}}
>
<SwiperSlide>
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
<SwiperSlide>
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
<SwiperSlide>
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
<SwiperSlide>
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
</SwiperSlide>
</Swiper>
</div>
);
};
export default NewsArticleSlider;

71
src/pages/NewsArticle.tsx
View File

@ -1,12 +1,15 @@
// Modules // Modules
import { LazyLoadImage } from 'react-lazy-load-image-component'; import { LazyLoadImage } from "react-lazy-load-image-component";
// Components // Components
import Aside from '../components/aside/Aside'; import Aside from "../components/aside/Aside";
import NewsArticleSlider from "../components/news/NewsArticleSlider";
// Images // Images
import placeholder from '../assets/images/placeholder3.png'; import placeholder from "../assets/images/placeholder3.png";
// Icons // Icons
import share from '../assets/icons/share.svg'; import { ReactComponent as Share } from "../assets/icons/share.svg";
import { ReactComponent as Share } from '../assets/icons/share.svg';
const NewsArticle = () => { const NewsArticle = () => {
return ( return (
@ -20,41 +23,47 @@ const NewsArticle = () => {
<h3 className="news-article-date">15:23, 21 января 2023</h3> <h3 className="news-article-date">15:23, 21 января 2023</h3>
</div> </div>
<h2 className="news-article-title"> <h2 className="news-article-title">
В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на В федерации футбола Туркменистана подвели итоги прошедшего года
2023 год и наметили курс на 2023 год
</h2> </h2>
</div> </div>
<div className="news-article-image"> <div className="news-article-slider-wrapper">
<LazyLoadImage src={placeholder} alt="image" useIntersectionObserver effect="blur" /> <NewsArticleSlider />
</div> </div>
<p className="news-article-text"> <p className="news-article-text">
Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum
commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor
sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Vestibulum eget sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum
consectetur. <br /> urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor
<br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. sit amet consectetur. <br />
Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum <br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt
sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
sodales. consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
dolor sit amet consectetur. Vestibulum eget elementum urna
tincidunt diam commodo mauris ac sodales.
<br /> <br />
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna <br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget
tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. elementum urna tincidunt diam commodo mauris ac sodales. Lorem
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Lorem ipsum dolor sit amet consectetur.
<br /> <br />
<br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem <br /> Vestibulum eget elementum urna tincidunt diam commodo
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem
dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Vestibulum eget elementum urna tincidunt diam commodo
mauris ac sodales. mauris ac sodales.
<br /> <br />
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna <br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget
tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. elementum urna tincidunt diam commodo mauris ac sodales. Lorem
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Lorem ipsum dolor sit amet consectetur.
<br /> <br />
<br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem <br /> Vestibulum eget elementum urna tincidunt diam commodo
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem
dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Vestibulum eget elementum urna tincidunt diam commodo
mauris ac sodales. mauris ac sodales.
</p> </p>
<button className="share-btn"> <button className="share-btn">

2
src/styles/_news-article.scss
View File

@ -3,7 +3,7 @@
} }
.news-article-inner { .news-article-inner {
display: grid; display: grid;
grid-template-columns: 2fr 1fr; grid-template-columns: calc(67% - 1.2rem) 1fr;
gap: 2.4rem; gap: 2.4rem;
} }
.news-article-info { .news-article-info {