diff --git a/src/__stubs__/landing-data.json b/src/__stubs__/landing-data.json
deleted file mode 100644
index 6ab8038..0000000
--- a/src/__stubs__/landing-data.json
+++ /dev/null
@@ -1,38 +0,0 @@
-[
- {
- "id": "0.9212559272707432",
- "title": "Рик Санчез",
- "subTitle": "Главный герой",
- "body": "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
- "image": "rick",
- "link": "https://en.wikipedia.org/wiki/Rick_Sanchez"
- },
- {
- "id": "0.44732992281434125",
- "title": "Морти Смит",
- "subTitle": "Внук Рика",
- "body": "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
- "image": "morty",
- "link": "https://en.wikipedia.org/wiki/morty"
- },
- {
- "id": "0.9858955616085823",
- "title": "Бет Смит",
- "subTitle": "Мать Морти",
- "body": "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
- "image": "beth",
- "link": "https://en.wikipedia.org/wiki/beth"
- },
- {
- "id": "0.1590784370756242",
- "title": "Джерри Смит",
- "subTitle": "Отец Морти",
- "body": "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
- "image": "jerry",
- "link": "https://en.wikipedia.org/wiki/beth"
- },
- {
- "id": "0.29021795027285324",
- "body": "Семья Смитов - это только часть персонажей, представленных в сериале \"Rick and Morty\". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир \"Rick and Morty\"!"
- }
-]
diff --git a/src/components/button/button.style.ts b/src/components/button/button.style.ts
index 1a0f093..02edeec 100644
--- a/src/components/button/button.style.ts
+++ b/src/components/button/button.style.ts
@@ -7,5 +7,5 @@ export const ButtonStyled = styled.button`
border-radius: 5px;
background-image: var(--gradient-cucumber);
color: white;
- font-size: 12px;
+ font-size: 26px;
`;
diff --git a/src/components/field/field.tsx b/src/components/field/field.tsx
index bc43642..d973950 100644
--- a/src/components/field/field.tsx
+++ b/src/components/field/field.tsx
@@ -2,13 +2,13 @@ import React from "react";
import { FieldInput, FieldLabel, FieldWrapper } from "./field.style";
-export const InputField = ({ id, placeHolder, value, label }) => {
+export const InputField = ({ id, placeHolder, value, label, onChange, inputRef }) => {
return (
{label}
-
+
);
};
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index d8ff653..7566781 100644
--- a/src/pages/landing.tsx
+++ b/src/pages/landing.tsx
@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import data from "../__stubs__/landing-data.json";
import { NavPanel } from "../components/nav-panel";
import logo from "../assets/logo_1x.png";
import cucumber from "../assets/cucumber.png";
@@ -9,6 +8,8 @@ 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 { Button } from "../components/button";
import {
BrandText,
@@ -21,9 +22,17 @@ import {
PageFooter,
PageHeader,
} from "./style";
-import { ErrorBoundary } from "../components/error-boundary";
export const LandingPage = () => {
+ const [data, setData] = useState([])
+ useEffect(() => {
+ fetch('/api/landing-data')
+ .then(response => response.json())
+ .then(data => {
+ setData(data.data)
+ })
+ }, [])
+
return (
<>
@@ -48,7 +57,7 @@ export const LandingPage = () => {
-
+ {/*
Персонажи из
@@ -65,8 +74,10 @@ export const LandingPage = () => {
-
-
+ */}
+
+
+
@@ -74,16 +85,54 @@ export const LandingPage = () => {
);
};
-const Cards = () =>
- data.map((item, index) => (
+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 (
+ // <>
+ //
+ //
+ // {value !== cards.length - 1 && }
+ //
+ //
+ // {card.body}
+ //
+ // >
+ // );
+ return cards.map((card, index) => (
- {item.body}
+ {card.body}
));
+};
diff --git a/src/pages/search-character.tsx b/src/pages/search-character.tsx
index e04b1a4..a82ef77 100644
--- a/src/pages/search-character.tsx
+++ b/src/pages/search-character.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState, useRef } from "react";
import { Link as Connectedlink } from "react-router-dom";
import data from "../__stubs__/characters.json";
@@ -24,6 +24,27 @@ import {
} from "./style";
export const SearchCharacterPage = () => {
+ const [searchValue, setSearchValue] = useState("");
+ const [searchValueError, setSearchValueError] = useState(false);
+ const searchInputRef = useRef();
+
+ useEffect(() => {
+ searchInputRef.current.focus();
+ }, []);
+
+ useEffect(() => {
+ if (/\d/.test(searchValue)) {
+ setSearchValueError(true)
+ } else {
+ setSearchValueError(false)
+ }
+ }, [searchValue])
+
+ const handleSearchChange = (e) => {
+ const value = e.currentTarget.value;
+ setSearchValue(value);
+ };
+
return (
<>
@@ -51,11 +72,18 @@ export const SearchCharacterPage = () => {
Поиск персонажей
-
+
+ {searchValueError && Ай яй}
Поиск
-
+ {/*
{data?.map((char) => (
@@ -64,7 +92,7 @@ export const SearchCharacterPage = () => {
))}
-
+ */}
>
);
diff --git a/stubs/api/index.js b/stubs/api/index.js
index d2cd565..538fa11 100644
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@@ -1,3 +1,7 @@
const router = require('express').Router();
+router.get('/landing-data', (request, response) => {
+ response.send(require('../json/landing-data/success.json'))
+})
+
module.exports = router;
diff --git a/stubs/json/landing-data/success.json b/stubs/json/landing-data/success.json
new file mode 100644
index 0000000..bb4fd53
--- /dev/null
+++ b/stubs/json/landing-data/success.json
@@ -0,0 +1,40 @@
+{
+ "data": [
+ {
+ "id": "0.9212559272707432",
+ "title": "Рик Санчез",
+ "subTitle": "Главный герой",
+ "body": "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
+ "image": "rick",
+ "link": "https://en.wikipedia.org/wiki/Rick_Sanchez"
+ },
+ {
+ "id": "0.44732992281434125",
+ "title": "Морти Смит",
+ "subTitle": "Внук Рика",
+ "body": "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
+ "image": "morty",
+ "link": "https://en.wikipedia.org/wiki/morty"
+ },
+ {
+ "id": "0.9858955616085823",
+ "title": "Бет Смит",
+ "subTitle": "Мать Морти",
+ "body": "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
+ "image": "beth",
+ "link": "https://en.wikipedia.org/wiki/beth"
+ },
+ {
+ "id": "0.1590784370756242",
+ "title": "Джерри Смит",
+ "subTitle": "Отец Морти",
+ "body": "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
+ "image": "jerry",
+ "link": "https://en.wikipedia.org/wiki/beth"
+ },
+ {
+ "id": "0.29021795027285324",
+ "body": "Семья Смитов - это только часть персонажей, представленных в сериале \"Rick and Morty\". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир \"Rick and Morty\"!"
+ }
+ ]
+}