46 lines
1.4 KiB
React
46 lines
1.4 KiB
React
|
import React, { useState } from 'react';
|
||
|
|
import { FiSearch } from "react-icons/fi"; // Importing search icon from react-icons
|
||
|
|
import "../../Components/SearchInput/PozoPublicSearchInput.scss";
|
||
|
|
|
||
|
|
const PozoPublicSearchInput = ({
|
||
|
|
label = "Search",
|
||
|
|
placeholder = "Search...",
|
||
|
|
value = "",
|
||
|
|
onChange,
|
||
|
|
width = "100%",
|
||
|
|
height = "auto",
|
||
|
|
searchIcon = <FiSearch />, // Default search icon using React Icons
|
||
|
|
disabled = false,
|
||
|
|
className = ""
|
||
|
|
}) => {
|
||
|
|
const [inputValue, setInputValue] = useState(value);
|
||
|
|
|
||
|
|
const handleInputChange = (e) => {
|
||
|
|
setInputValue(e.target.value);
|
||
|
|
if (onChange) onChange(e.target.value); // Call onChange from parent
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`PozoPublicSearchInput ${className}`}
|
||
|
|
style={{ width: width, height: height }}
|
||
|
|
>
|
||
|
|
<div className="PozoPublicSearchInput-main" style={{ width: '100%' }}>
|
||
|
|
<span className="PozoPublicSearchInput-icon">
|
||
|
|
{searchIcon}
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={inputValue}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
disabled={disabled}
|
||
|
|
className="PozoPublicSearchInput-input"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default PozoPublicSearchInput;
|