59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
interface SearchFilterButtonProps {
|
|
displayText: string;
|
|
isActive: boolean;
|
|
onClick: () => void;
|
|
className?: string;
|
|
showIcon?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const SearchFilterButton: React.FC<SearchFilterButtonProps> = ({
|
|
displayText,
|
|
isActive,
|
|
onClick,
|
|
className = '',
|
|
showIcon = true,
|
|
disabled = false
|
|
}) => {
|
|
const baseClasses = "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500";
|
|
|
|
const activeClasses = isActive
|
|
? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-100"
|
|
: "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400";
|
|
|
|
const disabledClasses = disabled
|
|
? "opacity-50 cursor-not-allowed"
|
|
: "cursor-pointer";
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={`${baseClasses} ${activeClasses} ${disabledClasses} ${className}`}
|
|
>
|
|
{showIcon && (
|
|
<svg
|
|
className="w-4 h-4 mr-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
<span className="truncate">{displayText}</span>
|
|
{isActive && (
|
|
<div className="ml-2 w-2 h-2 bg-blue-500 rounded-full flex-shrink-0" />
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default SearchFilterButton; |