Build: Available Meals Section

.prettierrc

@@ -4,5 +4,5 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }

package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/App.js

@@ -1,23 +1,13 @@
-import logo from './logo.svg';
 import './App.css';
+import './components/MealCard/mealcard.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Meals from './components/Meals/Meals';
+import './components/Meals/meals.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Meals />
     </div>
   );
 }

src/components/MealCard/MealCard.jsx

@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+import { Button } from 'react-bootstrap';
+
+export default class MealCard extends Component {
+  render() {
+    return (
+      <div className="card">
+        <img src={this.props.img} className="card-img" alt="food" />
+        <div className="card-body">
+          <h5 className="card-title">{this.props.title}</h5>
+          <span className="card-text">{this.props.organization}</span>
+          <Button className="Button">Get This Meal</Button>
+        </div>
+      </div>
+    );
+  }
+}

src/components/MealCard/__tests__/MealCard.test.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import MealCard from '../MealCard';
+it('renders apply now correctly', () => {
+  const tree = renderer.create(<MealCard />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/MealCard/__tests__/__snapshots__/MealCard.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders apply now correctly 1`] = `
+<div
+  className="card"
+>
+  <img
+    alt="food"
+    class="card-img"
+  />
+  <div
+    class="card-body"
+  >
+    <h5
+      class="card-title"
+    />
+    <span
+      class="card-text"
+    />
+    <button
+      className="Button btn btn-primary"
+      disabled={false}
+      type="button"
+    >
+      Get This Meal
+    </button>
+  </div>
+</div>
+`;

src/components/MealCard/mealcard.css

@@ -0,0 +1,47 @@
+.card{
+    height: 436px;
+    width: 270px;
+    top: 247px;
+    left: 135px;
+}
+
+.card-body{
+    position: relative;
+}
+
+.Button{
+    background-color: #E5E5E5;
+    height: 60px;
+    width: 100%;
+    border: 0;
+    border: none;
+    color: black;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.Button:hover {
+    color: #fff;
+    background-color: #03B664;
+    border-color: #0062cc;
+}
+
+.card-img {
+    width: 270px;
+    height: 270px;
+    object-fit: cover;
+}
+
+.card-title{
+    position: absolute;
+
+}
+
+.card-text{
+    position: absolute;
+    bottom: 80px;
+    left: 18px;
+    color: gray;
+}
+

src/components/Meals/Meals.jsx

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { Carousel, CarouselItem } from 'react-bootstrap';
+import MealCard from '../MealCard/MealCard';
+import '../Meals/meals.css';
+
+export default class Meals extends Component {
+  render() {
+    return (
+      <div>
+        <div className="available-meals">
+          <h1 className="meals-title">Available Meals Right Now</h1>
+          <p className="meals-quote">
+            `If you dont try this app, you wont become the hero you were meant
+            to be`
+          </p>
+          <Carousel>
+            <CarouselItem>
+              <div className="items">
+                <MealCard
+                  img="tomato.jpg"
+                  title="Canned Tomato Soup"
+                  organization="Family Market"
+                />
+                <MealCard
+                  img="donut.jpg"
+                  title="Pastry Box"
+                  organization="Chocolate Bar"
+                />
+                <MealCard
+                  img="pantry.jpg"
+                  title="Two days worth of pantry"
+                  organization="7eleven"
+                />
+                <MealCard
+                  img="rice.jpg"
+                  title="Rice bags"
+                  organization="Sprout Warehouse"
+                />
+              </div>
+            </CarouselItem>
+            <CarouselItem>
+              <div className="items">
+                <MealCard
+                  img="tomato.jpg"
+                  title="Canned Tomato Soup"
+                  organization="Family Market"
+                />
+                <MealCard
+                  img="donut.jpg"
+                  title="Pastry Box"
+                  organization="Chocolate Bar"
+                />
+                <MealCard
+                  img="pantry.jpg"
+                  title="Two days worth of pantry"
+                  organization="7eleven"
+                />
+                <MealCard
+                  img="rice.jpg"
+                  title="Rice bags"
+                  organization="Sprout Warehouse"
+                />
+              </div>
+            </CarouselItem>
+          </Carousel>
+        </div>
+      </div>
+    );
+  }
+}

src/components/Meals/__tests__/Meals.test.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import Meals from '../Meals';
+it('renders apply now correctly', () => {
+  const tree = renderer.create(<Meals />).toJSON();
+  expect(tree).toMatchSnapshot();
+});