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

Add StickyHeader Component and introduce clsx for merging tailwind classNames

Browse source
This commit is contained in:
araemer 2025-10-25 18:10:56 +02:00
parent 7ffda11a34
commit db23d06fb2
14 changed files with 115 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,21 @@
import {useState} from "react";
import {Search, X} from "lucide-react";
import {defaultIconSize} from "./SvgIcon";
import clsx from "clsx";
/**
* Custom search field component including a clear search functionality
*/
type SearchFieldProps = {
onSearchStringChanged: (searchString: string) => void
className?: string
}
/**
* @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, className = ""}: SearchFieldProps) {
const [currentSearchString, setCurrentSearchString] = useState<string>("")
const changeSearchString = (newSearchString: string) => {
@ -25,7 +27,9 @@ export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
const iconStyle: string = "text-gray-400 hover:text-gray-500";
return (
<div className="relative">
<div className={clsx(
"relative",
className)}>
{/* Input of searchfield
Defines border and behavior. Requires extra padding at both sides to
accommodate the icons
@ -41,7 +45,9 @@ export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
Clears search string on click
*/}
<button
className={`absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 ${iconStyle}`}
className={clsx(
"absolute right-0 inset-y-0 flex items-center -ml-1 mr-3",
iconStyle)}
onClick={() => changeSearchString("")}
>
<X
@ -49,7 +55,9 @@ export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
/>
</button>
{/* Left icon: Looking glass */}
<div className={`absolute left-0 inset-y-0 flex items-center ml-3 ${iconStyle}`}>
<div className={clsx(
"absolute left-0 inset-y-0 flex items-center ml-3",
iconStyle)}>
<Search
size={defaultIconSize}
/>