Thanh Quy - wolf
54d5d6150c
Release package / release (pull_request) Successful in 3m23s
- Translated payment page text from Vietnamese to English. - Updated staff creation page with English labels and messages. - Changed staff schedule page labels and navigation items to English. - Modified shift card and search bar components to use English text. - Updated delete confirmation and product modal components with English messages. - Translated product management tab and category sidebar to English. - Changed shift schedule components to display English text for shifts and actions. - Updated header logo alt text to improve accessibility.
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import type { SearchBarProps } from "./Search.types";
|
|
|
|
export default function SearchBar({
|
|
value,
|
|
onChange,
|
|
onClear,
|
|
placeholder = "Search...",
|
|
className = "",
|
|
}: SearchBarProps) {
|
|
return (
|
|
<div className={`relative w-full ${className}`}>
|
|
<i className="fa-solid fa-magnifying-glass pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-sm text-(--color-text-muted)"></i>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
aria-label="Search items"
|
|
className="bg-card text-foreground border-border placeholder:text-muted-foreground focus:border-primary focus:ring-primary focus:ring-opacity-20 w-full rounded-xl border py-2 pr-9 pl-9 text-sm transition-all duration-150 outline-none focus:ring-2"
|
|
/>
|
|
{value && (
|
|
<button
|
|
onClick={onClear}
|
|
title="Clear search"
|
|
aria-label="Clear search"
|
|
className="absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer border-none bg-transparent p-0 text-(--color-text-muted) transition-colors duration-150 hover:text-(--color-primary)"
|
|
>
|
|
<i className="fa-solid fa-xmark text-sm"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|