Merge pull request #316 from kure-kosen/react/FeatBrogWrap

FeaturedBlogWrapperの実装
kure-kosen · May 11, 2019 · b602959 · b602959
2 parents ae6c8f6 + 5d0bb63
commit b602959
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 31 deletions.
diff --git a/frontend/images/apple-2385198_1280-1.jpg b/frontend/images/apple-2385198_1280-1.jpg
diff --git a/frontend/src/commons/color.ts b/frontend/src/commons/color.ts
@@ -10,5 +10,7 @@ export const chkColors: IColor = {
   gray: "#7f8287",
   shadow: "#14141433",
   white: "#ffffff",
-  placeholder: "#b0bec5"
+  placeholder: "#b0bec5",
+  aqua: "#b3dfe2",
+  darkenAqua: "#50AAB7"
 };
diff --git a/frontend/src/components/FeaturedBlog.tsx b/frontend/src/components/FeaturedBlog.tsx
@@ -0,0 +1,95 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+import { chkColors } from "./../commons/color";
+
+import * as img from "./../../images/apple-2385198_1280-1.jpg";
+import * as chanyou from "./../../images/chanyou.jpg";
+
+export interface IProps {
+  title: string;
+  date: string;
+  summary: string;
+  author: string;
+  to: string;
+}
+export const FeaturedBlog = (props: IProps) => {
+  const { title, date, summary, author, to } = props;
+
+  return (
+    <Link to={to}>
+      <Wrapper>
+        <PictureWrapper>
+          <Picture src={img} />
+        </PictureWrapper>
+        <Article>
+          <Title>{title}</Title>
+          <Contents>
+            <p>{summary}</p>
+            <Meta>
+              <span>{date}</span>
+              <Icon src={chanyou} />
+              <span>{author}</span>
+            </Meta>
+          </Contents>
+        </Article>
+      </Wrapper>
+    </Link>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  margin: 20px 0;
+`;
+
+const PictureWrapper = styled.div`
+  width: 230px;
+`;
+
+const Picture = styled.img`
+  width: 200px;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+  border: solid 1px ${chkColors.orange};
+`;
+
+const Article = styled.div`
+  flex: 1;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+  color: ${chkColors.white};
+`;
+
+const Contents = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: left;
+
+  color: ${chkColors.white};
+  word-break: break-all;
+`;
+
+const Meta = styled.div`
+  color: ${chkColors.darkenAqua};
+  font-weight: bold;
+`;
+
+const Icon = styled.img`
+  height: 35px;
+  width: 35px;
+  border-radius: 50%;
+  border: solid 1px ${chkColors.orange};
+  object-fit: cover;
+  margin: 0 10px;
+  vertical-align: middle;
+`;
diff --git a/frontend/src/components/FeaturedBlogWrapper.tsx b/frontend/src/components/FeaturedBlogWrapper.tsx
@@ -1,11 +1,62 @@
 import * as React from "react";
 import styled from "styled-components";
 
-export const FeaturedBlogWrapper = () => <FeaturedBlogWrapperStyle>featured-blog-wrapper</FeaturedBlogWrapperStyle>;
+import { chkColors } from "./../commons/color";
 
-const FeaturedBlogWrapperStyle = styled.div`
-  width: 100%;
-  color: white;
-  background-color: #242424;
-  height: 600px;
+import MoreButton from "./MoreButton";
+
+import { FeaturedBlog } from "./FeaturedBlog";
+
+export const FeaturedBlogWrapper = () => (
+  <Wrapper>
+    <Title>BLOG</Title>
+    <BlogWrapper>
+      <FeaturedBlog
+        title="news title"
+        date="YYYY/MM/DD"
+        summary="人の世界は住みにくい人の世界は住みにくい人の世界は住みにくい。
+        人の世界は住みにくい人の世界は住みにくい人の世界は住みにくい。"
+        author="だれかさん"
+        to="/blog"
+      />
+      <FeaturedBlog
+        title="news title"
+        date="YYYY/MM/DD"
+        summary="人の世界は住みにくい人の世界は住みにくい人の世界は住みにくい。
+        人の世界は住みにくい人の世界は住みにくい人の世界は住みにくい。"
+        author="だれかさん"
+        to="/blog"
+      />
+      <FeaturedBlog
+        title="news title"
+        date="YYYY/MM/DD"
+        summary="人の世界は住みにくい人の世界は住みにくい人の世界は住みにくい。
+        人の世界は住みにくい人の世界は住みにくい人の世界は住みにくい。"
+        author="だれかさん"
+        to="/blog"
+      />
+    </BlogWrapper>
+    <MoreButton to="/blog" />
+  </Wrapper>
+);
+
+const Wrapper = styled.div`
+  background-color: ${chkColors.aqua};
+  margin: 10px;
+  padding: 50px 40px;
+  border-radius: 8px;
+`;
+
+const Title = styled.h1`
+  font-size: 1.5rem;
+  text-align: center;
+  color: ${chkColors.white};
+`;
+
+const BlogWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 `;
diff --git a/frontend/src/components/MoreButton.tsx b/frontend/src/components/MoreButton.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import styled from "styled-components";
+
+import ChkButtonBase from "./../commons/ChkButtonBase";
+
+interface IProps {
+  to: string;
+}
+
+const MoreButton = (props: IProps) => {
+  const { to } = props;
+
+  return (
+    <MoreButtonWrapper>
+      <ChkButtonBase text="more" to={to} />
+    </MoreButtonWrapper>
+  );
+};
+
+const MoreButtonWrapper = styled.div`
+  margin: 0 auto;
+  width: 150px;
+`;
+
+export default MoreButton;
diff --git a/frontend/src/components/PopularRadioWrapper.tsx b/frontend/src/components/PopularRadioWrapper.tsx
@@ -3,9 +3,9 @@ import styled from "styled-components";
 
 import { title } from "./../commons/style";
 import { chkColors } from "./../commons/color";
-import ChkButtonBase from "../commons/ChkButtonBase";
 
 import * as sidebarRadioImg from "./../../images/sidebar-radio-img.png";
+import MoreButton from "./MoreButton";
 import { PopularRadioCard } from "./PopularRadioCard";
 
 export const PopularRadioWrapper = () => (
@@ -28,9 +28,7 @@ export const PopularRadioWrapper = () => (
         description="エナジードリンク、お年玉の使い道、登山、Advent Calendar、エディタ、LTalksなどの話をしました。"
       />
     </PopularRadioCardWrapper>
-    <MoreButtonWrapper>
-      <MoreButton to="/radios" text="more" />
-    </MoreButtonWrapper>
+    <MoreButton to="/radios" />
   </PopularRadioWrapperStyle>
 );
 
@@ -51,11 +49,3 @@ const PopularRadioCardWrapper = styled.div`
   width: auto;
   height: auto;
 `;
-
-const MoreButtonWrapper = styled.div`
-  margin: 0 auto;
-  margin-top: 20px;
-  width: 70%;
-`;
-
-const MoreButton = styled(ChkButtonBase)``;
diff --git a/frontend/src/components/RadioHistoryContentWrapper.tsx b/frontend/src/components/RadioHistoryContentWrapper.tsx
@@ -3,7 +3,8 @@ import styled from "styled-components";
 
 import { title, goodSpace } from "./../commons/style";
 import { chkColors } from "./../commons/color";
-import ChkButtonBase from "../commons/ChkButtonBase";
+
+import MoreButton from "./MoreButton";
 import { RadioCardWrapper } from "./../components/RadioCardWrapper";
 import { RadioHistoryFeature } from "./../components/RadioHistoryFeature";
 
@@ -41,9 +42,7 @@ export const RadioHistoryContentWrapper = () => (
         <RadioCardWrapper />
         <RadioCardWrapper />
       </RadioCardsWrapper>
-      <MoreButtonWrapper>
-        <MoreButton to="" text="more" />
-      </MoreButtonWrapper>
+      <MoreButton to="" />
     </RadioHistoryContentArea>
   </Wrapper>
 );
@@ -85,11 +84,3 @@ const RadioCardsWrapper = styled.div`
   ${goodSpace}
   margin: 0 auto 20px auto;
 `;
-
-const MoreButtonWrapper = styled.div`
-  margin-top: 20px;
-  margin: 0 auto;
-  width: 20%;
-`;
-
-const MoreButton = styled(ChkButtonBase)``;