Skip to content

Commit

Permalink
Merge pull request #15 from Aromiii/searchRecipes
Browse files Browse the repository at this point in the history 
Search recipes
  • Loading branch information
@Aromiii
Aromiii authored Oct 21, 2022
2 parents 0806016 + fecfcee commit 5d85aab
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 73 deletions.
145 changes: 82 additions & 63 deletions components/navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,97 @@
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
import Link from "next/link";
import {IoAdd, IoFastFoodOutline} from "react-icons/io5";
import {IoAdd, IoFastFoodOutline, IoFilterOutline} from "react-icons/io5";
import {CgProfile} from "react-icons/cg";
import {FaGalacticRepublic} from "react-icons/fa";
import {FaGalacticRepublic, FaBars} from "react-icons/fa";
import {signInWithGoogle} from "../config/firebase";
import {getAuth, onAuthStateChanged} from "firebase/auth";
import {useRouter} from "next/router";

const Dropdown = () => {
//TODO when hovering on hamburger menu or the options menu shows otherwise not
//TODO rewrite as sliding bar that goes top of navbar
return <div className="absolute top-14 left-3 bg-gray-500 p-2 border-2 rounded-lg border-gray-600">
<Link href="/">
<a>
<div className="flex gap-2 p-1">
<FaGalacticRepublic size="35"/>
<p>Main page</p>
</div>
</a>
</Link>
<Link href="/recipes">
<a>
<div className="flex gap-2 p-1">
<IoFastFoodOutline size="35"/>
<p>Recipes</p>
</div>
</a>
</Link>
</div>;
}

const RecipeSearchBar = () => {
return <div className="mx-auto flex">
<IoFilterOutline size="35"/>
<input type="text"
placeholder=" Search recipes..."
className="text-xl rounded-3xl bg-gray-300 text p-1 mx-3"/>
<Link href="/recipes/addnew" passHref>
<a>
<IoAdd size="35"/>
</a>
</Link>
</div>;
}

const NavBar = () => {
const [profilePic, setProfilePic] = useState<string | null>(null)
const [recipeNav, setRecipeNav] = useState(false)
const route = useRouter()

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
setProfilePic(user.photoURL)
} else {
setProfilePic(null)
}
});
console.log(route.pathname)
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
setProfilePic(user.photoURL)
} else {
setProfilePic(null)
}
})
}, [auth])

return (
<nav>
<ul className="navbar_bg">
<li className="navbarListItem">
<Link href="/" passHref>
<a>
<FaGalacticRepublic size="35"/>
</a>
</Link>
</li>
<li className="navbarListItem">
<Link href="/recipes" passHref>
<a>
<IoFastFoodOutline size="35"/>
</a>
</Link>
</li>
<li className="navbarListItem">
<Link href="/recipes/addnew" passHref>
<a>
<IoAdd size="35"/>
</a>
</Link>
</li>
<li className="navbarListItem">
{profilePic === null ? (
<button type="button" onClick={signInWithGoogle}>
<CgProfile size="35"/>
</button>
) : (
<Link href="/profile" passHref>
<a>
<img src={localStorage.getItem("profilePic")!} className="rounded-3xl"/>
</a>
</Link>
)}
</li>
</ul>
</nav>
<nav>
<ul className="text-3xl bg-gray-500 flex p-2 list-none place-items-center gap-9 h-16">
<li className="navbarListItem">
<button className="navbarListItem" onClick={() => setRecipeNav(!recipeNav)}>
<FaBars size="35"/>
{recipeNav && <Dropdown/>}
</button>
</li>
<li className="mx-auto flex">
{route.pathname == "/recipes" ? (
<RecipeSearchBar/>
) : (
<div className="font-bold">Food-helper</div>
)}
</li>
<li className="navbarListItem">
{profilePic === null ? (
<button type="button" onClick={signInWithGoogle}>
<CgProfile size="35"/>
</button>
) : (
<Link href="/profile" passHref>
<a>
<img src={localStorage.getItem("profilePic")!} className="rounded-3xl"/>
</a>
</Link>
)}
</li>
</ul>

</nav>
)
}
export default NavBar;

/*
<li className="navbarListItem">
<Link href="/menu">
me
</Link>
</li>
<li className="navbarListItem">
<Link href="/shopping-list">
sl
</Link>
</li>*/
export default NavBar;
3 changes: 0 additions & 3 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ const Home: NextPage = () => {
<title>Food-helper</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
<h1>
Food-helper
</h1>
</main>
)
}
Expand Down
9 changes: 2 additions & 7 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,16 @@
}

@layer components {
.navbar_bg {
@apply text-3xl bg-gray-600 flex p-2 list-none
place-content-center place-items-center gap-9 h-16
}

.recipeContainer {
@apply bg-gray-600 m-2 rounded-2xl h-96 object-cover overflow-hidden
@apply bg-gray-500 m-2 rounded-2xl h-96 object-cover overflow-hidden
}

.recipeContainerImage {
@apply rounded-2xl max-h-[60%] w-screen object-cover
}

.navbarListItem {
@apply rounded-3xl bg-gray-400 w-12 h-12 justify-center place-items-center flex
@apply rounded-3xl w-12 h-12 justify-center place-items-center flex
}
}

Expand Down

1 comment on commit 5d85aab

@vercel
Copy link

@vercel vercel bot commented on 5d85aab Oct 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

food-helper – ./

food-helper-git-main-aromiii.vercel.app
food-helper-rho.vercel.app
food-helper-aromiii.vercel.app

Please sign in to comment.