Repository: Sakshi-Simform/Recipe-App
Pull request #4: Feature/details
Author: login: Sakshi-Simform
Labels: name: enhancement
description: New feature or request
Created: 2025-05-15T05:59:45Z | Merged: 2025-05-21T04:57:01Z

# Description
- add recipe details page
- includes image , calories , short description , rating ,  ingredients and instructions

# Type of change

- [ ] Bug fix
- [x] New feature
- [ ] Documentation update
- [ ] Refactoring
- [ ] Performance improvement
- [ ] Scaffolding

# Screenshots
![Screenshot from 2025-05-15 11-44-04](https://github.com/user-attachments/assets/b2feb6c5-bc72-4c56-8f70-5c5d7f5070e5)
![Screenshot from 2025-05-15 11-43-45](https://github.com/user-attachments/assets/faef2c37-21cd-4603-9ef9-3e176a006669)
![Screenshot from 2025-05-15 11-31-15](https://github.com/user-attachments/assets/e48b2326-d009-41ac-99a0-54c2c6e9d527)


# How to test
https://deploy-preview-4--cookpedia-app.netlify.app/



Diff:
diff --git a/index.html b/index.html
index e02fc10..b733b0e 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <meta name="description"
+        content="Recipe app showcase variety of recipe. It shows description , instructions , ingredients about recipes ">
+    <meta name="keywords" content="React , Information">
+    <meta name="author" content="Sakshi Shah">
     <link rel="icon" href="/icon/logo1.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CookBook</title>
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..50a4633
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index f4f8002..6998946 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,21 @@
-import React from 'react';
+import React , {useState} from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import {HomePage} from './pages/Home';
-import styles from './styles/App.module.css'
+import { HomePage } from './pages/Home';
+import { RecipeDetails } from './components/RecipeDetails';
+import { Header } from './components/Header';
+import styles from './styles/App.module.css';
 
 export const App: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+
   return (
     <Router>
       <div className={styles.app}>
+        <Header onSearch={setSearchTerm} showSearch={true} />
+
         <Routes>
-          <Route path="/" element={<HomePage />} />
+          <Route path="/" element={<HomePage searchTerm={searchTerm} />} />
+          <Route path="/recipe/:id" element={<RecipeDetails />} />
         </Routes>
       </div>
     </Router>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 59ae4c1..d88de78 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,23 +1,32 @@
 import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { SearchBar } from './SearchBar';
 import styles from '../styles/App.module.css'
 
-interface HeaderProp{
+interface HeaderProp {
   onSearch: (searchTerm: string) => void;
+  showSearch: boolean; 
 }
 
-export const Header: React.FC<HeaderProp> = ({ onSearch }) => {
+export const Header: React.FC<HeaderProp> = ({ onSearch, showSearch = false }) => {
+  const location = useLocation();
+
   return (
     <header>
+      {/* display the logo */}
       <div className={styles.leftlogo}>
-        <img
-          src='/icon/logo1.png'
-          className={styles.Cookbooklogo}
-          alt='logo'
-        />
-        <h1 className={styles.appname}>CookBook</h1>
+        <Link to="/" className={styles.logoLink}>
+          <img
+            src='/icon/logo1.png'
+            className={styles.Cookbooklogo}
+            alt='logo'
+          />
+          <h1 className={styles.appname}>CookBook</h1>
+        </Link>
       </div>
-      <SearchBar onSearch={onSearch} />
+
+      {/* Show SearchBar only on homepage */}
+      {location.pathname === "/" && showSearch && <SearchBar onSearch={onSearch} />}
     </header>
   );
 };
\ No newline at end of file
diff --git a/src/components/RecipeCard.tsx b/src/components/RecipeCard.tsx
index 6cfea99..aa59fea 100644
--- a/src/components/RecipeCard.tsx
+++ b/src/components/RecipeCard.tsx
@@ -1,6 +1,7 @@
+import { useNavigate } from 'react-router-dom';
 import type { Recipe } from '../types/recipe.types';
 import calorieslogo from '/assets/calories.svg';
-import styles from  '../styles/RecipeCard.module.css'
+import styles from '../styles/RecipeCard.module.css'
 
 interface RecipeCardProps {
   recipe: Recipe;
@@ -24,6 +25,7 @@ const renderRating = (rating: number) => {
 };
 
 export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
+  const navigate = useNavigate();
   return (
     <div className={styles.recipecard}>
       <div className={styles.flipinner}>
@@ -31,15 +33,15 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
         <div className={styles.recipecardfront}>
           <img src={recipe.image} alt={recipe.title} loading="lazy" />
 
-          <div className={styles.recipeinfobox}>
-            <div className={styles.caloriessection}>
+          <div className={styles.recipeInfoBox}>
+            <div className={styles.caloriesSection}>
               <div className={styles.calories}>
-                <img 
-                className={styles.caloriesvg}
-                src={calorieslogo}
-                alt='calories'
+                <img
+                  className={styles.calorieSvg}
+                  src={calorieslogo}
+                  alt='calories'
                 />
-                <p className={styles.caloriedisplay}>{recipe.calories} kcal</p>
+                <p className={styles.calorieDisplay}>{recipe.calories} kcal</p>
               </div>
             </div>
             <div className={styles.rating} role="rating-btn">{renderRating(recipe.rating)}</div>
@@ -59,9 +61,15 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
             ))}
           </ul>
 
-          <button className={styles.viewdetailsbutton}>View Details</button>
-          </div>
+          <button
+            className={styles.viewDetailsButton}
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/recipe/${recipe.id}`, { state: recipe });
+            }}
+          >View Details</button>
         </div>
       </div>
+    </div>
   );
 };
\ No newline at end of file
diff --git a/src/components/RecipeDetails.tsx b/src/components/RecipeDetails.tsx
new file mode 100644
index 0000000..ff8d81a
--- /dev/null
+++ b/src/components/RecipeDetails.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useLocation , Link } from 'react-router-dom';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css';
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      <div className={styles.recipeDetails}>
+        <div className={styles.recipeContainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailImage}>
+                <img
+                  className={styles.recipeDetailsImg}
+                  src={recipe.image}
+                  alt={recipe.title}
+                />
+              </div>
+
+              <div className={styles.info}>
+                <h2 className={styles.titleDetails}>{recipe.title}</h2>
+                <p className={styles.description}>
+                  <strong>Description:</strong> {recipe.shortDescription}
+                </p>
+                <p className={styles.description}>
+                  <strong>Calories:</strong> {recipe.calories} kcal
+                </p>
+                <p className={styles.description}>
+                  <strong>Rating:</strong> {recipe.rating}/5
+                </p>
+
+                <h3 className={styles.details}>Ingredients</h3>
+                <ul>
+                  {recipe.ingredients.map((item, index) => (
+                    <li className={styles.listDetails} key={index}>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+
+                <h3 className={styles.details}>Instructions</h3>
+                <p className={styles.instructions}>{recipe.instructions}</p>
+              </div>
+            </>
+          ) : (
+            <div className={styles.recipeData}>
+              <p>No recipe data found.</p>
+              <Link to="/" className={styles.backLink}>← Go back to home</Link>
+              </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index b2c61af..ab3a369 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -13,19 +13,17 @@ export const SearchBar: FC<SearchBarProp> = ({ onSearch }) => {
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedSearchTerm(searchTerm);
-    }, 500); 
+    }, 500);
 
     return () => clearTimeout(timer);
   }, [searchTerm]);
 
   useEffect(() => {
-    if (debouncedSearchTerm.trim()) {
-      onSearch(debouncedSearchTerm);}
-    }, [debouncedSearchTerm, onSearch]);
+    onSearch(debouncedSearchTerm.trim());
+  }, [debouncedSearchTerm, onSearch]);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setSearchTerm(value);
+    setSearchTerm(e.target.value);
   };
 
   return (
@@ -43,4 +41,4 @@ export const SearchBar: FC<SearchBarProp> = ({ onSearch }) => {
       />
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 6abb414..777835c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,25 +1,29 @@
-import React, { useState } from 'react';
-import { Header } from '../components/Header';
+import React from 'react';
 import { RecipeList } from '../components/RecipeList';
 import { sampleRecipes } from '../MockData/sampleRecipes';
 import type { Recipe } from '../types/recipe.types';
-import styles from '../styles/SearchBar.module.css'
+import styles from '../styles/SearchBar.module.css';
 
-export const HomePage: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState('');
+interface HomePageProps {
+  searchTerm: string;
+}
 
-  const filteredRecipes: Recipe[] = sampleRecipes.filter((recipe) =>
-    recipe.title.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+export const HomePage: React.FC<HomePageProps> = ({ searchTerm }) => {
+  const filteredRecipes: Recipe[] = searchTerm.trim()
+    ? sampleRecipes.filter((recipe) =>
+        recipe.title.toLowerCase().includes(searchTerm.trim().toLowerCase())
+      )
+    : sampleRecipes;
 
   return (
     <>
-      <Header onSearch={setSearchTerm} />
       {!filteredRecipes.length ? (
-        <p className={styles.searchkeyword}>No recipes found for "{searchTerm}". Please try a different keyword.</p>
+        <div>
+          <p className={styles.searchkeyword}>No recipes found for "{searchTerm}"</p>
+        </div>
       ) : (
         <RecipeList recipes={filteredRecipes} />
       )}
     </>
   );
-};
+};
\ No newline at end of file
diff --git a/src/styles/App.module.css b/src/styles/App.module.css
index 9ef5163..d5f41a5 100644
--- a/src/styles/App.module.css
+++ b/src/styles/App.module.css
@@ -105,6 +105,13 @@ h1 {
   line-height: 1.5;
 }
 
+.logoLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+
 @media (max-width: 48rem) { 
   .recipe-list {
     gap: 0.9375rem; 
diff --git a/src/styles/RecipeCard.module.css b/src/styles/RecipeCard.module.css
index 4b91457..557556c 100644
--- a/src/styles/RecipeCard.module.css
+++ b/src/styles/RecipeCard.module.css
@@ -3,7 +3,6 @@
 .recipecard {
   width: var(--card-width);
   height: var(--card-height);
-  cursor: pointer;
   border-radius: var(--border-radius);
   perspective: 1000px;
   transform-style: preserve-3d;
@@ -86,7 +85,7 @@
   margin-top: 43px;
 }
 
-.recipeinfobox {
+.recipeInfoBox {
   display: flex;
   justify-content: center;
   margin-top: 8px;
@@ -105,7 +104,7 @@
   box-shadow: var(--shadow-strong);
 }
 
-.caloriesvg {
+.calorieSvg {
   height: 20px !important;
   width: 20px !important;
 }
@@ -119,13 +118,13 @@
   justify-content: center;
 }
 
-.caloriedisplay {
+.calorieDisplay {
   width: auto;
   padding: 10px;
   margin-top: 15px;
 }
 
-.caloriessection {
+.caloriesSection {
   display: flex;
   align-items: center;
   gap: 20px;
@@ -159,7 +158,7 @@ ul li {
   color: #000000e6;
 }
 
-.viewdetailsbutton {
+.viewDetailsButton {
   margin-top: 335px;
   padding: 10px 20px;
   background-color: var(--button-bg);
@@ -174,6 +173,6 @@ ul li {
   position: absolute;
 }
 
-.viewdetailsbutton:hover {
+.viewDetailsButton:hover {
   background-color: var(--button-bg-hover);
 }
\ No newline at end of file
diff --git a/src/styles/RecipeDetails.module.css b/src/styles/RecipeDetails.module.css
new file mode 100644
index 0000000..5000ab3
--- /dev/null
+++ b/src/styles/RecipeDetails.module.css
@@ -0,0 +1,151 @@
+@import './Variable.module.css';
+
+.details {
+    color: var(--font-color-light);
+    font-size: var(--font-size-medium);
+    line-height: 1.6;
+    font-family: var(--font-family);
+}
+
+.recipeContainer {
+    display: flex;
+    justify-content: center;
+    gap: 80px;
+    align-items: center;
+    padding: 0 20px;
+   
+}
+.detailImage{
+    height: 650px;
+    width: 550px;
+}
+
+.recipeDetailsImg {
+    height: 650px;
+    width: 90%;
+    border-radius: var(--border-radius);
+    object-fit: cover;
+    transition: transform var(--transition-speed) ease;
+    position: relative;
+    z-index: 1;
+    line-height: 1.7;
+}
+
+.recipeDetailsImg:hover {
+    transform: scale(1.05);
+    border-radius: var(--border-radius);;
+    
+}
+
+.info {
+    width: 55%;
+    padding-left: 20px;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.recipeDetails {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 40px 20px;
+    color: #fff;
+    text-align: left;
+    position: relative;
+}
+
+.titleDetails{
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 15px;
+    color: var(--highlight-color);
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.description{
+    font-size: 1.1rem;
+    color: #f0f0f0;
+    line-height: 1.8;
+    margin-top: 15px;
+}
+ .instructions {
+    font-size: 1rem;
+    color: #eaeaea;
+    line-height: 1.8;
+    margin-top: 15px;
+} 
+
+ul {
+    padding-left: 20px;
+}
+
+ul li {
+    color: #000000;
+    padding-left: 10px;
+}
+
+.details {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-top: 30px;
+    text-transform: uppercase;
+    color: #e6d057;
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.details:hover {
+    color: #f0f0f0;
+    cursor: pointer;
+}
+
+.backLink {
+  display: inline-block;
+  margin-top: 1rem;
+  color: #007bff;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.backLink:hover {
+  text-decoration: underline;
+}
+
+
+@media (max-width: 768px) {
+    .recipeContainer {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .detailImage {
+        width: 80%;
+    }
+
+    .info {
+        width: 72%;
+        padding: 0;
+    }
+}
+
+.info h2,
+.info h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+.recipeDetails .titleDetails,
+.recipeDetails .details {
+    font-family: var(--font-family);
+    letter-spacing: 0.5px;
+}
+
+.recipeDetails ul li {
+    color: #eeeeee;
+    margin-bottom: 8px;
+}
+
+.recipeData {
+    font-weight: bold;
+    font-size: 2rem;
+}
\ No newline at end of file
diff --git a/src/styles/Variable.module.css b/src/styles/Variable.module.css
index 32a0f85..d8f5d7f 100644
--- a/src/styles/Variable.module.css
+++ b/src/styles/Variable.module.css
@@ -11,6 +11,7 @@
     --box-shadow-light: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2);
     --box-shadow-medium: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3);
     --box-shadow-heavy: 0 0.5rem 0.75rem rgba(0, 0, 0, 0.2);
+    --font-family: 'Roboto', sans-serif;
 
     --bg-color-dark: #2e2e2e;
     --bg-color-light: #f0f0f0;


Reviews:
user: login: krushna-simform
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T12:21:07Z
user: login: krushna-simform
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T12:21:40Z
user: login: krushna-simform
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T12:26:43Z
user: login: krushna-simform
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T12:28:01Z
user: login: krushna-simform
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T12:28:18Z
user: login: krushna-simform
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T12:28:38Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T04:45:06Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T04:45:11Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T04:45:25Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T04:45:31Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T04:45:36Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T05:39:46Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T05:40:23Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T05:40:28Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T05:40:35Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T05:40:41Z
user: login: krushna-simform
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-16T08:48:28Z
user: login: dhruv-d-simform
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-16T09:20:36Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-16T09:25:15Z
user: login: Kaushal-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-19T04:42:14Z
user: login: Kaushal-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-19T04:43:23Z
user: login: Kaushal-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-19T04:44:00Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T04:44:10Z
user: login: Kaushal-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-19T04:47:37Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T04:53:11Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T05:58:41Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T05:59:20Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T06:00:20Z
user: login: Kaushal-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-19T06:48:15Z
user: login: Kaushal-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-19T06:49:55Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T08:39:54Z
user: login: Sakshi-Simform
state: COMMENTED
author_association: OWNER
submitted_at: 2025-05-19T08:40:39Z
user: login: Kaushal-SF
body: LGTM 👍
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-21T04:55:58Z

Review comments:
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
             <div className={styles.caloriessection}>
               <div className={styles.calories}>
-                <img 
-                className={styles.caloriesvg}
-                src={calorieslogo}
-                alt='calories'
+                <img
+                  className={styles.caloriesvg}
path: src/components/RecipeCard.tsx
user: login: krushna-simform
body: ```suggestion
                  className={styles.calorieSvg}
```
created_at: 2025-05-15T12:21:07Z
author_association: COLLABORATOR
diff_hunk: @@ -59,9 +61,15 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
             ))}
           </ul>
 
-          <button className={styles.viewdetailsbutton}>View Details</button>
-          </div>
+          <button
+            className={styles.viewdetailsbutton}
path: src/components/RecipeCard.tsx
user: login: krushna-simform
body: ```suggestion
            className={styles.viewDetailsButton}
```
created_at: 2025-05-15T12:21:40Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
path: src/components/RecipeDetails.tsx
user: login: krushna-simform
body: ```suggestion
      <div className={styles.recipeDetails}>
```
created_at: 2025-05-15T12:22:18Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
path: src/components/RecipeDetails.tsx
user: login: krushna-simform
body: ```suggestion
        <div className={styles.recipeContainer}>
```
created_at: 2025-05-15T12:22:37Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailimage}>
path: src/components/RecipeDetails.tsx
user: login: krushna-simform
body: ```suggestion
              <div className={styles.detailImage}>
```
created_at: 2025-05-15T12:22:55Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailimage}>
+                <img className={styles.recipedetailsimg} src={recipe.image} alt={recipe.title} />
path: src/components/RecipeDetails.tsx
user: login: krushna-simform
body: ```suggestion
                <img className={styles.recipeDetailsImg} src={recipe.image} alt={recipe.title} />
```
created_at: 2025-05-15T12:23:11Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailimage}>
+                <img className={styles.recipedetailsimg} src={recipe.image} alt={recipe.title} />
+              </div>
+              <div className={styles.info}>
+                <h2 className={styles.details}>{recipe.title}</h2>
path: src/components/RecipeDetails.tsx
user: login: krushna-simform
body: We don't need to provide styles to each tags, you can find out alternative approach, like selecting child elements using parent elements.
created_at: 2025-05-15T12:26:10Z
author_association: COLLABORATOR
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
path: src/components/RecipeCard.tsx
user: login: krushna-simform
body: ```suggestion
          <div className={styles.recipeInfoBox}>
```
created_at: 2025-05-15T12:28:01Z
author_association: COLLABORATOR
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
             <div className={styles.caloriessection}>
path: src/components/RecipeCard.tsx
user: login: krushna-simform
body: ```suggestion
            <div className={styles.caloriesSection}>
```
created_at: 2025-05-15T12:28:17Z
author_association: COLLABORATOR
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
             <div className={styles.caloriessection}>
               <div className={styles.calories}>
-                <img 
-                className={styles.caloriesvg}
-                src={calorieslogo}
-                alt='calories'
+                <img
+                  className={styles.caloriesvg}
+                  src={calorieslogo}
+                  alt='calories'
                 />
                 <p className={styles.caloriedisplay}>{recipe.calories} kcal</p>
path: src/components/RecipeCard.tsx
user: login: krushna-simform
body: ```suggestion
                <p className={styles.calorieDisplay}>{recipe.calories} kcal</p>
```
created_at: 2025-05-15T12:28:38Z
author_association: COLLABORATOR
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
             <div className={styles.caloriessection}>
               <div className={styles.calories}>
-                <img 
-                className={styles.caloriesvg}
-                src={calorieslogo}
-                alt='calories'
+                <img
+                  className={styles.caloriesvg}
path: src/components/RecipeCard.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/74d84b48380699d980e84e10b4d7337e0cbd13a5
created_at: 2025-05-16T04:45:06Z
author_association: OWNER
diff_hunk: @@ -59,9 +61,15 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
             ))}
           </ul>
 
-          <button className={styles.viewdetailsbutton}>View Details</button>
-          </div>
+          <button
+            className={styles.viewdetailsbutton}
path: src/components/RecipeCard.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/74d84b48380699d980e84e10b4d7337e0cbd13a5
created_at: 2025-05-16T04:45:11Z
author_association: OWNER
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
path: src/components/RecipeCard.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/74d84b48380699d980e84e10b4d7337e0cbd13a5
created_at: 2025-05-16T04:45:25Z
author_association: OWNER
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
             <div className={styles.caloriessection}>
path: src/components/RecipeCard.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/74d84b48380699d980e84e10b4d7337e0cbd13a5
created_at: 2025-05-16T04:45:30Z
author_association: OWNER
diff_hunk: @@ -34,10 +36,10 @@ export const RecipeCard: React.FC<RecipeCardProps> = ({ recipe }) => {
           <div className={styles.recipeinfobox}>
             <div className={styles.caloriessection}>
               <div className={styles.calories}>
-                <img 
-                className={styles.caloriesvg}
-                src={calorieslogo}
-                alt='calories'
+                <img
+                  className={styles.caloriesvg}
+                  src={calorieslogo}
+                  alt='calories'
                 />
                 <p className={styles.caloriedisplay}>{recipe.calories} kcal</p>
path: src/components/RecipeCard.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/74d84b48380699d980e84e10b4d7337e0cbd13a5
created_at: 2025-05-16T04:45:36Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailimage}>
+                <img className={styles.recipedetailsimg} src={recipe.image} alt={recipe.title} />
+              </div>
+              <div className={styles.info}>
+                <h2 className={styles.details}>{recipe.title}</h2>
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: add https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/8b053e9043a6242ae280406ecee70bc9f5c6d582
created_at: 2025-05-16T05:39:46Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailimage}>
+                <img className={styles.recipedetailsimg} src={recipe.image} alt={recipe.title} />
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: fixed  https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582
created_at: 2025-05-16T05:40:22Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
+          {recipe ? (
+            <>
+              <div className={styles.detailimage}>
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582
created_at: 2025-05-16T05:40:28Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
+        <div className={styles.recipecontainer}>
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582
created_at: 2025-05-16T05:40:35Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
+      {/* recipe-details */}
+      <div className={styles.recipedetails}>
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582
created_at: 2025-05-16T05:40:41Z
author_association: OWNER
diff_hunk: @@ -14,7 +14,7 @@ export const HomePage: React.FC = () => {
 
   return (
     <>
-      <Header onSearch={setSearchTerm} />
+      <Header onSearch={setSearchTerm} showSearch ={true}/>
path: src/pages/Home.tsx
user: login: dhruv-d-simform
body: Nit. can we remove the space here ?
```suggestion
      <Header onSearch={setSearchTerm} showSearch={true}/>
```
created_at: 2025-05-16T09:19:44Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ export const HomePage: React.FC = () => {
 
   return (
     <>
-      <Header onSearch={setSearchTerm} />
+      <Header onSearch={setSearchTerm} showSearch ={true}/>
path: src/pages/Home.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/edcbae0794aac5d53bc4d1bd22a792293df4e006
created_at: 2025-05-16T09:25:14Z
author_association: OWNER
diff_hunk: @@ -2,11 +2,12 @@ import React from 'react';
 import { SearchBar } from './SearchBar';
 import styles from '../styles/App.module.css'
 
-interface HeaderProp{
+interface HeaderProp {
   onSearch: (searchTerm: string) => void;
+  showSearch: boolean; 
 }
 
-export const Header: React.FC<HeaderProp> = ({ onSearch }) => {
+export const Header: React.FC<HeaderProp> = ({ onSearch, showSearch }) => {
path: src/components/Header.tsx
user: login: Kaushal-SF
body: Nit: Can provide a default value to the prop.

```suggestion
export const Header: React.FC<HeaderProp> = ({ onSearch, showSearch = false }) => {
```
created_at: 2025-05-19T04:42:14Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
path: src/components/RecipeDetails.tsx
user: login: Kaushal-SF
body: Any reason, why are we rendering the `Header` component again in the `RecipeDetails`?
created_at: 2025-05-19T04:43:23Z
author_association: COLLABORATOR
diff_hunk: @@ -14,7 +14,7 @@ export const HomePage: React.FC = () => {
 
   return (
     <>
-      <Header onSearch={setSearchTerm} />
+      <Header onSearch={setSearchTerm} showSearch={true}/>
path: src/pages/Home.tsx
user: login: Kaushal-SF
body: Nit: Can refactor it like this.

```suggestion
      <Header onSearch={setSearchTerm} showSearch/>
```
created_at: 2025-05-19T04:44:00Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: that is to display logo on view details page
created_at: 2025-05-19T04:44:09Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
path: src/components/RecipeDetails.tsx
user: login: Kaushal-SF
body: Let's say you have more details pages (different functionality) in your application. Do you render the Header component on each and every details page? Is it a good idea?
created_at: 2025-05-19T04:47:37Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: yes not a good idea will find another solution
created_at: 2025-05-19T04:53:11Z
author_association: OWNER
diff_hunk: @@ -14,7 +14,7 @@ export const HomePage: React.FC = () => {
 
   return (
     <>
-      <Header onSearch={setSearchTerm} />
+      <Header onSearch={setSearchTerm} showSearch={true}/>
path: src/pages/Home.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/45ac4aaaeaa26f1b91ad802eeb4227b6cf603c55
created_at: 2025-05-19T05:58:41Z
author_association: OWNER
diff_hunk: @@ -2,11 +2,12 @@ import React from 'react';
 import { SearchBar } from './SearchBar';
 import styles from '../styles/App.module.css'
 
-interface HeaderProp{
+interface HeaderProp {
   onSearch: (searchTerm: string) => void;
+  showSearch: boolean; 
 }
 
-export const Header: React.FC<HeaderProp> = ({ onSearch }) => {
+export const Header: React.FC<HeaderProp> = ({ onSearch, showSearch }) => {
path: src/components/Header.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/1ece3104a4c26ac63419445ab6c1a2546845fe90
created_at: 2025-05-19T05:59:20Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './Header';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css'
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <>
+      {/* Only display the logo, not the search bar */}
+      <Header onSearch={() => {}} showSearch={false} /> 
+
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/490d1a2bd24cfdb41a47c9a01502e05ad55f4245 https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/12b51baaa0356f194e7404339f6557d718a06751
created_at: 2025-05-19T06:00:20Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,57 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { MainLayout } from '../components/MainLayout';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css';
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <MainLayout showSearch={false}>
+      <div className={styles.recipeDetails}>
+        <div className={styles.recipeContainer}>
path: src/components/RecipeDetails.tsx
user: login: Kaushal-SF
body: @Sakshi-Simform This is the same as previous solution. Why do you think this will work?
created_at: 2025-05-19T06:48:15Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,21 @@
+import React from 'react';
+import { Header } from './Header';
+
+interface MainLayoutProps {
+  children: React.ReactNode;
+  showSearch?: boolean;
+  onSearch?: (term: string) => void;
+}
+
+export const MainLayout: React.FC<MainLayoutProps> = ({
+  children,
+  showSearch = false,
+  onSearch = () => {},
+}) => {
+  return (
+    <>
+      <Header showSearch={showSearch} onSearch={onSearch} />
+      <main>{children}</main>
+    </>
path: src/components/MainLayout.tsx
user: login: Kaushal-SF
body: 

Whenever you use the <MainLayout />, this Header will always render. We don't want that.

Header should be separated from the child component and should render at the root level.
created_at: 2025-05-19T06:49:55Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,21 @@
+import React from 'react';
+import { Header } from './Header';
+
+interface MainLayoutProps {
+  children: React.ReactNode;
+  showSearch?: boolean;
+  onSearch?: (term: string) => void;
+}
+
+export const MainLayout: React.FC<MainLayoutProps> = ({
+  children,
+  showSearch = false,
+  onSearch = () => {},
+}) => {
+  return (
+    <>
+      <Header showSearch={showSearch} onSearch={onSearch} />
+      <main>{children}</main>
+    </>
path: src/components/MainLayout.tsx
user: login: Sakshi-Simform
body: fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/8b71badb251c794accf80007840943453c8abe2d
created_at: 2025-05-19T08:39:54Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,57 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { MainLayout } from '../components/MainLayout';
+import { Recipe } from '../types/recipe.types';
+import styles from '../styles/RecipeDetails.module.css';
+
+export const RecipeDetails: React.FC = () => {
+  const { state } = useLocation();
+  const recipe: Recipe | undefined = state;
+
+  return (
+    <MainLayout showSearch={false}>
+      <div className={styles.recipeDetails}>
+        <div className={styles.recipeContainer}>
path: src/components/RecipeDetails.tsx
user: login: Sakshi-Simform
body: I thought that bt creating new component that wont render again but it was wrong solution 
fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/8b71badb251c794accf80007840943453c8abe2d
created_at: 2025-05-19T08:40:39Z
author_association: OWNER

PR comments:
user: login: netlify[bot]
created_at: 2025-05-15T05:59:50Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *cookpedia-app* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | e70dfe9e7e5f5dec493dfc984c41b5acf7e64e2e |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/projects/cookpedia-app/deploys/682c08e337b964000886764d |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-4--cookpedia-app.netlify.app](https://deploy-preview-4--cookpedia-app.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTQtLWNvb2twZWRpYS1hcHAubmV0bGlmeS5hcHAifQ.fiZ7AVrcpeKAeAz86CbNdcn8_kR0KLN5c_VVRy-XnaI)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [cookpedia-app Preview](https://deploy-preview-4--cookpedia-app.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify project configuration](https://app.netlify.com/projects/cookpedia-app/configuration/notifications#deploy-notifications)._
author_association: NONE
user: login: krushna-simform
created_at: 2025-05-15T12:04:35Z
body: We don't need to provide search bar on Details page.

![Screenshot from 2025-05-15 17-33-20](https://github.com/user-attachments/assets/8ead22b3-6ff0-4947-8bf9-512ae9ea7ad8)

author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-15T12:13:49Z
body: > We don't need to provide search bar on Details page.
> 
> ![Screenshot from 2025-05-15 17-33-20](https://private-user-images.githubusercontent.com/194056780/444103486-8ead22b3-6ff0-4947-8bf9-512ae9ea7ad8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDczMTA5NzcsIm5iZiI6MTc0NzMxMDY3NywicGF0aCI6Ii8xOTQwNTY3ODAvNDQ0MTAzNDg2LThlYWQyMmIzLTZmZjAtNDk0Ny04YmY5LTUxMmFlOWVhN2FkOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNTE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDUxNVQxMjA0MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hYTE1NDcxMTlmM2YwNmFjOTA3ZWQ5OWQyZDg0NTk4MzMwMzJlOTA2NWQ2ZjUxMzRlYjYxZTVkMjhhYzdjZmFkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.7RflCfT6HaY1zdXDgiXMhwnoYBnRTbRlKEQOUiXCXDk)

fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/410a38c462a1c8dc0f5662846e779f0e3b1bd139
author_association: OWNER
user: login: dhruv-d-simform
created_at: 2025-05-15T12:20:35Z
body: ![Screenshot from 2025-05-15 17-49-49](https://github.com/user-attachments/assets/1f843cca-33ab-424e-8104-d3545ad6e021)

When we hover over the image, top corners are not rounded.
author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-16T05:40:52Z
body: > ![Screenshot from 2025-05-15 17-49-49](https://private-user-images.githubusercontent.com/194202800/444108697-1f843cca-33ab-424e-8104-d3545ad6e021.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDczNzQxNzAsIm5iZiI6MTc0NzM3Mzg3MCwicGF0aCI6Ii8xOTQyMDI4MDAvNDQ0MTA4Njk3LTFmODQzY2NhLTMzYWItNDI0ZS04MTA0LWQzNTQ1YWQ2ZTAyMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDUxNlQwNTM3NTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNjIwMTI4MjE4Y2Q3NGJiOGU2N2I3MjhmMzhjYzFmZmNjMzg0MmFjMDM5MzRjMGNkMDc1YjVmMmU0NjUxMGU5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.iFLHdHw7wd5O4pCmATjUPiqSISV0IZds-cP9oNjyf8c)
> 
> When we hover over the image, top corners are not rounded.

fixed https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582
author_association: OWNER
user: login: dhruv-d-simform
created_at: 2025-05-16T07:28:00Z
body: > > ![Screenshot from 2025-05-15 17-49-49](https://private-user-images.githubusercontent.com/194202800/444108697-1f843cca-33ab-424e-8104-d3545ad6e021.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDczNzQxNzAsIm5iZiI6MTc0NzM3Mzg3MCwicGF0aCI6Ii8xOTQyMDI4MDAvNDQ0MTA4Njk3LTFmODQzY2NhLTMzYWItNDI0ZS04MTA0LWQzNTQ1YWQ2ZTAyMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDUxNlQwNTM3NTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNjIwMTI4MjE4Y2Q3NGJiOGU2N2I3MjhmMzhjYzFmZmNjMzg0MmFjMDM5MzRjMGNkMDc1YjVmMmU0NjUxMGU5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.iFLHdHw7wd5O4pCmATjUPiqSISV0IZds-cP9oNjyf8c)
> > When we hover over the image, top corners are not rounded.
> 
> fixed [8b053e9](https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582)

It seems that border radius is changing when hovering over the image. Can we fix that ?

author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-16T08:45:37Z
body: > > > ![Screenshot from 2025-05-15 17-49-49](https://private-user-images.githubusercontent.com/194202800/444108697-1f843cca-33ab-424e-8104-d3545ad6e021.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDczNzQxNzAsIm5iZiI6MTc0NzM3Mzg3MCwicGF0aCI6Ii8xOTQyMDI4MDAvNDQ0MTA4Njk3LTFmODQzY2NhLTMzYWItNDI0ZS04MTA0LWQzNTQ1YWQ2ZTAyMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDUxNlQwNTM3NTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNjIwMTI4MjE4Y2Q3NGJiOGU2N2I3MjhmMzhjYzFmZmNjMzg0MmFjMDM5MzRjMGNkMDc1YjVmMmU0NjUxMGU5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.iFLHdHw7wd5O4pCmATjUPiqSISV0IZds-cP9oNjyf8c)
> > > When we hover over the image, top corners are not rounded.
> > 
> > 
> > fixed [8b053e9](https://github.com/Sakshi-Simform/Recipe-App/commit/8b053e9043a6242ae280406ecee70bc9f5c6d582)
> 
> It seems that border radius is changing when hovering over the image. Can we fix that ?

fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/559029f8444c688b2e56de7933a677fcd8a626f9
author_association: OWNER
user: login: Kaushal-SF
created_at: 2025-05-19T04:03:55Z
body: @Sakshi-Simform Few observations for UI part:

1) Once we search the item and if it is not available, we are showing the message below. However, when we remove the search text we should show the all items back. Currently, it is not behaving in that manner.

<img width="591" alt="image" src="https://github.com/user-attachments/assets/21957c4d-dfa8-4d09-a39c-1e6e0fcc50a3" />

2) Can make the logo clickable with the home page link.

<img width="323" alt="image" src="https://github.com/user-attachments/assets/93194fdd-3bc3-416c-84e7-9bf465486b44" />

3) Currently when we hover on the card we should not showcase cursor pointer if we don't want to make entire card clickable. Just put that effect when we hover on the `view details` button.
<img width="346" alt="image" src="https://github.com/user-attachments/assets/f7ba0234-a611-4cf7-bae9-a55df0ed9556" />
author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-19T04:54:00Z
body: > @Sakshi-Simform Few observations for UI part:
> 
> 1. Once we search the item and if it is not available, we are showing the message below. However, when we remove the search text we should show the all items back. Currently, it is not behaving in that manner.
> 
> <img alt="image" width="591" src="https://private-user-images.githubusercontent.com/97082607/444965120-21957c4d-dfa8-4d09-a39c-1e6e0fcc50a3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2MzA2NTUsIm5iZiI6MTc0NzYzMDM1NSwicGF0aCI6Ii85NzA4MjYwNy80NDQ5NjUxMjAtMjE5NTdjNGQtZGZhOC00ZDA5LWEzOWMtMWU2ZTBmY2M1MGEzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA0NTIzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdlYmMxZTlhYTVjZmQxOTVkYmVjNjY0ZjUxNjc0MjA0NGEzMWVmZTU1ZTJiOTA5NGM0NGExNmRhMWY4MGRlYTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Wjcl_R80Je1FSnkhZlM0RjBk6mviCXKLaNl7pGFmu_M">
> 2. Can make the logo clickable with the home page link.
> 
> <img alt="image" width="323" src="https://private-user-images.githubusercontent.com/97082607/444965165-93194fdd-3bc3-416c-84e7-9bf465486b44.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2MzA2NTUsIm5iZiI6MTc0NzYzMDM1NSwicGF0aCI6Ii85NzA4MjYwNy80NDQ5NjUxNjUtOTMxOTRmZGQtM2JjMy00MTZjLTg0ZTctOWJmNDY1NDg2YjQ0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA0NTIzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjMDY5OWFmOTRkNjQ4ZDRmOWM5YzAyZmQ1ZTQ1MzZkNzE3MDI1Y2Y1MGUyODk1YTQ4NWEwYWEzZGYzZjI5ZTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.yB_2HT3vh7XxRHK9cR2cgktiMma-ukaIyk5gcvSsiUY">
> 3. Currently when we hover on the card we should not showcase cursor pointer if we don't want to make entire card clickable. Just put that effect when we hover on the `view details` button.
> 
> <img alt="image" width="346" src="https://private-user-images.githubusercontent.com/97082607/444965561-f7ba0234-a611-4cf7-bae9-a55df0ed9556.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2MzA2NTUsIm5iZiI6MTc0NzYzMDM1NSwicGF0aCI6Ii85NzA4MjYwNy80NDQ5NjU1NjEtZjdiYTAyMzQtYTYxMS00Y2Y3LWJhZTktYTU1ZGYwZWQ5NTU2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA0NTIzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0N2U4NmQxNDY4ZGU1ODY1NDVlMjc5ZGE3YTEwOGQwYWM4OTIyYTdkZTVkMWI1MjA1ZmIyZTBjN2RhYzI5MDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.1R4FtHYnZWv2xfd22AaKNnvSyPn-KfirKYXS822Hwvw">

remove cursor pointer https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/5547c68e6eab0100211265cc225d16a27799ca2f
author_association: OWNER
user: login: Sakshi-Simform
created_at: 2025-05-19T05:04:16Z
body: > > @Sakshi-Simform Few observations for UI part:
> > 
> > 1. Once we search the item and if it is not available, we are showing the message below. However, when we remove the search text we should show the all items back. Currently, it is not behaving in that manner.
> > 
> > <img alt="image" width="591" src="https://private-user-images.githubusercontent.com/97082607/444965120-21957c4d-dfa8-4d09-a39c-1e6e0fcc50a3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2MzA2NTUsIm5iZiI6MTc0NzYzMDM1NSwicGF0aCI6Ii85NzA4MjYwNy80NDQ5NjUxMjAtMjE5NTdjNGQtZGZhOC00ZDA5LWEzOWMtMWU2ZTBmY2M1MGEzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA0NTIzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdlYmMxZTlhYTVjZmQxOTVkYmVjNjY0ZjUxNjc0MjA0NGEzMWVmZTU1ZTJiOTA5NGM0NGExNmRhMWY4MGRlYTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Wjcl_R80Je1FSnkhZlM0RjBk6mviCXKLaNl7pGFmu_M">
fixed https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/e8acc71c7d92b435d808db469513448dfa2dfdbe


> > 2. Can make the logo clickable with the home page link.
> > <img alt="image" width="323" src="https://private-user-images.githubusercontent.com/97082607/444965165-93194fdd-3bc3-416c-84e7-9bf465486b44.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2MzA2NTUsIm5iZiI6MTc0NzYzMDM1NSwicGF0aCI6Ii85NzA4MjYwNy80NDQ5NjUxNjUtOTMxOTRmZGQtM2JjMy00MTZjLTg0ZTctOWJmNDY1NDg2YjQ0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA0NTIzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjMDY5OWFmOTRkNjQ4ZDRmOWM5YzAyZmQ1ZTQ1MzZkNzE3MDI1Y2Y1MGUyODk1YTQ4NWEwYWEzZGYzZjI5ZTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.yB_2HT3vh7XxRHK9cR2cgktiMma-ukaIyk5gcvSsiUY">

add link to logo https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/b125ca9052fbe2b2ef917bb84d8c4f97e5937127

> > 3. Currently when we hover on the card we should not showcase cursor pointer if we don't want to make entire card clickable. Just put that effect when we hover on the `view details` button.
> > <img alt="image" width="346" src="https://private-user-images.githubusercontent.com/97082607/444965561-f7ba0234-a611-4cf7-bae9-a55df0ed9556.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2MzA2NTUsIm5iZiI6MTc0NzYzMDM1NSwicGF0aCI6Ii85NzA4MjYwNy80NDQ5NjU1NjEtZjdiYTAyMzQtYTYxMS00Y2Y3LWJhZTktYTU1ZGYwZWQ5NTU2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA0NTIzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0N2U4NmQxNDY4ZGU1ODY1NDVlMjc5ZGE3YTEwOGQwYWM4OTIyYTdkZTVkMWI1MjA1ZmIyZTBjN2RhYzI5MDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.1R4FtHYnZWv2xfd22AaKNnvSyPn-KfirKYXS822Hwvw">
> 
> remove cursor pointer [5547c68](https://github.com/Sakshi-Simform/Recipe-App/commit/5547c68e6eab0100211265cc225d16a27799ca2f)


author_association: OWNER
user: login: Kaushal-SF
created_at: 2025-05-19T06:43:12Z
body: @Sakshi-Simform can add a button with a link to go back to home page when no data is available.

<img width="389" alt="image" src="https://github.com/user-attachments/assets/2917469c-0d9c-449d-98bf-5a6d07f7f090" />

author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-19T08:55:27Z
body: > @Sakshi-Simform can add a button with a link to go back to home page when no data is available.
> 
> <img alt="image" width="389" src="https://private-user-images.githubusercontent.com/97082607/445002615-2917469c-0d9c-449d-98bf-5a6d07f7f090.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDc2NDQzNzQsIm5iZiI6MTc0NzY0NDA3NCwicGF0aCI6Ii85NzA4MjYwNy80NDUwMDI2MTUtMjkxNzQ2OWMtMGQ5Yy00NDlkLTk4YmYtNWE2ZDA3ZjdmMDkwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTE5VDA4NDExNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFkMjNjYTkxZWM2YzkwMThlMDA1MWY5NDdjYzY1ODJlMGU1MGQzMjc1OTEyZDUxN2E4M2Y1NzI4YTVkNzhkNzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.5lE6EyUkENBydb6WlVo4DI3lrpzFwM9G1IezaY9-YbA">

@Kaushal-SF  this message is displayed on same page so If I will provide route link that wont work
author_association: OWNER
user: login: Kaushal-SF
created_at: 2025-05-19T09:49:06Z
body: > @Kaushal-SF this message is displayed on same page so If I will provide route link that wont work

@Sakshi-Simform Have you tried implementing this? Since we are fetching a data for wrong id, we can provide a link to home page. You can check Dhruv or Krushna's PR for the reference.
author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-19T10:05:31Z
body: > > @Kaushal-SF this message is displayed on same page so If I will provide route link that wont work
> 
> @Sakshi-Simform Have you tried implementing this? Since we are fetching a data for wrong id, we can provide a link to home page. You can check Dhruv or Krushna's PR for the reference.

yes I tried implementing that
author_association: OWNER
user: login: Sakshi-Simform
created_at: 2025-05-19T10:13:13Z
body: > > @Kaushal-SF this message is displayed on same page so If I will provide route link that wont work
> 
> @Sakshi-Simform Have you tried implementing this? Since we are fetching a data for wrong id, we can provide a link to home page. You can check Dhruv or Krushna's PR for the reference.

![Screenshot from 2025-05-19 15-40-04](https://github.com/user-attachments/assets/77fa3287-9143-475e-8c5a-1878ead57ad3)
![Screenshot from 2025-05-19 15-39-56](https://github.com/user-attachments/assets/adcad246-569b-4e9e-a5f4-9a087fd2cb7f)

I checked krushna and dhruv has created other component for page not found  and for my message display that is on same page as in above screenshots so If  I am trying to link it will not work
author_association: OWNER
user: login: Kaushal-SF
created_at: 2025-05-19T11:51:25Z
body: > 
> I checked krushna and dhruv has created other component for page not found and for my message display that is on same page as in above screenshots so If I am trying to link it will not work

@Sakshi-Simform It is not related to the search functionality. I think you misunderstood the message. In previous message I have mentioned that when we provide a wrong id where item doesn't exist, we should provide a link to go back to home page route. 

To deal with this you can choose different options. Krushna and Dhruv created a `No Page Found` component. If you want to do the same, you can try it out.

author_association: COLLABORATOR
user: login: Sakshi-Simform
created_at: 2025-05-20T04:46:15Z
body: > > I checked krushna and dhruv has created other component for page not found and for my message display that is on same page as in above screenshots so If I am trying to link it will not work
> 
> @Sakshi-Simform It is not related to the search functionality. I think you misunderstood the message. In previous message I have mentioned that when we provide a wrong id where item doesn't exist, we should provide a link to go back to home page route.
> 
> To deal with this you can choose different options. Krushna and Dhruv created a `No Page Found` component. If you want to do the same, you can try it out.

add https://github.com/Sakshi-Simform/Recipe-App/pull/4/commits/6069985418a77d074d54882caefb4b2052b160f4
author_association: OWNER