You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.3 KiB
49 lines
1.3 KiB
import React from "react"; |
|
import _ from "lodash"; |
|
|
|
const langDetector = (lang = "fa", option1, option2) => { |
|
return lang === "fa" ? option1 : option2; |
|
}; |
|
|
|
export default function Search({ |
|
lang, |
|
backgroundColor, |
|
borderColor, |
|
textColor, |
|
icon, |
|
}) { |
|
return ( |
|
<div |
|
className={`flex items-center justify-center border-solid w-full border rounded-md overflow-hidden ${backgroundColor} border-gray-300`} |
|
> |
|
<div className="relative text-gray-600 w-full bg-transparent"> |
|
<span |
|
className={_.join( |
|
[ |
|
"absolute inset-y-0 flex items-center pl-2", |
|
langDetector(lang, "left-0", "right-0"), |
|
], |
|
" " |
|
)} |
|
> |
|
<button |
|
type="submit" |
|
className="p-1 focus:outline-none focus:shadow-outline" |
|
> |
|
{icon && <img src={icon} className="w-6 h-6" alt="" />} |
|
</button> |
|
</span> |
|
<input |
|
type="search" |
|
name="q" |
|
className={`w-full py-2 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`} |
|
placeholder={_.join( |
|
[langDetector(lang, "جستجو...", "Search...")], |
|
" " |
|
)} |
|
autoComplete="off" |
|
/> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|