Thanh Quy - wolf
6d7dc0b43f
- Updated header and navigation components with aria-labels for better accessibility. - Modified SearchBar and SearchInput components to include aria-labels and titles for clearer user interaction. - Changed category sidebar button to include aria-label for improved screen reader support. - Adjusted payment page table headers to include scope attributes for better semantic structure. - Enhanced search functionality in Home component to reset category when search query is updated. - Added accessibility features to buttons in ProductCard and other components for improved usability. - Introduced a new skill for frontend atomic design methodology with Tailwind CSS. - Created new skills for prompt optimization, UI/UX testing, and website creation automation.
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import type { SearchInputProps } from "./Input.types";
|
|
|
|
export default function SearchInput({
|
|
value,
|
|
onChange,
|
|
onClear,
|
|
className = "",
|
|
...props
|
|
}: SearchInputProps) {
|
|
return (
|
|
<div className="relative w-full">
|
|
<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={onChange}
|
|
className={`w-full rounded-lg border border-(--color-border) bg-transparent py-2 pr-9 pl-9 text-sm transition-all duration-150 placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary)/20 focus:outline-none ${className}`}
|
|
{...props}
|
|
/>
|
|
{value && onClear && (
|
|
<button
|
|
title="Xóa"
|
|
type="button"
|
|
onClick={onClear}
|
|
className="absolute top-1/2 right-3 -translate-y-1/2 text-(--color-text-muted) transition-colors hover:text-(--color-primary)"
|
|
aria-label="Xóa"
|
|
>
|
|
<i className="fa-solid fa-xmark text-sm"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|