検索ワードのラベルモジュール作成

src/App.tsx

@@ -5,6 +5,7 @@ import useGallerySet from "./hooks/useGallerySet";
 import Button from "./component/Button";
 import Gallery from "./component/Gallery";
 import { color } from "./utils/color";
+import Label from "./component/Label";
 // import Setword from "./pages/Setwords";
 // import Result from "./pages/Result";
 
@@ -104,7 +105,13 @@ function App() {
                 </SButtonWrap>
               </SInputSection>
             </form>
-            <p>{searchWords.join(",")}</p>
+            {searchWords.length !== 0 && (
+              <SLabelWrap>
+                {searchWords.map((word) => (
+                  <Label>{word}</Label>
+                ))}
+              </SLabelWrap>
+            )}
             <Button variant="contained" type="button" onClick={handleDisplay}>
               SHOW
             </Button>
@@ -175,4 +182,10 @@ const SInputSection = styled.div`
   margin-bottom: 40px;
   border-bottom: 1px solid ${color.labelcolor};
 `;
+const SLabelWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 40px;
+`;
 export default App;

src/component/Label.tsx

@@ -0,0 +1,20 @@
+import React, { FC, ReactNode } from "react";
+import { color } from "../utils/color";
+import styled from "styled-components";
+type Props = {
+  children: ReactNode;
+};
+const Label: FC<Props> = (props) => {
+  const { children } = props;
+  return <SLabel>{children}</SLabel>;
+};
+const SLabel = styled.div`
+  display: inline-block;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  background: ${color.labelcolor};
+  padding: 3px 20px;
+  margin: 0 3px 6px;
+`;
+export default Label;