Merge pull request #281 from MurtazaShikari/feat-improved-searchbar

feat:added the improved searchbar and buttons
Anandsg · Oct 25, 2023 · 2036c34 · 2036c34
2 parents d2234ef + 6e09897
commit 2036c34
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -17,7 +17,9 @@ const useMountEffect = (fun) =>
 
 const Body = () => {
   const [listOfRestaurants, setListOfRestaurants] = useState([]);
-  const [filteredListOfRestaurants, setFilteredListOfRestaurants] = useState([]);
+  const [filteredListOfRestaurants, setFilteredListOfRestaurants] = useState(
+    []
+  );
   let [favlist, setFavList] = useState([]);
   const [showFav, setShowFav] = useState(false);
   const [showBackBtn, setShowBackBtn] = useState(false);
@@ -139,7 +141,7 @@ const Body = () => {
               ) : null}
               <input
                 type="text"
-                className="w-64 text-xs border border-gray-300 shadow-md focus:border-gray-500 transition-all duration-300 px-2 py-2 outline-none  rounded-none md:mr-4"
+                className="w-64 md:w-96 md:rounded-lg text-xs border border-gray-300 shadow-md focus:border-gray-500 transition-all duration-300 px-2 py-2 outline-none  rounded-none md:mr-4"
                 placeholder="Search Restaurants"
                 value={searchText}
                 ref={focusElement}
@@ -151,18 +153,19 @@ const Body = () => {
 
               <button
                 data-testid="search-btn"
-                className="text-xs font-medium shadow-md px-2 py-2 outline-none ml-0 md:mr-2 right-10 rounded border border-gray-300 bg-orange-500 hover:border-gray-500 transition-all duration-200 ease-in-out text-white rounded md:bg-white md:text-black"
+                className="text-xs font-medium shadow-md px-4 py-2 outline-none ml-0 md:mr-2 right-10 rounded border border-gray-300 bg-orange-500 hover:border-gray-500 transition-all duration-200 ease-in-out text-white rounded md:bg-white md:text-black"
                 onClick={() => initiateSearch()}
               >
                 Search
               </button>
             </div>
             <div className="flex items-center  mt-2  md:mt-0">
               <span
-                className={`text-xs font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-black cursor-pointer ${showFitler
+                className={`text-xs font-medium shadow-md px-4 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-black cursor-pointer ${
+                  showFitler
                     ? "border-orange-300 text-orange-300 hover:border-orange-500"
                     : ""
-                  }`}
+                }`}
                 onClick={() => {
                   let filteredList = listOfRestaurants;
                   if (!showFitler) {
@@ -178,10 +181,11 @@ const Body = () => {
                 Rating: 4.0+
               </span>
               <span
-                className={`text-xs font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-black cursor-pointer ${showFav
+                className={`text-xs font-medium shadow-md px-4 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-black cursor-pointer ${
+                  showFav
                     ? "border-orange-300 text-orange-300 hover:border-orange-500"
                     : ""
-                  }`}
+                }`}
                 onClick={() => {
                   let favouriteList = listOfRestaurants;
                   if (!showFav) {
@@ -205,9 +209,7 @@ const Body = () => {
           <div className="flex flex-col items-center">
             <img src={RamenRestaurant} alt="icon" className="mt-8 h-64" />
 
-            <h1 className="text-lg font-bold">
-              Oops!
-            </h1>
+            <h1 className="text-lg font-bold">Oops!</h1>
 
             <p className="text-center">
               The restaurant you're searching for doesn't exist.