18 |
24 | );
25 | };
26 |
27 | export default MenuGrid;
28 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "just-food",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "prettier:check": "prettier --check .",
11 | "prettier:fix": "prettier --write ."
12 | },
13 | "dependencies": {
14 | "@trivago/prettier-plugin-sort-imports": "^5.2.2",
15 | "axios": "^1.7.9",
16 | "next": "14.2.20",
17 | "react": "^18",
18 | "react-dom": "^18",
19 | "react-error-boundary": "^6.0.0",
20 | "react-icons": "^5.4.0",
21 | "swiper": "^11.1.15"
22 | },
23 | "devDependencies": {
24 | "@types/node": "^20",
25 | "@types/react": "^18",
26 | "@types/react-dom": "^18",
27 | "@types/swiper": "^5.4.3",
28 | "eslint": "^8",
29 | "eslint-config-next": "14.2.20",
30 | "postcss": "^8",
31 | "tailwindcss": "^3.4.1",
32 | "typescript": "^5"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/hooks/useFetchMeals.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import api from "../utils/api";
3 |
4 | type Meal = {
5 | idMeal: string;
6 | strMeal: string;
7 | strMealThumb: string;
8 | };
9 |
10 | export const useFetchMeals = (category: string | undefined) => {
11 | const [meals, setMeals] = useState
19 | {categories.map((category) => (
20 |
23 |
15 |
26 |
27 | );
28 | };
29 |
30 | export default MealCard;
31 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/src/hooks/useFetchCategories.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import api from "@/utils/api";
3 |
4 | type Category = {
5 | idCategory: string;
6 | strCategory: string;
7 | strCategoryThumb: string;
8 | strCategoryDescription: string;
9 | };
10 |
11 | export const useFetchCategories = () => {
12 | const [categories, setCategories] = useState
16 |
24 | {strMeal}
25 |29 | {category.strCategory} 30 |
31 |32 | {category.strCategoryDescription.slice(0, 80)}... 33 |
34 | 35 | ); 36 | }; 37 | 38 | export default CategoryCard; 39 | -------------------------------------------------------------------------------- /src/components/MenuCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; // ایمپورت Image از next/image 3 | 4 | type Category = { 5 | idCategory: string; 6 | strCategory: string; 7 | strCategoryThumb: string; 8 | strCategoryDescription: string; 9 | }; 10 | 11 | type MenuCardProps = { 12 | category: Category; 13 | }; 14 | 15 | const MenuCard: React.FC
18 |
34 | );
35 | };
36 |
37 | export default MenuCard;
38 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import localFont from "next/font/local";
3 | import "./globals.css";
4 | import Footer from "@/components/Footer";
5 | import Navbar from "@/components/NavBar";
6 | import ScrollToTop from "@/components/ScrollToTop";
7 | import MobileNavBar from "@/components/MobileNavBar";
8 |
9 | const geistSans = localFont({
10 | src: "./fonts/GeistVF.woff",
11 | variable: "--font-geist-sans",
12 | weight: "100 900",
13 | });
14 | const geistMono = localFont({
15 | src: "./fonts/GeistMonoVF.woff",
16 | variable: "--font-geist-mono",
17 | weight: "100 900",
18 | });
19 |
20 | export const metadata: Metadata = {
21 | title: "Just Food",
22 | description: "Just Food",
23 | };
24 |
25 | export default function RootLayout({
26 | children,
27 | }: Readonly<{
28 | children: React.ReactNode;
29 | }>) {
30 | return (
31 |
32 |
35 |
19 |
27 | 28 | {category.strCategory} 29 |
30 |31 | {category.strCategoryDescription.slice(0, 80)}... 32 |
33 |
33 | {isVisible && (
34 |
41 | )}
42 |
43 | );
44 | };
45 |
46 | export default ScrollToTop;
47 |
--------------------------------------------------------------------------------
/src/components/MobileNavBar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { FaPhone, FaInstagram, FaLinkedin } from "react-icons/fa";
5 | import { SiTelegram } from "react-icons/si";
6 |
7 | const MobileNavBar: React.FC = () => {
8 | return (
9 |
44 | );
45 | };
46 |
47 | export default MobileNavBar;
48 |
--------------------------------------------------------------------------------
/src/components/BackButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter } from "next/navigation";
4 | import { memo, useEffect, useState, useCallback } from "react";
5 |
6 | interface BackButtonProps {
7 | threshold?: number; // چند پیکسل اسکرول بشه تا دکمه دیده بشه
8 | }
9 |
10 | const BackButtonComponent: React.FC
20 |
22 | );
23 | };
24 |
25 | const MealList: React.FC<{ title: string; meals: Meal[] }> = ({
26 | title,
27 | meals,
28 | }) => (
29 |
30 |
50 | );
51 |
52 | export default Sidebar;
53 |
--------------------------------------------------------------------------------
/src/components/Filter.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | type FilterProps = {
6 | categories: string[];
7 | filteredCategories: string[];
8 | handleFilterChange: (category: string) => void;
9 | showAll: boolean;
10 | toggleShowAll: () => void;
11 | };
12 |
13 | const Filter: React.FC{title}
31 |
32 | {meals.map((meal) => (
33 |
38 |
49 | {meal.strMeal}
46 | 47 | ))} 48 |
24 |
54 | );
55 | };
56 |
57 | export default Filter;
58 |
--------------------------------------------------------------------------------
/src/components/Pagination.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | interface PaginationProps {
6 | currentPage: number;
7 | totalPages: number;
8 | onPageChange: (page: number) => void;
9 | }
10 |
11 | const Pagination: React.FC25 | Category 26 |
27 | {displayedCategories.map((category) => ( 28 |
32 | handleFilterChange(category)}
37 | className="form-checkbox w-5 h-5 text-blue-600 border-gray-300 rounded"
38 | />
39 |
42 |
43 | ))}
44 |
45 | {categories.length > 3 && (
46 |
52 | )}
53 |
18 |
29 |
30 |
58 | );
59 | };
60 |
61 | export default Pagination;
62 |
--------------------------------------------------------------------------------
/src/app/menu/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 | import { useFetchCategories } from "../../hooks/useFetchCategories";
5 | import Filter from "@/components/Filter";
6 | import CategoryCard from "@/components/CategoryCard";
7 | import BackButton from "@/components/BackButton";
8 |
9 | const MenuPage: React.FC = () => {
10 | const { categories, loading, error } = useFetchCategories();
11 | const [filteredCategories, setFilteredCategories] = useState
31 | {Array.from({ length: totalPages }, (_, index) => (
32 |
43 | ))}
44 |
45 |
46 |
57 | Loading categories...
; 31 | if (error) return{error}
; 32 | 33 | return ( 34 |
35 | cat.strCategory)}
42 | filteredCategories={filteredCategories}
43 | handleFilterChange={handleFilterChange}
44 | showAll={showAll}
45 | toggleShowAll={toggleShowAll}
46 | />
47 |
49 | );
50 | };
51 |
52 | export default MenuPage;
53 |
--------------------------------------------------------------------------------
/src/components/ImageSlider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import Image from "next/image"; // ایمپورت Image از next/image
5 | import api from "@/utils/api";
6 |
7 | const ImageSlider = () => {
8 | const [images, setImages] = useState
36 | {filteredData.map((category) => (
37 |
40 | Loading...
; 36 | } 37 | 38 | return ( 39 |
40 | {images.map((image, index) => (
41 |
57 | );
58 | };
59 |
60 | export default ImageSlider;
61 |
--------------------------------------------------------------------------------
/src/components/CategoriesCarousel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import Link from "next/link";
5 | import Image from "next/image";
6 | import api from "@/utils/api";
7 |
8 | // تعریف تایپ برای دادهها
9 | interface Category {
10 | strCategory: string;
11 | strCategoryThumb: string;
12 | }
13 |
14 | const CategoriesCarousel = () => {
15 | const [categories, setCategories] = useState
47 |
55 | ))}
56 | Loading...
; 32 | } 33 | 34 | return ( 35 |
36 |
60 | );
61 | };
62 |
63 | export default CategoriesCarousel;
64 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # 🚀 Contributing to Our Project
2 |
3 | We are thrilled that you are interested in contributing to our project. Your support and involvement are what make our community strong and our project better. Whether you're fixing a bug, adding a feature, or simply improving documentation, every contribution is valuable. 💪
4 |
5 | ## 📝 How to Contribute
6 |
7 | ### 1. Fork the Repository
8 |
9 | Click the _Fork_ button at the top right of this page to create a copy of the repository under your GitHub account.
10 |
11 | ### 2. Clone Your Fork
12 |
13 | bash
14 | git clone https://github.com/frau-azadeh/Just-Food.git
15 | cd REPOSITORY_NAME
16 |
17 | ### 3. Create a Branch
18 |
19 | Create a new branch for your changes:
20 |
21 | git checkout -b your-feature-name
22 |
23 | ### 4. Make Your Changes
24 |
25 | Edit the code, fix bugs, or improve the documentation. Remember to write clean and well-documented code.
26 |
27 | ### 5. Commit Your Changes
28 |
29 | git add .
30 | git commit -m "Brief description of your changes"
31 |
32 | ### 6. Push to Your Fork
33 |
34 | git push origin your-feature-name
35 |
36 | ### 7. Create a Pull Request
37 |
38 | Go to the original repository, click on _Pull Requests, and select \*\*New Pull Request_. Choose your branch and submit the PR for review.
39 |
40 | ## ✅ Contribution Guidelines
41 |
42 | - Ensure your code follows the existing style and conventions.
43 | - Write clear, concise commit messages.
44 | - Provide a detailed description of your changes in the pull request.
45 | - Test your changes before submitting.
46 |
47 | ## 🌟 Additional Ways to Contribute
48 |
49 | - Report issues 🐛
50 | - Suggest new features ✨
51 | - Improve documentation 📖
52 | - Share the project with others 💬
53 |
54 | ## 🤝 Code of Conduct
55 |
56 | Please note that we follow a [Code of Conduct](CODE_OF_CONDUCT.md) to ensure a welcoming and inclusive environment.
57 |
58 | ## 💬 Need Help?
59 |
60 | If you need any help or have questions, feel free to open an issue or reach out to us. We’re happy to help! 🚀
61 |
62 | Thank you for helping us make this project better! ❤️
63 |
--------------------------------------------------------------------------------
/src/app/menu/[category]/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState } from "react";
4 | import { useParams } from "next/navigation";
5 | import { useFetchMeals } from "../../../hooks/useFetchMeals";
6 | import Link from "next/link";
7 | import BackButton from "@/components/BackButton";
8 | import CategoriesCarousel from "@/components/CategoriesCarousel";
9 | import Pagination from "@/components/Pagination";
10 |
11 | const MealsPage: React.FC = () => {
12 | const { category } = useParams();
13 | const categoryString = Array.isArray(category) ? category[0] : category;
14 |
15 | const { meals, loading, error } = useFetchMeals(categoryString);
16 |
17 | const [currentPage, setCurrentPage] = useState(1);
18 | const itemsPerPage = 9;
19 |
20 | if (loading) return
37 |
59 |
38 | {categories.concat(categories).map((category, index) => (
39 |
58 |
43 |
44 |
56 | ))}
57 | 52 | {category.strCategory} 53 |
54 | 55 |Loading meals...
; 21 | if (error) return{error}
; 22 | 23 | const indexOfLastItem = currentPage * itemsPerPage; 24 | const indexOfFirstItem = indexOfLastItem - itemsPerPage; 25 | const currentMeals = meals.slice(indexOfFirstItem, indexOfLastItem); 26 | 27 | const totalPages = Math.ceil(meals.length / itemsPerPage); 28 | 29 | return ( 30 | <> 31 |
33 | setCurrentPage(page)}
57 | />
58 |
59 |
61 |
62 | );
63 | };
64 |
65 | export default MealsPage;
66 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🍔 Just Food
2 |
3 | A beautifully designed Food Menu Application built with Next.js, TypeScript, and TailwindCSS, where users can explore various food categories, view meal details, and filter their choices seamlessly.
4 |
5 | ## 📸 Screenshots
6 |
7 | ### 💻 Desktop View
8 |
9 | A clean and modern design for desktop users:
10 |
11 | 
12 |
13 | 
14 |
15 | ---
16 |
17 | ### 📊 Tablet View
18 |
19 | Perfectly scales for tablets and mid-sized devices:
20 |
21 | 
22 |
23 | ---
24 |
25 | ### 📱 Mobile View
26 |
27 | Fully responsive and optimized for mobile devices:
28 |
29 | 
30 |
31 | ## 🚀 Live Demo
32 |
33 | Check out the live application here: [Just Food](https://just-food5.vercel.app/)
34 |
35 | ## ✨ Features
36 |
37 | 🗂️ Dynamic Categories: Browse food categories fetched dynamically from an API.
38 |
39 | 🥗 Filter Options: Interactive filter to refine the displayed categories.
40 |
41 | 📜 Meal Details: Detailed view of each meal, including ingredients and instructions.
42 |
43 | 🌐 Responsive Design: Fully responsive UI for mobile, tablet, and desktop devices.
44 |
45 | 🎨 Styled with TailwindCSS: Clean and modern UI powered by TailwindCSS.
46 |
47 | ⚡ Optimized Performance: Built using Next.js 14 and App Router.
48 |
49 | ## 🛠️ Technologies Used
50 |
51 | Framework: Next.js 14
52 |
53 | Styling: TailwindCSS
54 |
55 | TypeScript: For strong typing and better developer experience.
56 |
57 | Axios: For fetching data from the TheMealDB API.
58 |
59 |
60 | # 🔧 Installation and Setup
61 |
62 | Follow these steps to set up the project locally:
63 |
64 | 1.Clone the repository:
65 | git clone https://github.com/your-username/just-food.git
66 | cd just-food
67 |
68 | 2.Install dependencies:
69 | npm install
70 |
71 | 3.Run the development server:
72 | npm run dev
73 |
74 | 4.Open the app in your browser:
75 | http://localhost:3000
76 |
77 |
78 | # 🗺️ API Integration
79 |
80 |
81 | This project uses the TheMealDB API to fetch:
82 | Categories: /categories.php
83 | Meals by Category: /filter.php?c={category}
84 | Meal Details: /lookup.php?i={mealId}
85 |
86 | # 🤝 Contributing
87 |
88 | 🌻 Azadeh Sharifi Soltani
89 |
90 | Feel free to contribute to this project by submitting a pull request or opening an issue!
91 | Made with 💻, ☕, and 🌻 by Azadeh Sharifi Soltani
92 |
--------------------------------------------------------------------------------
/src/components/MealNavigation.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useEffect } from "react";
4 | import { useParams, useRouter } from "next/navigation";
5 | import api from "@/utils/api";
6 |
7 | interface Meal {
8 | idMeal: string;
9 | strMeal: string;
10 | }
11 |
12 | const MealNavigation: React.FC = () => {
13 | const { idMeal } = useParams();
14 | const router = useRouter();
15 | const [meals, setMeals] = useState34 | Meals in {categoryString} 35 |
36 |
37 | {currentMeals.map((meal) => (
38 |
39 |
52 |
53 |
40 | 
45 |
49 |
50 | ))}
51 | 46 | {meal.strMeal} 47 |
48 |Loading navigation...
; 51 | } 52 | 53 | return ( 54 |
55 |
64 |
65 | {currentIndex + 1} of {meals.length}
66 |
67 |
78 |
79 | );
80 | };
81 |
82 | export default MealNavigation;
83 |
--------------------------------------------------------------------------------
/src/components/RandomMeals.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import Link from "next/link";
5 | import Image from "next/image"; // ایمپورت Image از next/image
6 | import axios from "axios";
7 |
8 | interface Meal {
9 | idMeal: string;
10 | strMeal: string;
11 | strMealThumb: string;
12 | strInstructions: string;
13 | }
14 |
15 | const RandomMeals: React.FC = () => {
16 | const [meals, setMeals] = useState
47 |
49 | );
50 | }
51 |
52 | if (!meals || meals.length === 0) {
53 | return (
54 | Loading...
48 |
55 |
57 | );
58 | }
59 |
60 | return (
61 | No meals found.
56 |
62 |
97 | );
98 | };
99 | export default RandomMeals;
100 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from "react-icons/fa";
5 |
6 | const Footer: React.FC = () => {
7 | return (
8 |
108 | );
109 | };
110 |
111 | export default Footer;
112 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | designweb.azadeh@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/src/components/NavBar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useEffect } from "react";
4 | import { FaBars, FaTimes, FaSearch } from "react-icons/fa";
5 | import { IoMdRestaurant } from "react-icons/io";
6 | import Link from "next/link";
7 | import api from "@/utils/api";
8 |
9 | const Navbar: React.FC = () => {
10 | const [isOpen, setIsOpen] = useState(false);
11 | const [searchQuery, setSearchQuery] = useState("");
12 | const [categories, setCategories] = useState
63 | {meals.map((meal, index) => (
64 |
96 |
70 |
94 | ))}
95 |
71 |
79 |
80 |
93 | 81 | {meal.strMeal} 82 |
83 |84 | {meal.strInstructions.slice(0, 300)}... 85 |
86 | 90 | Learn More → 91 | 92 |Loading meal details...
; 79 | if (error) return{error}
; 80 | if (!meal) returnNo meal found
; 81 | 82 | const ingredients = Object.keys(meal) 83 | .filter((key) => key.startsWith("strIngredient") && meal[key]) 84 | .map((key) => meal[key]); 85 | 86 | const instructions = meal.strInstructions?.split(". ") || []; 87 | 88 | return ( 89 |
90 |
194 | );
195 | };
196 |
197 | export default MealDetailsPage;
198 |
--------------------------------------------------------------------------------
91 |
97 |
98 | 99 | {meal.strMeal} 100 |
101 |
102 |
191 |
103 |
141 |
142 |
104 |
117 |
105 |
110 | 106 | Category 107 |
108 |{meal.strCategory}
109 |
111 |
116 | 112 | Cuisine 113 |
114 |{meal.strArea}
115 |118 | Ingredients 119 |
120 |
121 | {ingredients.map((ingredient, index) => (
122 |
130 |
126 | {ingredient}
127 |
128 | ))}
129 | 131 | Instructions 132 |
133 |-
134 | {instructions.map((step, index) => (
135 |
- 136 | {step}. 137 | 138 | ))} 139 |
143 |
190 |
144 |
166 | 145 | Latest in {meal.strCategory} 146 |
147 |
148 | {sameCategoryMeals.map((sameMeal) => (
149 |
154 | 
159 |
165 | 160 | {sameMeal.strMeal} 161 |
162 | 163 | ))} 164 |
167 |
189 | 168 | Explore Other Categories 169 |
170 |
171 | {randomMeals.map((randomMeal) => (
172 |
177 | 
182 |
188 | 183 | {randomMeal.strMeal} 184 |
185 | 186 | ))} 187 |