search sscreen

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;
+`;