Add cards for the Toucan

front/src/view/AllToucanPage/AllToucanPage.js

 import React, {Component} from 'react'
-import {Card} from 'semantic-ui-react'
+import {Card, Segment} from 'semantic-ui-react'
 import ToucanCard from './ToucanCard'
 import env from '../../.env'
 
@@ -26,15 +26,18 @@ class AllToucan extends Component {
     }
     render(){
         return (
+            <Segment style={{margin:"3em",padding:"2em"}}>
             <Card.Group>
                 {this.state.toucans.map( toucan => {
                     return <ToucanCard
                     image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
                     link={`${env.backURL}/toucan/pdf/${toucan["_id"]}`}
                     header={toucan.title}
+                    date={(new Date(toucan.date).toLocaleDateString())}
                     />
              })}
             </Card.Group>
+            </Segment>
         )}
 }
 

front/src/view/AllToucanPage/ToucanCard.js

@@ -3,14 +3,18 @@ import {Card, Image} from 'semantic-ui-react'
 
 const ToucanCard = ({...props}) => {
     return (
-        <Card
-        href={props.link}
-        >
-            <Image src={props.image} size="small"/>
-            <Card.Content>
-            <Card.Header content="HDNZIDJZEP"/>
-            </Card.Content>
-        </Card>
+            <Card
+                href={props.link}
+                link
+                style={{margin:"1em"}}
+                description="On test"
+            >
+                <Card.Content>
+                <Card.Header content={props.header}/>
+                <Card.Meta content={props.date} textAlign="right"/>
+                </Card.Content>
+                <Image src={props.image}/>
+            </Card>
     )
 }