Merge branch 'mbfix'

GouravNG · Oct 10, 2024 · ad238ed · ad238ed
2 parents dbc1808 + 33437ea
commit ad238ed
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 12 deletions.
diff --git a/components/dropdown.component.tsx b/components/dropdown.component.tsx
@@ -21,7 +21,7 @@ const DropDown: React.FC = async () => {
   //TODO: handling the error, timeout , and data issue.
   return (
     <>
-      <div className='flex gap-3 p-2 '>
+      <div className='hidden md:flex gap-3 p-2 '>
         {dropDonwData?.map((MC, index) => {
           return (
             <div className='relative flex flex-col p-2 group z-10 ' key={MC.parent_id}>

diff --git a/components/header.tsx b/components/header.tsx
@@ -3,17 +3,21 @@ import HeaderButtons from './ui/headerButtons.component'
 import Logo from './ui/logo.component'
 import { headerButtons, logo } from '@/website.properties'
 import SearchBar from './ui/searchBar.component'
+import { Menu } from 'lucide-react'
 
 const Header = () => {
   return (
     <>
-      <header className='shadow-md'>
-        <HeaderButtons headerButtons={headerButtons} varient={'ghost'} />
+      <header className='shadow-md w-full pb-2'>
+        <div className='flex flex-row-reverse items-center justify-between'>
+          <HeaderButtons headerButtons={headerButtons} varient={'ghost'} />
+          <Menu size={40} className='md:hidden p-2' />
+        </div>
         <div className='flex items-center justify-center p-2'>
           <Logo logoText={logo} />
         </div>
-        <div className='flex items-center justify-evenly'>
-          <DropDown/>
+        <div className='flex md:flex-row items-center justify-evenly'>
+          <DropDown />
           <SearchBar />
         </div>
       </header>

diff --git a/components/homepageBlocks/ItemandFeatured.tsx b/components/homepageBlocks/ItemandFeatured.tsx
@@ -11,7 +11,7 @@ export const ItemAndFeatured = async () => {
   const FeaturingData: RecipeInfo[] = await makeGetRequest(getFeaturedRecipesURL)
   return (
     <>
-      <div className='flex p-4 m-2 justify-evenly gap-4'>
+      <div className='flex flex-col md:flex-row p-4 m-2 justify-evenly gap-4'>
         <div className='relative border p-2 bg-slate-700 flex items-end justify-center'>
           <Image
             src={FeaturingData[0]?.recipemainimage}
@@ -27,13 +27,13 @@ export const ItemAndFeatured = async () => {
         </div>
         <div className='flex flex-col justify-center items-center gap-10 '>
           <QuoteComponent />
-          <div className='flex items-start '>
+          <div className=' hidden md:flex md:items-start  '>
             <div className='flex flex-col p-2 gap-2'>
               <div className='flex gap-2 items-center'>
                 <h1 className={`${IBM_Flex.className} subHeadingStyle underLineDecoration`}>Trending Recipes</h1>
                 <MoveRightIcon />
               </div>
-              <div className='flex py-3 gap-20 items-center'>
+              <div className='hidden md:flex py-3 gap-20 items-center'>
                 {FeaturingData.slice(1, 3).map((i, index) => {
                   return <RecipeContainer recipeInfo={i} key={index} />
                 })}

diff --git a/components/homepageBlocks/scrolls.tsx b/components/homepageBlocks/scrolls.tsx
@@ -9,8 +9,8 @@ const Scroll = async () => {
   const recipesData: RecipeInfo[] = await makeGetRequest(getAllRecipesURL)
   return (
     <>
-      <div className='flex items-center p-4'>
-        <h3 className={`${IBM_Flex.className} p-2 subHeadingStyle underLineDecoration`}>Explre our recipes</h3>
+      <div className='flex items-center md:p-4 pb-4'>
+        <h3 className={`${IBM_Flex.className} md:p-2 subHeadingStyle underLineDecoration`}>Explre our recipes</h3>
         <MoveRightIcon />
       </div>
       <div className='bg-slate-300 flex gap-8 p-4 py-8 overflow-x-auto overflow-y-hidden whitespace-nowrap'>

diff --git a/components/ui/recipeContainer2.component.tsx b/components/ui/recipeContainer2.component.tsx
@@ -12,7 +12,7 @@ const RecipeContainer2: React.FC<RecipeContainerProps> = ({ recipeInfo }) => {
   const onClickLink = `recipe/${recipeInfo?.recipename}`
   return (
     <>
-      <div className='flex flex-col p-1 my-4 w-72 bg-gray-50 shadow-md hoverAnimation hover:shadow-xl'>
+      <div className='flex flex-col p-1 my-4 w-74 bg-gray-50 shadow-md hoverAnimation hover:shadow-xl'>
         <div className='relative flex justify-end w-72 h-60'>
           <Link href={onClickLink}>
             <Image

diff --git a/components/ui/searchBar.component.tsx b/components/ui/searchBar.component.tsx
@@ -14,7 +14,7 @@ const SearchBar: React.FC = () => {
 
   return (
     <>
-      <div className='flex items-center gap-2 border-[1px] border-slate-900 p-2'>
+      <div className='flex items-center gap-2 border-[1px] border-slate-900 p-2 '>
         <SearchIcon />
         <input
           type='text'

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.440.0",
+    "next": "14.2.10",
     "pg": "^8.12.0",
     "react": "^18",
     "react-dom": "^18",