diff --git a/web/src/components/buttons/DropdownButton.tsx b/web/src/components/buttons/DropdownButton.tsx new file mode 100644 index 0000000..266678a --- /dev/null +++ b/web/src/components/buttons/DropdownButton.tsx @@ -0,0 +1,19 @@ + +interface DropdownButtonProps { + content: string; + name: string; + value: string; + selected: boolean; +} + +export default function DropdownButton({ content, name, value, selected }: DropdownButtonProps) { + + return ( + + ); +} diff --git a/web/src/components/buttons/FilterButton.tsx b/web/src/components/buttons/FilterButton.tsx new file mode 100644 index 0000000..e79dc65 --- /dev/null +++ b/web/src/components/buttons/FilterButton.tsx @@ -0,0 +1,36 @@ + +interface FilterButtonProps { + click: () => void; +} + +export default function FilterButton({ click }: FilterButtonProps) { + + return ( + + ); +} diff --git a/web/src/components/inputs/RecipeSearchBar.tsx b/web/src/components/inputs/RecipeSearchBar.tsx new file mode 100644 index 0000000..4476e7a --- /dev/null +++ b/web/src/components/inputs/RecipeSearchBar.tsx @@ -0,0 +1,54 @@ +import { useState } from "react"; +import type { SearchFilters } from "../../types/search"; +import FilterButton from "../buttons/FilterButton"; +import RecipeSearchFilterDropdown from "./RecipeSearchFilterDropdown"; + +interface RecipeSearchBarProps { + filters: SearchFilters | null; + redirect: boolean; + searchOnLoad: boolean; + favorites: boolean; +}; + +export default function RecipeSearchBar({ filters, redirect, searchOnLoad, favorites }: RecipeSearchBarProps) { + const [displayDropdown, setDisplayDropdown] = useState(false); + + // HANDLERS + const formSubmitHandler = () => console.log("formSubmitHandler()"); + const toggleDropdownHandler = () => setDisplayDropdown(!displayDropdown); + + return ( +
+
+
+ + + +
+ +
+ + + ); +} diff --git a/web/src/components/inputs/RecipeSearchFilterDropdown.tsx b/web/src/components/inputs/RecipeSearchFilterDropdown.tsx new file mode 100644 index 0000000..3f78b73 --- /dev/null +++ b/web/src/components/inputs/RecipeSearchFilterDropdown.tsx @@ -0,0 +1,125 @@ +import type { SearchFilters } from "../../types/search"; +import DropdownButton from "../buttons/DropdownButton"; + +interface RecipeSearchFilterDropdownProps { + filters: SearchFilters | null; + display: boolean; +}; + +function isBitActive(bits: number, pos: number): boolean { + return ((bits >> pos) & 1) === 1; +} + +export default function RecipeSearchFilterDropdown({ filters, display }: RecipeSearchFilterDropdownProps) { + + return ( +
+
+

+ Meal +

+
+ {filters ? + <> + + + + + + + + + : + <> + + + + + + + + + } +
+
+
+

+ Cook Time +

+
+ {filters ? + <> + + + + + + + : + <> + + + + + + + } +
+
+
+

+ Difficulty +

+
+ {filters ? + <> + + + + + + + : + <> + + + + + + + } +
+
+
+

+ Serving Size +

+
+ {filters ? + <> + + + + + + + : + <> + + + + + + + } +
+
+
+ +
+
+ ); +} diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 04f34b8..db9bc38 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -1,4 +1,4 @@ -import { Fragment, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import SalmonVideo from "../assets/videos/salmon_video.mp4"; import Banner from "../components/Banner"; import ROUTE_CONSTANTS from "../types/routes"; @@ -7,6 +7,7 @@ import RecipeLarge from "../components/cards/RecipeCardLarge"; import type { Recipe } from "../types/recipe"; import RecipeCardSmall from "../components/cards/RecipeCardSmall"; import ContentCardSmall from "../components/cards/ContentCardSmall"; +import RecipeSearchBar from "../components/inputs/RecipeSearchBar"; export default function Home() { const [loggedIn, isLoggedIn] = useState(false); @@ -129,8 +130,7 @@ export default function Home() {
- {/* TODO: Create this */} - {/* @components.SearchBar(filters, true, false, false) */} +
@@ -188,7 +188,6 @@ export default function Home() { ) : (

No recently made recipes

)} - {/* } */} :
diff --git a/web/src/types/search.ts b/web/src/types/search.ts new file mode 100644 index 0000000..9d86600 --- /dev/null +++ b/web/src/types/search.ts @@ -0,0 +1,8 @@ + +export interface SearchFilters { + Search: string; + MealType: number; + Time: number; + Difficulty: number; + ServingSize: number; +};