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