From bb49021fb8c18da4168b75d5bde385df3c1abdc0 Mon Sep 17 00:00:00 2001 From: primakov Date: Sat, 4 May 2024 12:32:19 +0300 Subject: [PATCH] search sscreen --- src/__stubs__/characters.json | 473 +++++++++++++++++++++++++ src/__stubs__/landing-data.json | 38 ++ src/app.tsx | 4 +- src/components/button/button.style.ts | 11 + src/components/button/button.tsx | 7 + src/components/button/index.ts | 1 + src/components/field/field.style.ts | 21 ++ src/components/field/field.tsx | 18 + src/components/field/index.ts | 0 src/components/nav-panel/nav-panel.tsx | 11 +- src/global-styles.ts | 4 + src/pages/landing.tsx | 42 +-- src/pages/search-character.tsx | 67 ++++ src/pages/style.ts | 45 ++- 14 files changed, 696 insertions(+), 46 deletions(-) create mode 100644 src/__stubs__/characters.json create mode 100644 src/__stubs__/landing-data.json create mode 100644 src/components/button/button.style.ts create mode 100644 src/components/button/button.tsx create mode 100644 src/components/button/index.ts create mode 100644 src/components/field/field.style.ts create mode 100644 src/components/field/field.tsx create mode 100644 src/components/field/index.ts create mode 100644 src/pages/search-character.tsx 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 ( -