Added Info page + site icon

xvpc · Sep 16, 2023 · 31f35de · 31f35de
1 parent bb535b4
commit 31f35de
Show file tree

Hide file tree

Showing 27 changed files with 379 additions and 36 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,23 +7,32 @@ import Link from 'next/link'
 import ImageHolder from '@/lib/ImageHolder'
 
 // Mui
-import { Button } from '@mui/material'
+import { Button, IconButton } from '@mui/material'
+
+// Icons
+import { BsSearch } from "react-icons/bs";
+
+// Assets
+import { iconImage } from '@/utils/assets';
 
 export default function Header() {
 
     return (
-        <header className='container-fluid px-0 bg-black'>
-            <nav className='container py-2 d-flex flex-row flex-wrap justify-content-between align-items-center gap-4'>
-                <div style={{maxWidth: 40, maxHeight: 40}} className='rounded overflow-hidden'>
-                    <ImageHolder img="/images/placeholder2.png" title="Icon" />
+        <header className='container-fluid px-0 bg-dark'>
+            <nav className='container px-0 py-2 d-flex flex-row flex-wrap justify-content-center justify-content-sm-between align-items-center gap-5'>
+                <div style={{maxWidth: 50, maxHeight: 50}} className='rounded overflow-hidden'>
+                    <ImageHolder img={iconImage} title="Icon" />
                 </div>
                 <div className='d-flex flex-row justify-content-center algin-items-center gap-2'>
                     <Link href="/">
-                        <Button className='py-1 px-2' variant="text" color="info">Home</Button>
+                        <Button className='fw-bold' variant="text" color="info">Home</Button>
                     </Link>
                     <Link href="/random">
-                    <Button className='py-1 px-2' variant="text" color="secondary">Random</Button>
+                        <Button className='fw-bold' variant="text" color="secondary">Random</Button>
                     </Link>
+                    {<IconButton href="/#search" title='Go to Search'>
+                        <BsSearch color='white' size={20} />
+                    </IconButton>}
                 </div>
             </nav>
         </header>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -10,6 +10,8 @@ import styles from '@/styles/Home.module.css'
 // Components
 import Header from '@/components/Header'
 
+// Parallax
+import { ParallaxProvider } from 'react-scroll-parallax'
 
 // 
 const inter = Roboto({weight: "400", subsets: ['latin'], style: "normal"})
@@ -19,21 +21,30 @@ type LayoutProps = {
     title?: string
 }
 
-export default function Layout({children, title} : LayoutProps) {
+export default function Layout({ children, title } : LayoutProps) {
 
     return (
         <div className=''>
             <Head>
                 <title>{title || "Quick Recipes"}</title>
-                <meta name="description" content={`Quick Recipes ${title || ""}`} />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <link rel="icon" href="/favicon.ico" />
+                    <meta name="title" content={title || "Quick Recipes"} />
+                    <meta name="description" content={`Quick Recipes ${title || ""}`} />
+                    <meta name="keywords" content='food, recipe, recipes, quick recipe, quick recipes, arabic, arabic recipes, english, english recipes, american, american recipes, indian, indian recipes, canadian recipes, british, british recipes, pudding, cook, chef, youtube, video, meal, meat, suger, milk, insturctions, ingredients, turkey, chicken, oil, onion, garlic, tomato, share, cool, cool recipes, cool meals, learn, eggs, view, copy, how to make, butter, flour, pancakes, cake, banana, random, search, site, website, api, image, images, help, viper, dev, programmer, programming, developer, website, portfolio, fiverr, discord, github, project, anime, whatsapp, react, freelancer, front end, back end, full stack, software engineer, custom website, animation, html, css, javascript, nextjs, bootstrap, company, IT' />
+                    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+                    {/* ICONS */}
+                    <link rel="shortcut icon" type="image/x-icon" href='./favicon/favicon.ico' />
+                    <link rel="apple-touch-icon" sizes="180x180" href='./favicon/apple-touch-icon.png' />
+                    <link rel="icon" type="image/png" sizes="32x32" href='./favicon/favicon-32x32.png'/>
+                    <link rel="icon" type="image/png" sizes="16x16" href='./favicon/favicon-16x16.png'/>
             </Head>
             <div className='intercom-bg text-black d-flex flex-column justify-content-botween algin-items-center gap-5 min-vh-100 overflow-hidden'>
                 <Header />
 
                 <main className={`${inter.className} container-fluid px-1 mb-auto`}>
-                    {children}
+                    <ParallaxProvider>
+                        {children}
+                    </ParallaxProvider>
                 </main>
 
                 <footer className='bg-black container-fluid '>

diff --git a/components/SearchContainer.tsx b/components/SearchContainer.tsx
@@ -8,7 +8,7 @@ import ImageHolder from '@/lib/ImageHolder'
 import TextWrap from '@/lib/TextWraper'
 
 // Mui
-import { Button } from '@mui/material'
+import { Button, Tooltip } from '@mui/material'
 
 // Framer motion
 import { motion } from 'framer-motion'
@@ -41,7 +41,11 @@ export default function SearchContainer({ id, name, image, ingredients }:SearchC
                     }
                 </div>
                 <div className='d-flex flex-column justify-content-center algin-items-center gap-2'>
-                    <h3 className='fw-bold text-dark text-capitalize text-wrap text-center' title={name || ""}>{TextWrap(name as string) || "unknown"}</h3>
+                    <Tooltip title={name || ""} arrow>
+                        <h3 className='fw-bold text-dark text-capitalize text-wrap text-center'>
+                            {TextWrap(name as string) || "unknown"}
+                        </h3>
+                    </Tooltip>
                     {
                         ingredients && ingredients.length > 0 &&
                         <ul className='p-0 m-0 ps-2 d-flex flex-column justify-content-start algin-items-center text-start bg-white bg-opacity-50 text-dark'>

diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx
@@ -4,11 +4,12 @@ import React from 'react'
 import Introduction from '../sections/Introduction'
 import Search from '../sections/Search'
 
+
 export default function Home() {
 
     return (
         <div className='d-flex flex-column justify-content-between text-center algin-items-center gap-5'>
-            <Introduction />
+            <Introduction home />
             <Search />
         </div>
     )

diff --git a/components/pages/Info.tsx b/components/pages/Info.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+
+// Components
+import Introduction from '../sections/Introduction'
+import Ingredients from '../sections/Ingredients';
+import Instructions from '../sections/Instructions';
+import Video from '../sections/Video';
+
+type InfoProps = {
+    data: Record<string, any>
+}
+
+export default function Info({ data }: InfoProps) {
+    const name: string = data?.strMeal || "";
+    const country: string = data?.strArea || "";
+    const image: string = data?.strMealThumb || "";
+    const ingredients: string[] = [data?.strIngredient1, data?.strIngredient2, data?.strIngredient3, data?.strIngredient4, data?.strIngredient5, data?.strIngredient6, data?.strIngredient7, data?.strIngredient8, data?.strIngredient9, data?.strIngredient10, data?.strIngredient11, data?.strIngredient12, data?.strIngredient13, data?.strIngredient14, data?.strIngredient15, data?.strIngredient16, data?.strIngredient17, data?.strIngredient18, data?.strIngredient19, data?.strIngredient20];
+    const instructions: string = data?.strInstructions || "";
+    const video: string = data?.strYoutube || "";
+
+
+    return (
+        <div className='d-flex flex-column justify-content-between text-center algin-items-center gap-5 overflow-hidden'>
+            <Introduction 
+            title={name} 
+            country={country} 
+            image={image} 
+            />
+
+            <Ingredients
+                ingredients={ingredients}
+            />
+
+            <Instructions
+                instructions={instructions}
+            />
+
+            <Video 
+                video={video}
+            />
+        </div>
+    )
+}
diff --git a/components/sections/Ingredients.tsx b/components/sections/Ingredients.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+// Framer motion
+import { motion } from 'framer-motion'
+
+
+type IngredientsProps = {
+    ingredients: string[]
+}
+
+export default function Ingredients({ingredients}: IngredientsProps) {
+
+    return (
+        <motion.section 
+        className='my-5 d-flex flex-column justify-content-center algin-items-center gap-3 text-center'
+        initial={{opacity: 0}}
+        whileInView={{opacity: 1}}
+        viewport={{once: true}}
+        transition={{duration: 0.8, delay: 0.7}}
+        >
+            <h2 className='fw-bold text-dark-emphasis'>Ingredients</h2>
+            {ingredients?.length ?
+            <ul className='container bg-white bg-opacity-50 rounded-1 overflow-hidden row row-cols-1 row-cols-sm-2 justify-content-start algin-items-center m-auto g-2 text-start p-2'>
+                {
+                    ingredients.map((item: string, index: number) => {
+                        if(item){
+                            return(
+                                <li key={item || index} className='text-black'><span className='text-secondary'>{index+1}. </span>{item || ""}</li>
+                            )
+                        }
+                    })
+                }
+            </ul> :
+            <span className='fw-bold text-secondary fs-5'>No Ingredients..</span>
+            }
+        </motion.section>
+    )
+}
diff --git a/components/sections/Instructions.tsx b/components/sections/Instructions.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+// Framer motion
+import { motion } from 'framer-motion'
+
+
+type InstructionsProps = {
+    instructions: string
+}
+
+export default function Instructions({ instructions }: InstructionsProps) {
+
+    return (
+        <section 
+        className='mt-5 d-flex flex-column justify-content-center algin-items-center gap-3 text-center overflow-hidden'
+        >
+            {
+                instructions ?
+                <>
+                    <h2 className='fw-bolder text-dark-emphasis'>How to make it?</h2>
+                    <motion.p 
+                    className='container p-3 text-wrap text-start text-sm-center fw-medium text-white bg-black bg-opacity-75 rounded-1 overflow-hidden'
+                    initial={{y: "100px", opacity: 0}}
+                    whileInView={{y: 0, opacity: 1}}
+                    viewport={{once: true}}
+                    transition={{duration: 1, delay: 0.7}}
+                    >
+                        {instructions}
+                    </motion.p>
+                </> :
+                <div>..</div>
+            }
+
+        </section>
+    )
+}
diff --git a/components/sections/Introduction.tsx b/components/sections/Introduction.tsx
@@ -9,18 +9,46 @@ import { useMediaQuery } from '@mui/material';
 // Framer motion
 import { motion } from 'framer-motion'
 
-export default function Introduction() {
+// Assets
+import { iconImage } from '@/utils/assets';
+import { useParallax } from 'react-scroll-parallax';
+
+type IntroductionProps = {
+    title?: string, 
+    country?: string,
+    image?: string,
+    home?: boolean
+}
+
+export default function Introduction({ title, country, image, home }: IntroductionProps) {
     const matchSm = useMediaQuery('(min-width:576px)');
 
+    const parallax = useParallax({
+        speed: 10,
+        // translateX: ['0px', '0px'],
+        scale: [1, 0.9],
+    });
+
     return (
-        <section id="introduction" className='mb-5 container py-5 d-flex flex-row flex-wrap justify-content-center algin-items-center gap-4 overflow-hidden'>
+        <section 
+        id="introduction" 
+        className='mb-5 container mx-auto py-5 d-flex flex-row flex-wrap justify-content-center algin-items-center gap-4 overflow-hidden'
+        ref={parallax.ref}
+        >
             <motion.div 
             className={`order-1 rounded overflow-hidden shadow ${matchSm ? "w-25" : ""} m-auto`}
             initial={{y: "100vh", opacity: 0}}
             animate={{y: 0, opacity: 1}}
             transition={{duration: 0.6}}
             >
-                <ImageHolder img='/images/recipe1.jpg' title='recipe1.jpg' />
+                {
+                    home ?
+                    <ImageHolder img={iconImage} title={'recipe1.jpg'} /> :
+                    image ?
+                    <ImageHolder img={image} title={title || 'Recipe image'} network /> :
+                    <ImageHolder img={'/images/placeholder2.png'} title={title || 'image placeholder'} />
+
+                }
             </motion.div>
             <div className={`d-flex flex-column justify-content-center text-center text-sm-start algin-items-center gap-3 overflow-hidden px-2 px-sm-0 ${matchSm ? "w-50" : ""}`}>
                 <motion.h1 
@@ -29,16 +57,16 @@ export default function Introduction() {
                 animate={{y: 0, opacity: 1}}
                 transition={{duration: 0.8, delay: 0.7}}
                 >
-                    Quick Recipes
+                    {title || "Quick Recipes"}
                 </motion.h1>
                 <motion.p 
                 className='ps-0 ps-sm-2 fw-normal text-secondary text-truncate text-wrap fs-5 w-100'
                 initial={{opacity: 0}}
                 animate={{opacity: 1}}
                 transition={{duration: 1.8, delay: 1.5}}
                 >
-                    Search for Recipes and Learn A lot of Cool Meals,
-                    and Share them with others.
+                    {country || `Search for Recipes and Learn A lot of Cool Meals,
+                    and Share them with others.`}
                 </motion.p>
             </div>
         </section>

diff --git a/components/sections/Search.tsx b/components/sections/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 // Bootstrap
 import { Form } from 'react-bootstrap'
@@ -16,25 +16,35 @@ import getSearch from '@/lib/getSearch'
 import { motion } from 'framer-motion'
 
 export default function Search() {
-    const [searchValue, setSearchValue] = useState<string | null>(null)
+    // const [searchValue, setSearchValue] = useState<string | null>(null)
     const [searchData, setSearchData] = useState<any | null>(null)
     const [loading, setLoading] = useState<boolean>(false)
 
+    const getSearchData = async(query: string) => {
+        setLoading(true)
+        const data = await getSearch({query: query})
+        if(data){
+            setSearchData(data)
+            // console.log(data)
+        }
+        setLoading(false)
+    }
+
     const handleChange = async(e: any) => {
-        setSearchValue(e.target.value)
-        if(searchValue){
-            setLoading(true)
-            const data = await getSearch({query: searchValue})
-            if(data){
-                setSearchData(data)
-                console.log(data)
-            }
-            setLoading(false)
+        // setSearchValue(e.target.value)
+        if(e.target.value){
+            await getSearchData(e.target.value)
         }else{
             setSearchData(null)
         }
     }
 
+    useEffect(() => {
+        (async() => {
+            await getSearchData("cake")
+        })()
+    }, [])
+
     return (
         <motion.section 
         id="search" 
@@ -49,6 +59,7 @@ export default function Search() {
             </div>
             <div className='container px-1 d-flex flex-column justify-contnet-center algin-items-center gap-4'>
                 <Form.Control
+                    defaultValue="cake"
                     onChange={handleChange}
                     style={{maxWidth: 560}}
                     type="search"