ラベル部分のスタイル調整

s-yoshiii · Jul 25, 2022 · d04e85c · d04e85c
1 parent 3bd8520
commit d04e85c
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/component/Gallery.tsx b/src/component/Gallery.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Fetch } from "../types/api";
 import styled from "styled-components";
+import Label from "./Label";
 type Props = {
   fetchData: Fetch[];
 };
@@ -22,6 +23,11 @@ const Gallery: FC<Props> = (props) => {
               <SGalleryText>
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
               </SGalleryText>
+              <SGalleryLabelArea>
+                {data.tags.split(",").map((label) => (
+                  <Label>{label}</Label>
+                ))}
+              </SGalleryLabelArea>
             </SGalleryTextBox>
           </SGalleryInner>
         </SGallerySect>
@@ -79,4 +85,7 @@ const SGalleryText = styled.p`
   margin-top: 10px;
   line-height: 1.5;
 `;
+const SGalleryLabelArea = styled.div`
+  margin-top: 20px;
+`;
 export default Gallery;