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

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>
);
}