Components

Presentational components used across Recipe Hub pages.

All components live in src/components/. They are presentational by default — they receive props and render UI. The only exception is RecipeDetailCard, which reads from FavoritesContext directly.

NavBar

Site-wide navigation links rendered in the app header.

Footer

Static copyright footer rendered on every page.

SearchBar

Controlled search input with button click handler and validation.

RecipeCard

Linked thumbnail card for a single recipe in a list.

RecipeList

Grid container that maps an array of recipes to RecipeCard elements.

RecipeDetailCard

Full recipe view with ingredients, instructions, video, and favorite toggle.

---

NavBar

Renders the primary navigation using NavLink from React Router. Active links receive the active class automatically.

Props: none

src/components/NavBar.jsx

import React from 'react'
import { NavLink } from 'react-router-dom'
import './NavBar.css'

export const NavBar = () => {
  return (
    <nav>
      <ul id="nav-principal">
        <li>
          <NavLink className={({ isActive }) => isActive ? "active" : ""} to="favorites">
            Favorites💞
          </NavLink>
        </li>
        <li><NavLink to="/">Home 🏠</NavLink></li>
        <li><NavLink to="contact">Contact 📡</NavLink></li>
      </ul>
    </nav>
  )
}

NavBar is a named export (export const NavBar). Import it as import { NavBar } from '../components/NavBar'. The active class is applied manually via the className callback on the Favorites link.

---

Footer

Static footer with copyright text. Powered by TheMealDB attribution.

Props: none

src/components/Footer.jsx

import './Footer.css'

const Footer = () => {
  return (
    <footer className="footer">
      <p>© 2025 The Secret Recipe. Powered by TheMealDB.</p>
    </footer>
  )
}

export default Footer

---

SearchBar

Controlled search input. The parent (Home) owns the search state string and passes it down alongside a click handler. Empty-string validation happens in Home.handleClick before calling fetchRecipes.

Props

Prop	Type	Description
search	string	Controlled input value, owned by the parent
setSearch	(value: string) => void	Updates the search string in parent state on every keystroke
onSearch	() => void	Called when the Buscar button is clicked
error	string	Validation error message to display below the input

src/components/SearchBar.jsx

import "./SearchBar.css"

export const SearchBar = ({ search, setSearch, onSearch, error }) => {
  return (
    <div className="search-superior">
      <div className="search-container">
        <input
          id="search-input"
          type="text"
          placeholder="Search Recipes..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <button onClick={onSearch}>Buscar</button>
      </div>
      {error && <p>{error}</p>}
    </div>
  )
}

SearchBar is a named export (export const SearchBar). Import it as import { SearchBar } from '../components/SearchBar'. The component renders any non-empty error string below the input field.

---

RecipeCard

Rendered by RecipeList for each item in a recipe array. Wraps the entire card in a Link to the recipe detail page.

Props

Prop	Type	Description
id	string	Meal ID from TheMealDB; used to build the /recipe/:id link
name	string	Recipe name shown below the image
picture	string	Thumbnail image URL
category	string	Meal category label

src/components/RecipeCard.jsx

import { Link } from 'react-router-dom'
import './RecipeCard.css'

const RecipeCard = ({ id, name, picture, category }) => {
  return (
    <Link to={`/recipe/${id}`} className="recipe-card">
      <img src={picture} alt={name} />
      <div className="recipe-info">
        <h3>{name}</h3>
        <span className="category">{category}</span>
      </div>
    </Link>
  )
}

export default RecipeCard

---

RecipeList

Receives an array of recipe objects and renders a grid of RecipeCard elements. Returns null when the array is empty, so the page renders nothing (rather than an empty container) before a search is performed.

Props

Prop	Type	Description
recipes	Array<{ id, name, picture, category }>	Array of normalized recipe objects from the API service

src/components/RecipeList.jsx

import RecipeCard from './RecipeCard'
import './RecipeList.css'

const RecipeList = ({ recipes }) => {
  if (!recipes.length) return null

  return (
    <div className="recipe-list">
      {recipes.map((recipe) => (
        <RecipeCard
          key={recipe.id}
          id={recipe.id}
          name={recipe.name}
          picture={recipe.picture}
          category={recipe.category}
        />
      ))}
    </div>
  )
}

export default RecipeList

---

RecipeDetailCard

Displays the full detail view of a recipe. This is the only component that reads from context directly — it calls useFavorites to get toggleFavorite and isFavorite, enabling the favorite button without prop drilling.

Props

Prop	Type	Description
recipe	object	Full recipe object (see shape below)

recipe object shape:

Field	Type	Description
id	string	Meal ID
name	string	Recipe name
picture	string	Image URL
category	string	Meal category
instructions	string	Full cooking instructions
video	string | null	YouTube URL, or null if unavailable
ingredients	Array<{ name: string, measure: string }>	List of ingredients with measures

src/components/RecipeDetailCard.jsx

import ReactPlayer from "react-player"
import { useFavorites } from "../context/FavoritesContext"
import "./RecipeDetailCard.css"

const RecipeDetailCard = ({ recipe }) => {
  const { isFavorite, toggleFavorite } = useFavorites()
  return (
    <div className="recipe-detail">
      <img src={recipe.picture} alt="" />
      <h3>{recipe.name}</h3>
      <p>{recipe.category}</p>
      <h5>Ingredients:</h5>
      <ul style={{ listStyle: "none" }}>
        {recipe.ingredients?.map((ig, i) => (
          <li key={i}>
            {ig.name} - {ig.measure}
          </li>
        ))}
      </ul>
      <ReactPlayer src={recipe.video} controls width="100%" height="400px" />
      <h4>{recipe.instructions}</h4>
      <button onClick={() => toggleFavorite(recipe.id)}>
        {isFavorite(recipe.id) ? "💔 Remove from Favs" : "❤️ Add to Favs"}
      </button>
    </div>
  )
}

export default RecipeDetailCard

The ReactPlayer is always rendered (not conditionally). It receives src (not url) and renders an embedded player. The video value from TheMealDB is the YouTube URL stored in recipe.video.