feat: No recipes found message (search recipes)

src/components/NoItemsFound/index.tsx

@@ -13,15 +13,13 @@ const NoItemsFound: React.FC<NoItemsFoundProps> = ({ warning, message }) => {
 					fill="#878d98"
 					viewBox="0 0 24 24"
 					xmlns="http://www.w3.org/2000/svg"
-					className="w-14 text-primary-text-color dark:text-primary-text-color"
+					className="w-14 text-primary-text-color"
 				>
 					<path d="M4 2v18H3v2h4v-2H6v-5h13a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6V2H4zm4 3v2h2V5h2v2h2V5h2v2h2v2h-2v2h2v2h-2v-2h-2v2h-2v-2h-2v2H8v-2H6V9h2V7H6V5h2z"></path>
 					<path d="M8 9h2v2H8zm4 0h2v2h-2zm-2-2h2v2h-2zm4 0h2v2h-2z"></path>
 				</svg>
-				<p className="text-primary-text-color dark:text-primary-text-color">{warning}</p>
-				<p className="text-primary-text-color dark:text-primary-text-color">
-					{message ?? ''}
-				</p>
+				<p className="text-primary-text-color">{warning}</p>
+				<p className="text-primary-text-color">{message ?? ''}</p>
 			</div>
 		</Reveal>
 	);

src/views/Recipes/components/Search/index.tsx

@@ -5,6 +5,7 @@ import requests from '../../../../api/requests';
 import SearchIcon from '../../../../assets/icons/search.svg';
 import Input from '../../../../components/Input';
 import Loading from '../../../../components/Loading';
+import NoItemsFound from '../../../../components/NoItemsFound';
 import Reveal from '../../../../components/Reveal';
 import { IRecipe } from '../../../../types/types';
 import LoadingRecipes from './components/LoadingRecipes';
@@ -120,6 +121,13 @@ const Search: React.FC = () => {
 					))}
 				</div>
 			)}
+
+			{!loading && !recipes && searchInput.trim().length > 3 && (
+				<NoItemsFound
+					warning="No recipes found for the given keyword."
+					message="Try searching for something else."
+				/>
+			)}
 		</div>
 	);
 };