diff --git a/src/__stubs__/characters.json b/src/__stubs__/characters.json
new file mode 100644
index 0000000..66225df
--- /dev/null
+++ b/src/__stubs__/characters.json
@@ -0,0 +1,473 @@
+[
+ {
+ "id": 2,
+ "name": "Morty Smith",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/1",
+ "https://rickandmortyapi.com/api/episode/2",
+ "https://rickandmortyapi.com/api/episode/3",
+ "https://rickandmortyapi.com/api/episode/4",
+ "https://rickandmortyapi.com/api/episode/5",
+ "https://rickandmortyapi.com/api/episode/6",
+ "https://rickandmortyapi.com/api/episode/7",
+ "https://rickandmortyapi.com/api/episode/8",
+ "https://rickandmortyapi.com/api/episode/9",
+ "https://rickandmortyapi.com/api/episode/10",
+ "https://rickandmortyapi.com/api/episode/11",
+ "https://rickandmortyapi.com/api/episode/12",
+ "https://rickandmortyapi.com/api/episode/13",
+ "https://rickandmortyapi.com/api/episode/14",
+ "https://rickandmortyapi.com/api/episode/15",
+ "https://rickandmortyapi.com/api/episode/16",
+ "https://rickandmortyapi.com/api/episode/17",
+ "https://rickandmortyapi.com/api/episode/18",
+ "https://rickandmortyapi.com/api/episode/19",
+ "https://rickandmortyapi.com/api/episode/20",
+ "https://rickandmortyapi.com/api/episode/21",
+ "https://rickandmortyapi.com/api/episode/22",
+ "https://rickandmortyapi.com/api/episode/23",
+ "https://rickandmortyapi.com/api/episode/24",
+ "https://rickandmortyapi.com/api/episode/25",
+ "https://rickandmortyapi.com/api/episode/26",
+ "https://rickandmortyapi.com/api/episode/27",
+ "https://rickandmortyapi.com/api/episode/28",
+ "https://rickandmortyapi.com/api/episode/29",
+ "https://rickandmortyapi.com/api/episode/30",
+ "https://rickandmortyapi.com/api/episode/31",
+ "https://rickandmortyapi.com/api/episode/32",
+ "https://rickandmortyapi.com/api/episode/33",
+ "https://rickandmortyapi.com/api/episode/34",
+ "https://rickandmortyapi.com/api/episode/35",
+ "https://rickandmortyapi.com/api/episode/36",
+ "https://rickandmortyapi.com/api/episode/37",
+ "https://rickandmortyapi.com/api/episode/38",
+ "https://rickandmortyapi.com/api/episode/39",
+ "https://rickandmortyapi.com/api/episode/40",
+ "https://rickandmortyapi.com/api/episode/41",
+ "https://rickandmortyapi.com/api/episode/42",
+ "https://rickandmortyapi.com/api/episode/43",
+ "https://rickandmortyapi.com/api/episode/44",
+ "https://rickandmortyapi.com/api/episode/45",
+ "https://rickandmortyapi.com/api/episode/46",
+ "https://rickandmortyapi.com/api/episode/47",
+ "https://rickandmortyapi.com/api/episode/48",
+ "https://rickandmortyapi.com/api/episode/49",
+ "https://rickandmortyapi.com/api/episode/50",
+ "https://rickandmortyapi.com/api/episode/51"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/2",
+ "created": "2017-11-04T18:50:21.651Z"
+ },
+ {
+ "id": 14,
+ "name": "Alien Morty",
+ "status": "unknown",
+ "species": "Alien",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/14.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/10"],
+ "url": "https://rickandmortyapi.com/api/character/14",
+ "created": "2017-11-04T20:51:31.373Z"
+ },
+ {
+ "id": 18,
+ "name": "Antenna Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "Human with antennae",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/18.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/10",
+ "https://rickandmortyapi.com/api/episode/28"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/18",
+ "created": "2017-11-04T22:25:29.008Z"
+ },
+ {
+ "id": 21,
+ "name": "Aqua Morty",
+ "status": "unknown",
+ "species": "Humanoid",
+ "type": "Fish-Person",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/21.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/10",
+ "https://rickandmortyapi.com/api/episode/22"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/21",
+ "created": "2017-11-04T22:39:48.055Z"
+ },
+ {
+ "id": 27,
+ "name": "Artist Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/27.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/10",
+ "https://rickandmortyapi.com/api/episode/28"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/27",
+ "created": "2017-11-05T08:59:07.457Z"
+ },
+ {
+ "id": 42,
+ "name": "Big Head Morty",
+ "status": "unknown",
+ "species": "Human",
+ "type": "Human with giant head",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/42.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/22"],
+ "url": "https://rickandmortyapi.com/api/character/42",
+ "created": "2017-11-05T10:15:53.349Z"
+ },
+ {
+ "id": 43,
+ "name": "Big Morty",
+ "status": "Dead",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/43.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/28"],
+ "url": "https://rickandmortyapi.com/api/character/43",
+ "created": "2017-11-05T10:17:04.997Z"
+ },
+ {
+ "id": 44,
+ "name": "Body Guard Morty",
+ "status": "Dead",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/44.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/28"],
+ "url": "https://rickandmortyapi.com/api/character/44",
+ "created": "2017-11-05T10:18:11.062Z"
+ },
+ {
+ "id": 53,
+ "name": "Blue Shirt Morty",
+ "status": "unknown",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/53.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/10"],
+ "url": "https://rickandmortyapi.com/api/character/53",
+ "created": "2017-11-05T11:28:38.627Z"
+ },
+ {
+ "id": 61,
+ "name": "Campaign Manager Morty",
+ "status": "Dead",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/61.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/28"],
+ "url": "https://rickandmortyapi.com/api/character/61",
+ "created": "2017-11-05T11:53:44.737Z"
+ },
+ {
+ "id": 73,
+ "name": "Cop Morty",
+ "status": "Dead",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/73.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/28"],
+ "url": "https://rickandmortyapi.com/api/character/73",
+ "created": "2017-11-30T11:43:04.217Z"
+ },
+ {
+ "id": 77,
+ "name": "Cowboy Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/77.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/10"],
+ "url": "https://rickandmortyapi.com/api/character/77",
+ "created": "2017-11-30T14:13:17.371Z"
+ },
+ {
+ "id": 83,
+ "name": "Cronenberg Morty",
+ "status": "unknown",
+ "species": "Cronenberg",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "Cronenberg Earth",
+ "url": "https://rickandmortyapi.com/api/location/12"
+ },
+ "location": {
+ "name": "Earth (C-137)",
+ "url": "https://rickandmortyapi.com/api/location/1"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/83.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/6",
+ "https://rickandmortyapi.com/api/episode/10"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/83",
+ "created": "2017-11-30T20:02:29.204Z"
+ },
+ {
+ "id": 84,
+ "name": "Cult Leader Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Hideout Planet",
+ "url": "https://rickandmortyapi.com/api/location/27"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/84.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/10"],
+ "url": "https://rickandmortyapi.com/api/character/84",
+ "created": "2017-11-30T20:41:48.080Z"
+ },
+ {
+ "id": 85,
+ "name": "Cyclops Morty",
+ "status": "Alive",
+ "species": "Humanoid",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/85.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/10",
+ "https://rickandmortyapi.com/api/episode/28"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/85",
+ "created": "2017-11-30T20:49:52.133Z"
+ },
+ {
+ "id": 95,
+ "name": "Dipper and Mabel Mortys",
+ "status": "unknown",
+ "species": "Human",
+ "type": "",
+ "gender": "unknown",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/95.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/22"],
+ "url": "https://rickandmortyapi.com/api/character/95",
+ "created": "2017-12-01T11:54:36.670Z"
+ },
+ {
+ "id": 113,
+ "name": "Eric Stoltz Mask Morty",
+ "status": "unknown",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "Eric Stoltz Mask Earth",
+ "url": "https://rickandmortyapi.com/api/location/33"
+ },
+ "location": {
+ "name": "Earth (Replacement Dimension)",
+ "url": "https://rickandmortyapi.com/api/location/20"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/113.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/10"],
+ "url": "https://rickandmortyapi.com/api/character/113",
+ "created": "2017-12-26T13:43:29.296Z"
+ },
+ {
+ "id": 118,
+ "name": "Evil Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/118.jpeg",
+ "episode": [
+ "https://rickandmortyapi.com/api/episode/10",
+ "https://rickandmortyapi.com/api/episode/28",
+ "https://rickandmortyapi.com/api/episode/51"
+ ],
+ "url": "https://rickandmortyapi.com/api/character/118",
+ "created": "2017-12-26T16:13:41.103Z"
+ },
+ {
+ "id": 123,
+ "name": "Fat Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/123.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/28"],
+ "url": "https://rickandmortyapi.com/api/character/123",
+ "created": "2017-12-26T17:22:40.315Z"
+ },
+ {
+ "id": 143,
+ "name": "Glasses Morty",
+ "status": "Alive",
+ "species": "Human",
+ "type": "",
+ "gender": "Male",
+ "origin": {
+ "name": "unknown",
+ "url": ""
+ },
+ "location": {
+ "name": "Citadel of Ricks",
+ "url": "https://rickandmortyapi.com/api/location/3"
+ },
+ "image": "https://rickandmortyapi.com/api/character/avatar/143.jpeg",
+ "episode": ["https://rickandmortyapi.com/api/episode/28"],
+ "url": "https://rickandmortyapi.com/api/character/143",
+ "created": "2017-12-27T20:37:26.134Z"
+ }
+]
diff --git a/src/__stubs__/landing-data.json b/src/__stubs__/landing-data.json
new file mode 100644
index 0000000..6ab8038
--- /dev/null
+++ b/src/__stubs__/landing-data.json
@@ -0,0 +1,38 @@
+[
+ {
+ "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/app.tsx b/src/app.tsx
index e2e25a8..4c1ce22 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -2,13 +2,15 @@ import React from "react";
import { Global } from "@emotion/react";
import { LandingPage } from "./pages/landing";
+import { SearchCharacterPage } from "./pages/search-character";
import { globalStyles } from "./global-styles";
const App = () => {
return (
<>
-
+ {location.pathname === "/r-and-m" && }
+ {location.pathname === "/r-and-m/search" && }
>
);
};
diff --git a/src/components/button/button.style.ts b/src/components/button/button.style.ts
new file mode 100644
index 0000000..1a0f093
--- /dev/null
+++ b/src/components/button/button.style.ts
@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+export const ButtonStyled = styled.button`
+ padding: 4px 7px;
+ border-color: var(--main-dark);
+ border-style: solid;
+ border-radius: 5px;
+ background-image: var(--gradient-cucumber);
+ color: white;
+ font-size: 12px;
+`;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
new file mode 100644
index 0000000..881a256
--- /dev/null
+++ b/src/components/button/button.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+import { ButtonStyled } from "./button.style";
+
+export const Button = (props: React.HtmlHTMLAttributes) => {
+ return ;
+};
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
new file mode 100644
index 0000000..398a3c5
--- /dev/null
+++ b/src/components/button/index.ts
@@ -0,0 +1 @@
+export { Button } from "./button";
diff --git a/src/components/field/field.style.ts b/src/components/field/field.style.ts
new file mode 100644
index 0000000..d69e54f
--- /dev/null
+++ b/src/components/field/field.style.ts
@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+
+export const FieldWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+export const FieldLabel = styled.label`
+ padding: 12px 0;
+ font-size: 24px;
+`;
+
+export const FieldInput = styled.input`
+ min-height: 24px;
+ border-width: 2px;
+ border-radius: 6px;
+ border-color: #3d3d3d;
+ border-style: solid;
+ padding: 6px 4px;
+ font-size: 16px;
+`;
diff --git a/src/components/field/field.tsx b/src/components/field/field.tsx
new file mode 100644
index 0000000..bc43642
--- /dev/null
+++ b/src/components/field/field.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import { FieldInput, FieldLabel, FieldWrapper } from "./field.style";
+
+export const InputField = ({ id, placeHolder, value, label }) => {
+ return (
+
+
+ {label}
+
+
+
+ );
+};
+
+InputField.defaultProps = {
+ id: `input-${(Math.random() * 10).toString()}`,
+};
diff --git a/src/components/field/index.ts b/src/components/field/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/nav-panel/nav-panel.tsx b/src/components/nav-panel/nav-panel.tsx
index a4cdced..4a0e11e 100644
--- a/src/components/nav-panel/nav-panel.tsx
+++ b/src/components/nav-panel/nav-panel.tsx
@@ -11,13 +11,16 @@ const navList = [
{ title: "Эризоды", href: "#04" },
];
-export function NavPanel() {
+export function NavPanel({ currentNavElement }) {
return (
-