search sscreen

src/pages/landing.tsx

@@ -1,5 +1,6 @@
 import React 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";
@@ -20,45 +21,6 @@ import {
   PageHeader,
 } from "./style";
 
-const data = [
-  {
-    id: Math.random().toString(),
-    title: "Рик Санчез",
-    subTitle: "Главный герой",
-    body: "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
-    image: "rick",
-    link: "https://en.wikipedia.org/wiki/Rick_Sanchez",
-  },
-  {
-    id: Math.random().toString(),
-    title: "Морти Смит",
-    subTitle: "Внук Рика",
-    body: "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
-    image: "morty",
-    link: "https://en.wikipedia.org/wiki/morty",
-  },
-  {
-    id: Math.random().toString(),
-    title: "Бет Смит",
-    subTitle: "Мать Морти",
-    body: "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
-    image: "beth",
-    link: "https://en.wikipedia.org/wiki/beth",
-  },
-  {
-    id: Math.random().toString(),
-    title: "Джерри Смит",
-    subTitle: "Отец Морти",
-    body: "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
-    image: "jerry",
-    link: "https://en.wikipedia.org/wiki/beth",
-  },
-  {
-    id: Math.random().toString(),
-    body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!',
-  },
-];
-
 export const LandingPage = () => {
   return (
     <>
@@ -79,7 +41,7 @@ export const LandingPage = () => {
           (min-width: 520px) 880px
         "
         />
-        <NavPanel />
+        <NavPanel currentNavElement={'Home'} />
       </PageHeader>
 
       <Main>

src/pages/search-character.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+import data from "../__stubs__/characters.json";
+import logo from "../assets/logo_1x.png";
+import logo2x from "../assets/logo_2x.png";
+import logo4x from "../assets/logo_4x.png";
+import { NavPanel } from "../components/nav-panel";
+
+import {
+  BrandText,
+  CharName,
+  CharacterItem,
+  CharacterList,
+  Logo,
+  Main,
+  MainCardWrapper,
+  PageHeader,
+  SearchButton,
+  SearchForm,
+} from "./style";
+import { Header1 } from "../components/common";
+import { InputField } from "../components/field/field";
+
+export const SearchCharacterPage = () => {
+  return (
+    <>
+      <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="Персонажи" />
+      </PageHeader>
+      <Main>
+        <MainCardWrapper style={{ flexDirection: "column" }}>
+          <Header1>
+            <BrandText>Поиск</BrandText> персонажей
+          </Header1>
+          <SearchForm>
+            <InputField label="Поиск" placeHolder="Напишите имя для поиска" />
+            <SearchButton>Поиск</SearchButton>
+          </SearchForm>
+        </MainCardWrapper>
+        <CharacterList>
+          {data?.map((char) => (
+            <CharacterItem key={char.id}>
+              <img src={char.image} />
+              <CharName>{char.name}</CharName>
+            </CharacterItem>
+          ))}
+        </CharacterList>
+      </Main>
+    </>
+  );
+};

src/pages/style.ts

@@ -1,8 +1,9 @@
 import styled from "@emotion/styled";
 
 import { CardWrapper } from "../components/card";
-import { CardText } from "../components/card/card.style";
 import { Paragraph } from "../components/common";
+import { Button } from "../components/button";
+import { CardText } from "../components/card/card.style";
 
 export const Main = styled.main`
   width: 1024px;
@@ -19,6 +20,7 @@ export const MainCardText = styled(CardText)`
   margin-top: 0;
 `;
 
+
 export const MainCardTextP = styled(Paragraph)`
   max-width: 630px;
 `;
@@ -53,3 +55,44 @@ export const PageFooter = styled.footer`
   background-color: var(--accent);
   margin-top: 64px;
 `;
+
+export const SearchForm = styled.form`
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+`;
+
+export const SearchButton = styled(Button)`
+  height: 40px;
+  margin-left: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  font-size: 16px;
+`;
+
+export const CharacterList = styled.ul`
+  margin-top: 24px;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CharacterItem = styled.li`
+  position: relative;
+`;
+
+export const CharName = styled.p`
+  position: absolute;
+  color: white;
+  bottom: 5px;
+  right: 0;
+  margin: 0;
+  /* text-shadow: 0 0 2px #000; */
+  color: black;
+  background-color: #fff;
+  padding: 2px;
+`;