Permalink
Browse files

component properties

  • Loading branch information...
lvguowei committed Oct 6, 2018
1 parent 04f664e commit 178cb8c5498b1931a1619f25ec978bd29311644a
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,35 @@
import React from "react";
class Product extends React.Component {
render() {
return (
<div className="item">
<div className="image">
<img src={this.props.productImageUrl} alt="" />
</div>
<div className="middle aligned content">
<div className="header">
<a>
<i className="large caret up icon" />
</a>
{this.props.votes}
</div>
<div className="description">
<a href={this.props.url}>{this.props.title}</a>
<p>{this.props.description}</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img
className="ui avatar image"
src={this.props.submitterAvatarUrl}
alt=""
/>
</div>
</div>
</div>
);
}
}
export default Product;
View
@@ -1,11 +1,22 @@
import React, { Component } from "react";
import "./App.css";
import Product from "./Product";
import products from "./Seed";
class ProductList extends Component {
render() {
const product = products[0];
return (
<div className="ui unstackable items">
Hello, friend! I am a basic React component.
<Product
id={product.id}
title={product.title}
description={product.description}
url={product.url}
votes={product.votes}
submitterAvatarUrl={product.submitterAvatarUrl}
productImageUrl={product.productImageUrl}
/>
</div>
);
}
View
@@ -0,0 +1,44 @@
function generateVoteCount() {
return Math.floor(Math.random() * 50 + 15);
}
const products = [
{
id: 1,
title: "Yellow Pail",
description: "On-demand sand castle construction expertise.",
url: "#",
votes: generateVoteCount(),
submitterAvatarUrl: "images/avatars/daniel.jpg",
productImageUrl: "images/products/image-aqua.png"
},
{
id: 2,
title: "Supermajority: The Fantasy Congress League",
description: "Earn points when your favorite politicians pass legislation.",
url: "#",
votes: generateVoteCount(),
submitterAvatarUrl: "images/avatars/kristy.png",
productImageUrl: "images/products/image-rose.png"
},
{
id: 3,
title: "Tinfoild: Tailored tinfoil hats",
description: "We already have your measurements and shipping address.",
url: "#",
votes: generateVoteCount(),
submitterAvatarUrl: "images/avatars/veronika.jpg",
productImageUrl: "images/products/image-steel.png"
},
{
id: 4,
title: "Haught or Naught",
description: "High-minded or absent-minded? You decide.",
url: "#",
votes: generateVoteCount(),
submitterAvatarUrl: "images/avatars/molly.png",
productImageUrl: "images/products/image-yellow.png"
}
];
export default products;

0 comments on commit 178cb8c

Please sign in to comment.