refactor components b00tc4mp#407

staff/belen-ivars/project/app/src/components/ComplexityLevelFilter.jsx

@@ -1,6 +1,6 @@
-import Dropable from "./Dropable"
+import OptionsFilters from "./OptionsFilters"
 
 export default function ComplexityLevelFilter() {
 	const options = ['very easy', 'easy', 'medium', 'complex', 'very complex']
-	return <Dropable title="Complexity level" options={options} />
+	return <OptionsFilters title="Complexity level" options={options} />
 }

staff/belen-ivars/project/app/src/components/DietFilter.jsx

@@ -1,6 +1,6 @@
-import Dropable from "./Dropable"
+import OptionsFilters from "./OptionsFilters"
 
 export default function DietFilter() {
 	const options = ['glutenfree', 'vegetarian', 'vegan', 'omnivorous']
-	return <Dropable title="Diet type" options={options} />
+	return <OptionsFilters title="Diet type" options={options} />
 }

staff/belen-ivars/project/app/src/components/Dropdown.jsx

@@ -0,0 +1,22 @@
+import { useState } from "react"
+
+import React, { useState } from 'react';
+
+function Dropdown() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<div>
+			<button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
+			{isOpen && (
+				<div>
+					<p>Option A</p>
+					<p>Option B</p>
+					<p>Option C</p>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default Dropdown;

staff/belen-ivars/project/app/src/components/FavsButton.jsx

@@ -1,7 +1,7 @@
 import { Button } from "../library"
 import { Route, Routes, useNavigate } from 'react-router-dom'
 
-export default function Favs() {
+export default function FavsButton() {
 
 	const navigate = useNavigate()
 
@@ -13,7 +13,7 @@ export default function Favs() {
 
 	return <div>
 
-		<Button className="button-header" onClick={handleFavRecipesClick}>💛</Button>
+		<Button className="button-header" onClick={handleFavRecipesClick}>💛 My Favs </Button>
 
 
 	</div>

staff/belen-ivars/project/app/src/components/MethodFilter.jsx

@@ -1,6 +1,6 @@
-import Dropable from "./Dropable"
+import OptionsFilters from "./OptionsFilters"
 
 export default function MethodFilter() {
 	const options = ['steamed', 'oven', 'microwave', 'grill', 'fresh']
-	return <Dropable title="Method" options={options} />
+	return <OptionsFilters title="Method" options={options} />
 }

staff/belen-ivars/project/app/src/components/OptionsFilters.jsx

@@ -0,0 +1,25 @@
+import { Container, Label } from "../library"
+
+export default function OptionsFilters({ options, title }) {
+
+	return (
+		<Container>
+			<span><u>{title}</u></span>
+			<ul id="checklist">
+				{
+					options.map((o, index) => (
+
+						<li key={index}>
+
+							<input
+								type="checkbox"
+								value={o}
+							/>
+							<Label>{o}</Label>
+						</li>
+					))
+				}
+			</ul>
+		</Container>
+	)
+}

staff/belen-ivars/project/app/src/components/TimeFilter.jsx

@@ -1,6 +1,6 @@
-import Dropable from "./Dropable"
+import OptionsFilters from "./OptionsFilters"
 
 export default function TimeFilter() {
 	const options = ['0 - 15 min', '15 - 30 min', '30-1 h', '+ 1h']
-	return <Dropable title="Time filter" options={options} />
+	return <OptionsFilters title="Time filter" options={options} />
 }

staff/belen-ivars/project/app/src/components/index.js

@@ -3,12 +3,13 @@ import LogoutButton from './LogoutButton'
 import NewRecipeForm from './NewRecipeForm'
 import ComplexityLevelFilter from './ComplexityLevelFilter'
 import DietFilter from './DietFilter'
-import Dropable from './Dropable'
+import OptionsFilters from './OptionsFilters'
 import MethodFilter from './MethodFilter'
 import SearchForm from './SearchForm'
 import TimeFilter from './TimeFilter'
 import TopProfileImage from './TopProfileImage'
 import Recipe from './Recipe'
+import FavsButton from './FavsButton'
 
 
 export {
@@ -17,10 +18,11 @@ export {
 	NewRecipeForm,
 	ComplexityLevelFilter,
 	DietFilter,
-	Dropable,
+	OptionsFilters,
 	MethodFilter,
 	SearchForm,
 	TimeFilter,
 	TopProfileImage,
-	Recipe
+	Recipe,
+	FavsButton
 }

staff/belen-ivars/project/app/src/pages/Profile.jsx

@@ -1,3 +1,5 @@
-export default function Profile() {
+export default function Profile({ name, email }) {
+
+
 
 }