Update content

Author: danangekal

src/components/explore/Album.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Responsive, Card, Image, Label, Icon } from 'semantic-ui-react';
+
+import image from '../../assets/img/image.png';
+import matthew from '../../assets/img/matthew.png';
+
+export default class Album extends Component {
+ 
+ render() {
+ const { explores } = this.props;
+
+ return( 
+ <div>
+ <Responsive {...Responsive.onlyMobile}>
+ <Card.Group itemsPerRow={1}>
+ {explores.map((item)=> (
+ <Card color='green' key={item.id} image={image} 
+ header={item.title} 
+ description={(
+ <Label as={Link} to={`/profile/${item.userId}`} color='teal' image>
+ <Image src={matthew} />
+ {item.user.name}
+ </Label>
+ )} 
+ extra={(
+ <div>
+ <Link to={`/albums/${item.id}`}>
+ <Icon name='picture' circular /> {explores.length} Photos
+ </Link>
+ </div>
+ )} 
+ />
+ ))}
+ </Card.Group>
+ </Responsive>
+ <Responsive minWidth={Responsive.onlyTablet.minWidth}>
+ <Card.Group itemsPerRow={3}>
+ {explores.map((item)=> (
+ <Card color='green' key={item.id} image={image} 
+ header={item.title} 
+ description={(
+ <Label as={Link} to={`/profile/${item.userId}`} color='teal' image>
+ <Image src={matthew} />
+ {item.user.name}
+ </Label>
+ )} 
+ extra={(
+ <div>
+ <Link to={`/albums/${item.id}`}>
+ <Icon name='picture' circular /> {explores.length} Photos
+ </Link>
+ </div>
+ )} 
+ />
+ ))}
+ </Card.Group>
+ </Responsive>
+ </div>
+ )
+ }
+}

src/components/explore/Content.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Responsive, Card, Image, Button } from 'semantic-ui-react';
+
+import matthew from '../../assets/img/matthew.png';
+
+export default class User extends Component {
+ 
+ render() {
+ const { friends } = this.props;
+
+ return( 
+ <div>
+ <Responsive {...Responsive.onlyMobile}>
+ <Card.Group itemsPerRow={1} >
+ {friends.map((item)=> (
+ <Card color='green' key={item.id} link>
+ <Card.Content>
+ <Image as={Link} to={`/profile/${item.id}`} floated='right' size='mini' src={matthew} />
+ <Card.Header><Link to={`/profile/${item.id}`}>{item.username}</Link></Card.Header>
+ <Card.Meta>{item.name}</Card.Meta>
+ </Card.Content>
+ <Card.Content extra>
+ <div className='ui two buttons'>
+ <Button basic color='green' as={Link} to={`/profile/${item.id}`}>
+ Detail Profile
+ </Button>
+ </div>
+ </Card.Content>
+ </Card>
+ ))}
+ </Card.Group>
+ </Responsive>
+ <Responsive minWidth={Responsive.onlyTablet.minWidth}>
+ <Card.Group itemsPerRow={4} >
+ {friends.map((item)=> (
+ <Card color='green' key={item.id} link>
+ <Card.Content>
+ <Image as={Link} to={`/profile/${item.id}`} floated='right' size='mini' src={matthew} />
+ <Card.Header><Link to={`/profile/${item.id}`}>{item.username}</Link></Card.Header>
+ <Card.Meta>{item.name}</Card.Meta>
+ </Card.Content>
+ <Card.Content extra>
+ <div className='ui two buttons'>
+ <Button basic color='green' as={Link} to={`/profile/${item.id}`}>
+ Detail Profile
+ </Button>
+ </div>
+ </Card.Content>
+ </Card>
+ ))}
+ </Card.Group>
+ </Responsive>
+ </div>
+ )
+ }
+}