Aydogdy
/
react-typescript-chess-federation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sliders dynamic

This commit is contained in:
VividTruthKeeper 2022-07-15 15:59:48 +05:00
parent 545d666bf5
commit 30d4e5a788
8 changed files with 106 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/main/MainSlider.tsx
View File

@ -1,6 +1,7 @@
// Modules
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper";
import { useState, useEffect, useMemo } from "react";
import "swiper/css";
import { v4 as uuidv4 } from "uuid";
@ -17,17 +18,21 @@ import MainSliderSlide from "./MainSliderSlide";
// Types
import { SlideProps } from "../../types/mainSliderSlide";
const sliderData: SlideProps[] = [
{
slideTitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
slideText:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis auctor penatibus nunc leo rhoncus auctor pellentesque in.",
slideLink: "/",
slideImg: game,
},
];
// Helpers
import { getMainSliderData } from "../../helpers/apiRequests";
const MainSlider = () => {
// State
const [slideData, setSlideData]: [
SlideProps[],
React.Dispatch<React.SetStateAction<SlideProps[]>>
] = useState([{ id: 0, header: "", txt: "", img: "" }]);
// Effect
useEffect(() => {
getMainSliderData(setSlideData);
}, []);
return (
<section className="main-slider">
<Swiper
@ -41,18 +46,20 @@ const MainSlider = () => {
prevEl: ".slider-prev",
}}
>
{sliderData.map((slide) => {
return (
<SwiperSlide key={uuidv4()}>
<MainSliderSlide
slideImg={slide.slideImg}
slideLink={slide.slideLink}
slideText={slide.slideText}
slideTitle={slide.slideTitle}
/>
</SwiperSlide>
);
})}
{slideData
? slideData.map((slide: SlideProps) => {
return (
<SwiperSlide key={uuidv4()}>
<MainSliderSlide
id={slide.id}
img={slide.img}
txt={slide.txt}
header={slide.header}
/>
</SwiperSlide>
);
})
: ""}
</Swiper>
<div className="slider-prev">
<img src={arrowPrev} alt="" />

20
src/components/main/MainSliderSlide.tsx
View File

@ -7,23 +7,21 @@ import arrowNext from "../../icons/arrow-right-white.svg";
// Types
import { SlideProps } from "../../types/mainSliderSlide";
const MainSliderSlide = ({
slideImg,
slideTitle,
slideText,
slideLink,
}: SlideProps) => {
// URL
import { hosting } from "../../links";
const MainSliderSlide = ({ id, img, header, txt }: SlideProps) => {
return (
<div className="swiper-slide-inner">
<div className="swiper-slide-inner" id={id + ""}>
<div className="swiper-bg">
<img src={slideImg} alt="" />
<img src={hosting + img} alt="" />
</div>
<div className="swiper-slide-content">
<div className="container">
<div className="swiper-slider-content-inner">
<h3>{slideTitle}</h3>
<p>{slideText}</p>
<Link to={slideLink}>
<h3>{header}</h3>
<p>{txt}</p>
<Link to={""}>
<span>Click the button</span>
<div>
<img src={arrowNext} alt="" />

49
src/components/main/PartnersSection.tsx
View File

@ -2,23 +2,38 @@
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper";
import { v4 as uuidv4 } from "uuid";
import { useState, useEffect } from "react";
// Components
import SectionTitle from "../global/SectionTitle";
// Images
import tps from "../../images/tps.jpg";
import samsung from "../../images/samsung.jpg";
import mi from "../../images/mi.jpg";
import dragon from "../../images/do.jpg";
// Icons
import arrowPrev from "../../icons/arrow-left-green.svg";
import arrowNext from "../../icons/arrow-right-green.svg";
const partnersData: string[] = [tps, samsung, mi, dragon];
// URL
import { hosting } from "../../links";
// Types
import { partnersType } from "../../types/partnersType";
// Helpers
import { getPartnerSliderData } from "../../helpers/apiRequests";
// const partnersData: string[] = [tps, samsung, mi, dragon];
const Partners = () => {
// State
const [partnerData, setPartnerData]: [
partnersType[],
React.Dispatch<React.SetStateAction<partnersType[]>>
] = useState([{ id: 0, note: "", partner: "" }]);
// Effect
useEffect(() => {
getPartnerSliderData(setPartnerData);
}, []);
return (
<section className="partners">
<div className="container">
@ -36,15 +51,17 @@ const Partners = () => {
prevEl: ".slider-prev",
}}
>
{partnersData.map((image) => {
return (
<SwiperSlide key={uuidv4()}>
<div className="partners-slide">
<img src={image} alt="" />
</div>
</SwiperSlide>
);
})}
{partnerData
? partnerData.map((image: partnersType) => {
return (
<SwiperSlide key={uuidv4()}>
<div className="partners-slide">
<img src={hosting + image.partner} alt="" />
</div>
</SwiperSlide>
);
})
: ""}
</Swiper>
<div className="slider-prev slider-next-white slider-next-white-prev">
<img src={arrowPrev} alt="" />

3
src/context/LoaderContext.ts Normal file
View File

@ -0,0 +1,3 @@
import { createContext } from "react";
export const LoaderContext = createContext({});

21
src/helpers/apiRequests.ts Normal file
View File

@ -0,0 +1,21 @@
// links
import axios from "axios";
import { SlideProps } from "../types/mainSliderSlide";
import { partnersType } from "../types/partnersType";
import { sliderDataUrl, partners } from "../links";
export const getMainSliderData = (
setState: React.Dispatch<SlideProps[]>
): void => {
axios.get(sliderDataUrl).then((res) => {
setState(res.data.data);
});
};
export const getPartnerSliderData = (
setState: React.Dispatch<partnersType[]>
): void => {
axios.get(partners).then((res) => {
setState(res.data.data);
});
};

3
src/links.ts Normal file
View File

@ -0,0 +1,3 @@
export const hosting = "http://tkf.com.tm";
export const sliderDataUrl = hosting + "/api/v1/sliders";
export const partners = hosting + "/api/v1/partners";

8
src/types/mainSliderSlide.ts
View File

@ -1,8 +1,8 @@
export interface SlideProps {
slideImg: string;
slideTitle: string;
slideText: string;
slideLink: string;
id: number;
header: string;
txt: string;
img: string;
}
// Used in MainSlide.tsx and its' child component MainSliderSlide.tsx

5
src/types/partnersType.ts Normal file
View File

@ -0,0 +1,5 @@
export interface partnersType {
id: number;
note: string;
partner: string;
}