139 lines
3.9 KiB
TypeScript
139 lines
3.9 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
|
||
import { NavPanel } from "../components/nav-panel";
|
||
import logo from "../assets/logo_1x.png";
|
||
import cucumber from "../assets/cucumber.png";
|
||
import logo2x from "../assets/logo_2x.png";
|
||
import logo4x from "../assets/logo_4x.png";
|
||
import { Link } from "../components/link";
|
||
import { Card } from "../components/card";
|
||
import { Header1 } from "../components/common";
|
||
import { ErrorBoundary } from "../components/error-boundary";
|
||
import { URLs } from "../__data__/urls";
|
||
|
||
import {
|
||
BrandText,
|
||
Logo,
|
||
Main,
|
||
MainCardImg,
|
||
MainCardText,
|
||
MainCardTextP,
|
||
MainCardWrapper,
|
||
PageFooter,
|
||
PageHeader,
|
||
} from "./style";
|
||
|
||
export const LandingPage = () => {
|
||
const [data, setData] = useState([])
|
||
useEffect(() => {
|
||
fetch(`${URLs.api.main}/landing-data`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
setData(data.data)
|
||
})
|
||
}, [])
|
||
|
||
return (
|
||
<>
|
||
<ErrorBoundary>
|
||
<PageHeader>
|
||
<Logo
|
||
height="44px"
|
||
width="227"
|
||
src={logo4x}
|
||
alt="Логотип. Надпись Рик и Морти"
|
||
srcSet={`
|
||
${logo} 220w,
|
||
${logo2x} 445w,
|
||
${logo4x} 880w,
|
||
`}
|
||
sizes="
|
||
(max-width: 240px) 100px,
|
||
(min-width: 320px) 440px,
|
||
(min-width: 520px) 880px
|
||
"
|
||
/>
|
||
<NavPanel currentNavElement={"Home"} />
|
||
</PageHeader>
|
||
</ErrorBoundary>
|
||
<Main>
|
||
<MainCardWrapper as="header">
|
||
<MainCardText>
|
||
<Header1>
|
||
Персонажи из <br />
|
||
<BrandText>огурчиковой вселенной</BrandText>
|
||
</Header1>
|
||
|
||
<MainCardTextP>
|
||
На этой странице представлены персонажи из сериала “
|
||
<Link href="#">Rick and Morty</Link>
|
||
”. Этот популярный анимационный сериал, созданный Джастином
|
||
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
|
||
Санчеза, гениального и эксцентричного ученого, и его внука Морти
|
||
Смита.
|
||
</MainCardTextP>
|
||
</MainCardText>
|
||
<MainCardImg src={cucumber} alt="" />
|
||
</MainCardWrapper>
|
||
<ErrorBoundary>
|
||
<Cards cards={data} />
|
||
</ErrorBoundary>
|
||
</Main>
|
||
|
||
<PageFooter></PageFooter>
|
||
</>
|
||
);
|
||
};
|
||
|
||
const Cards = ({ cards }) => {
|
||
// const [value, setValue] = useState(0);
|
||
// const card = cards[value];
|
||
|
||
// const handleNextClick = () => {
|
||
// setValue(prevValue => (prevValue + 1) % cards.length);
|
||
// };
|
||
|
||
// const handleBackClick = () => {
|
||
// setValue((value) => (value - 1 + cards.length) % cards.length);
|
||
// }
|
||
|
||
// return (
|
||
// <>
|
||
// <div
|
||
// style={{
|
||
// marginTop: 24,
|
||
// display: "flex",
|
||
// justifyContent: "space-between",
|
||
// fontSize: "26px",
|
||
// padding: 10,
|
||
// }}
|
||
// >
|
||
// <Button style={{ visibility: value === 0 ? 'hidden' : 'visible' }} onClick={handleBackClick}>Назад</Button>
|
||
// {value !== cards.length - 1 && <Button onClick={handleNextClick}>Вперёд</Button>}
|
||
// </div>
|
||
// <Card
|
||
// directionReverse={value % 2 === 0}
|
||
// key={card.id}
|
||
// title={card.title}
|
||
// image={card.image}
|
||
// link={card.link}
|
||
// subTitle={card.subTitle}
|
||
// >
|
||
// {card.body}
|
||
// </Card>
|
||
// </>
|
||
// );
|
||
return cards.map((card, index) => (
|
||
<Card
|
||
directionReverse={index % 2 === 0}
|
||
key={card.id}
|
||
title={card.title}
|
||
image={card.image}
|
||
link={card.link}
|
||
subTitle={card.subTitle}
|
||
>
|
||
{card.body}
|
||
</Card>
|
||
));
|
||
};
|