Initial version

src/components/RecipeCard/index.js

@@ -0,0 +1,3 @@
+import RecipeCard from './recipecard';
+
+export default RecipeCard;

src/components/RecipeCard/recipecard.css

@@ -0,0 +1,91 @@
+.recipe-card {
+    height: 360px;
+    margin: 12px 0;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.recipe-card-top {
+    width: 100%;
+    height: 240px;
+}
+
+.recipe-card-bottom {
+    padding: 8px;
+    padding-right: 16px;
+    height: 120px;
+}
+
+.recipe-card-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.recipe-card-desc {
+    height: 60%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.recipe-card-tags {
+    height: 25%;
+}
+
+.recipe-card-logo-wrapper {
+    width: 25%;
+    height: 100%;
+}
+
+.recipe-card-logo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.recipe-card-title-container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-content: space-between;
+}
+
+.recipe-card-title {
+    text-align: left;
+    padding-left: 8px;
+    font-size: 22px;
+    font-weight: bold;
+}
+
+.recipe-card-price {
+    text-align: right;
+}
+
+.recipe-card-price-number {
+    color: #2d96d6;
+    font-size: 16px;
+}
+
+.recipe-card-price-suffix {
+    font-size: 10px;
+}
+
+.recipe-card-tags {
+    display: inline-flex;
+    flex-direction: row;
+    height: 40px;
+}
+
+.recipe-card-tag {
+    margin: 0 16px;
+    margin-top: 4px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: darkgray;
+}

src/components/RecipeCard/recipecard.js

@@ -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>
+    )
+}