Add FloatedItem components

Author: Kento75

frontend/public/assets/short-paragraph.png

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button, Image, Item } from 'semantic-ui-react'
+
+const paragraph = <Image src="/assets/short-paragraph.png" />
+
+// TODO あとで色々なおすよ
+export const FloatedItem = ({ backgroundColor, imageURL, comment }) => (
+  <Item.Group relaxed style={{ backgroundColor: "#" + backgroundColor }}>
+    <Item>
+      <Item.Image circular size='small' src={ imageURL || "/assets/user.png" } />
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>Content A</Item.Header>
+        <Item.Description>{comment || paragraph}</Item.Description>
+        <Item.Extra>
+          <Button floated='right'>Action</Button>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)

frontend/src/components/FloatedItem/FloatedItem.jsx

@@ -1,3 +1,4 @@
 export * from "./PrivateRoute/PrivateRoute";
 export * from "./FixedHeader/FixedHeader";
 export * from "./UserImageCard/UserImageCard";
+export * from "./FloatedItem/FloatedItem";

frontend/src/components/index.js

@@ -0,0 +1,3 @@
+.detailedContainer {
+  background-color: #252839;
+}

frontend/src/containers/UserDetailedPage/UserDetailedPage.css

@@ -1,6 +1,11 @@
 import React, { Component } from 'react'
 import { connect } from "react-redux";
+import { Container, Header } from "semantic-ui-react";
+
 import { userActions } from "../../actions";
+import { FloatedItem } from "../../components";
+import { classes } from "./UserDetailedPage.css";
+
 
 class UserDetailedPage extends Component {
   componentDidMount() {
@@ -10,11 +15,16 @@ class UserDetailedPage extends Component {
 
   render() {
     const { users } = this.props;
-    console.log(users.userDetailed)
     return (
       <div>
         { users.userDetailed &&
-          users.userDetailed.map(user => <div key={user.id}>{user.firstName}</div>)
+          users.userDetailed.map( user =>
+            <Container key={ user.id } text style={{ marginTop: '7em' }}>
+              <Header as='h1'>{ user.firstName + ' ' + user.lastName }</Header>
+
+              <FloatedItem backgroundColor={ "22222e" } imageURL={ user.imageURL } comment={ user.comment }/>
+            </Container>
+          )
         }
       </div>
     )