araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Clean up css

Browse source
This commit is contained in:
araemer 2025-10-25 08:00:59 +02:00
parent 5a4e04a47c
commit c866c01dfe
17 changed files with 214 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/components/basics/SearchField.tsx
View file

@ -1,21 +1,22 @@
import { useState } from "react";
import { Search, X} from "lucide-react";
import { defaultIconSize } from "./SvgIcon";
import {useState} from "react";
import {Search, X} from "lucide-react";
import {defaultIconSize} from "./SvgIcon";
/**
* Custom search field component including a clear search functionality
*/
type SearchFieldProps = {
onSearchStringChanged: (searchString : string) => void
type SearchFieldProps = {
onSearchStringChanged: (searchString: string) => void
}
/**
* @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
* @returns Custom search field component
*/
export default function SearchField({onSearchStringChanged} : SearchFieldProps){
export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
const [currentSearchString, setCurrentSearchString] = useState<string>("")
const changeSearchString = (newSearchString : string) => {
const changeSearchString = (newSearchString: string) => {
console.log(newSearchString);
setCurrentSearchString(newSearchString);
onSearchStringChanged(newSearchString)
@ -23,34 +24,34 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){
return (
<div className="relative">
{/* Input of searchfield
{/* Input of searchfield
Defines border and behavior. Requires extra padding at both sides to
accommodate the icons
*/}
<input
className="input-field pl-10 pr-10"
type="text"
placeholder="Search"
value={currentSearchString}
onChange={ e => changeSearchString(e.target.value) }
/>
{/* Right icon: X
<input
className="pl-10 pr-10"
type="text"
placeholder="Search"
value={currentSearchString}
onChange={e => changeSearchString(e.target.value)}
/>
{/* Right icon: X
Clears search string on click
*/}
<button
className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
onClick = { () => changeSearchString("") }
>
<X
size = {defaultIconSize}
/>
</button>
{/* Left icon: Looking glass */}
<div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
<Search
size = {defaultIconSize}
/>
<button
className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
onClick={() => changeSearchString("")}
>
<X
size={defaultIconSize}
/>
</button>
{/* Left icon: Looking glass */}
<div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
<Search
size={defaultIconSize}
/>
</div>
</div>
</div>
)
}