diff --git a/frontend/src/components/basics/SearchField.tsx b/frontend/src/components/basics/SearchField.tsx index 5221870..3f60b41 100644 --- a/frontend/src/components/basics/SearchField.tsx +++ b/frontend/src/components/basics/SearchField.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import SvgIcon, { Icon } from "./SvgIcon" + /** * Custom search field component including a clear search functionality */ @@ -37,18 +37,40 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){ Clears search string on click */} {/* Left icon: Looking glass */} -
- + + +
) diff --git a/frontend/src/components/basics/SvgIcon.tsx b/frontend/src/components/basics/SvgIcon.tsx deleted file mode 100644 index 83ac6b4..0000000 --- a/frontend/src/components/basics/SvgIcon.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/** - * SVG Icon component - */ - -/** - * Enum-like const object+type definition to define icons. - * The string corresponds to the path definition of the icon - */ -export const Icon = { - LookingGlass: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z", - X: "M6 18L18 6M6 6l12 12" -} as const; - -export type Icon = typeof Icon[keyof typeof Icon]; - -type SvgIconProps = { - pathDefinition : string - icon : Icon -} - -export default function SvgIcon({icon} : SvgIconProps){ - return ( - - - - ) -} \ No newline at end of file diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx index 56cdd2b..040fc5b 100644 --- a/frontend/src/components/recipes/RecipeEditor.tsx +++ b/frontend/src/components/recipes/RecipeEditor.tsx @@ -94,7 +94,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP placeholder="1" value={draft.servings.amount} onChange={e => { - const tempServings = draft.servings + let tempServings = draft.servings tempServings.amount = Number(e.target.value) setDraft({...draft, servings: tempServings}) }} @@ -104,7 +104,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP placeholder="Persons" value={draft.servings.unit} onChange={e => { - const tempServings = draft.servings + let tempServings = draft.servings tempServings.unit = e.target.value setDraft({...draft, servings: tempServings}) }} diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx index cd08be9..f086f1d 100644 --- a/frontend/src/components/recipes/RecipeListPage.tsx +++ b/frontend/src/components/recipes/RecipeListPage.tsx @@ -5,7 +5,6 @@ import { fetchRecipeList } from "../../api/recipePoint" import { useNavigate } from "react-router-dom" import { getRecipeAddUrl, getRecipeDetailUrl } from "../../routes" import SearchField from "../basics/SearchField" -import RecipeListToolbar from "./RecipeListToolbar" /** * Displays a list of recipes in a sidebar layout. @@ -45,11 +44,25 @@ export default function RecipeListPage() { {/* Header - remains in position when scrolling */}

Recipes

- +
+ {/* Label: left-aligned on medium+ screens, full-width on small screens */} +
+ +
+ + {/* Search + Add button container: right-aligned on medium+ screens */} +
+
+ +
+ +
+
{/*Content - List of recipe cards */}
diff --git a/frontend/src/components/recipes/RecipeListToolbar.tsx b/frontend/src/components/recipes/RecipeListToolbar.tsx deleted file mode 100644 index 99d23ef..0000000 --- a/frontend/src/components/recipes/RecipeListToolbar.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import SearchField from "../basics/SearchField" - -/** - * Toolbar for RecipeListPage containing searchfield, add recipe button and number of recipes - */ -type RecepeListToolbarProps = { - onSearchStringChanged: (searchString : string) => void - onAddClicked: () => void - numberOfRecipes : number -} - -export default function RecipeListToolbar({onSearchStringChanged, onAddClicked, numberOfRecipes} : RecepeListToolbarProps){ - return ( -
- {/* Label: left-aligned on medium+ screens, full-width on small screens */} -
- -
- - {/* Search + Add button container: right-aligned on medium+ screens */} -
-
- -
- -
-
- ) -} \ No newline at end of file