ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-12 13:26:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

cardEntry

Browse source
This commit is contained in:
Ruidy Nemausat 2020-01-28 07:53:55 +01:00
parent b9067c85bd
commit b624122f13
4 changed files with 30 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/CardEntry.js Normal file
View file

@ -0,0 +1,25 @@
import React from "react";
import { Link } from "react-router-dom";
const CardEntry = props => {
const { idMeal, strMeal, strMealThumb } = props.item;
return (
<Link to={`${idMeal}`}>
<li>
<div className="row">
<div className="col s12 m6">
<div className="card ">
<div className="card-image">
<img src={strMealThumb} alt={strMeal} />
</div>
<div class="card-content">
<h4>{strMeal}</h4>
</div>
</div>
</div>
</div>
</li>
</Link>
);
};
export default CardEntry;

1
src/components/CategoryEntry.js
View file

@ -11,6 +11,7 @@ const CategoryEntry = props => {
const { url } = useRouteMatch(); const { url } = useRouteMatch();
return ( return (
// <CardEntry item={meal} />
<Link to={`${url}/${strCategory}`}> <Link to={`${url}/${strCategory}`}>
<li> <li>
<div className="row"> <div className="row">

29
src/components/SearchResult.js
View file

@ -1,34 +1,9 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import CardEntry from "./CardEntry";
const SearchResult = props => { const SearchResult = props => {
const { meal } = props; const { meal } = props;
const { idMeal, strMeal, strMealThumb } = meal; return <CardEntry item={meal} />;
return (
<Link to={`${idMeal}`}>
<li>
<div className="row">
<div className="col s12 m6">
<div className="card ">
<div className="card-image">
<img src={strMealThumb} alt={strMeal} />
{/* <span className="card-title ">{strMeal}</span> */}
</div>
<div class="card-content">
<h4>{strMeal}</h4>
</div>
{/* <div className="card-stacked">
<div className="card-content black-text">
<p>{strCategoryDescription}</p>
</div>
</div> */}
</div>
</div>
</div>
</li>
</Link>
);
}; };
export default SearchResult; export default SearchResult;

10
src/pages/Category.js
View file

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams, Link, useRouteMatch } from "react-router-dom"; import { useParams, Link, useRouteMatch } from "react-router-dom";
import CardEntry from "../components/CardEntry";
const CategoryPage = props => { const CategoryPage = props => {
const [meals, setMeals] = useState({ meals: [] }); const [meals, setMeals] = useState({ meals: [] });
@ -15,28 +16,21 @@ const CategoryPage = props => {
}, []); }, []);
const { url } = useRouteMatch(); const { url } = useRouteMatch();
// const {
// strCategory,
// strCategoryThumb,
// strCategoryDescription
// } = props.category;
return ( return (
<div className="container"> <div className="container">
<h1>Chef's {strCategory} Recipes</h1> <h1>Chef's {strCategory} Recipes</h1>
{/* <img src={strCategoryThumb} alt={strCategory} />
<p>{strCategoryDescription}</p> */}
<ul> <ul>
{meals.meals.map((meal, i) => ( {meals.meals.map((meal, i) => (
<li key={i}> <li key={i}>
{/* <CardEntry item={meal} /> */}
<Link to={`/${meal.idMeal}`}> <Link to={`/${meal.idMeal}`}>
<div className="row"> <div className="row">
<div className="col s12 m6"> <div className="col s12 m6">
<div className="card "> <div className="card ">
<div className="card-image"> <div className="card-image">
<img src={meal.strMealThumb} alt={meal.strMeal} /> <img src={meal.strMealThumb} alt={meal.strMeal} />
{/* <span className="card-title">{meal.strMeal}</span> */}
</div> </div>
<div class="card-content"> <div class="card-content">
<h4>{meal.strMeal}</h4> <h4>{meal.strMeal}</h4>