bendtherules/food-app
1
0
Fork 0
mirror of https://github.com/bendtherules/food-app.git synced 2026-08-18 22:02:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial version

Browse Source
This commit is contained in:
bendtherules
2018-11-18 19:59:47 +05:30
commit d0217cd938
35 changed files with 24379 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RecipeCard/recipecard.js
+66
View File
@@ -0,0 +1,66 @@
import React, { Component } from 'react';
import './recipecard.css';
function toTitleCase(str) {
str = str.toLowerCase().split(' ');
for (var i = 0; i < str.length; i++) {
str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
}
return str.join(' ');
}
export default function RecipeCard(props) {
return (
<div className="recipe-card" >
<div className="recipe-card-top">
<img className="recipe-card-image" src={props.data.image} alt={props.data.name} />
</div>
<div className="recipe-card-bottom">
<div className="recipe-card-desc">
<div className="recipe-card-logo-wrapper">
<img className="recipe-card-logo" src={props.data.icon} alt={props.data.name} />
</div>
<div className="recipe-card-title-container">
<div className="recipe-card-title">
{
toTitleCase(props.data.name)
}
</div>
<div className="recipe-card-rating">
{
new Array(props.data.rating).map(_useless => (
<div className="recipe-card-star">
</div>
))
}
</div>
</div>
<div className="recipe-card-price">
<div className="recipe-card-price-number">
{
`$${props.data.price}`
}
</div>
<div className="recipe-card-price-suffix">
Min Order
</div>
</div>
</div>
<div className="recipe-card-tags">
{
props.data.tags.map(tag => (
<div className="recipe-card-tag">
{
toTitleCase(tag)
}
</div>
))
}
</div>
</div>
</div>
)
}