modified search page

components/InfoCard.js

@@ -1,11 +1,34 @@
-import Image from "next/image"
+import Image from "next/image";
+import { HeartIcon } from "@heroicons/react/outline";
+import { StarIcon } from "@heroicons/react/solid";
 
 function InfoCard({ img, location, title, description, star, price, total }) {
     return (
-        <div>
-            <div className="relative h-24 w-40 md:h-52 flex-shrink-0">
-                <Image src={img} layout="fill" objectFit="cover" />
-                info
+        <div className="flex py-7 px-2 pr-4 border-b cursor-pointer hover:opacity-80 hover:shadow-lg transition duration-200 ease-out first:border-t">
+            <div className="relative h-2 w-80 md:h-52 flex-shrink-0 pl-5">
+                <Image className="rounded-2xl" src={img} layout="fill" objectFit="cover" />
+
+            </div>
+            <div className="flex flex-col flex-grow pl-8">
+                <div className="flex justify-between">
+                    <p>Private Room in the center of the city</p>
+                    <HeartIcon className="h-7 cursor-pointer" />
+                </div>
+                <h4 className="text-xl">{title}</h4>
+                <div className="border-b w-10 pt-2" />
+                <div className="pt-2 text-sm text-gray-600 flex-grow">{description}</div>
+                <div className="flex justify-between items-end pt-6">
+                    <p className="flex items-center">
+                        <StarIcon className="h-5 text-red-600" />
+                        {star}
+                    </p>
+                    <div>
+                        <p className="text-lg font-semibold pb-2 lg:text-2xl">{price}</p>
+                        <p className="text-right font-extralight">{total}</p>
+                    </div>
+
+                </div>
+
             </div>
         </div>
     )

package.json

@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@badrap/bar-of-progress": "^0.1.2",
     "@heroicons/react": "^1.0.3",
     "date-fns": "^2.23.0",
     "next": "latest",

pages/_app.js

@@ -1,5 +1,18 @@
 import 'tailwindcss/tailwind.css';
 import '../global.css';
+import Router from 'next/router';
+import ProgressBar from "@badrap/bar-of-progress";
+
+const progress = new ProgressBar({
+  size: 4,
+  color: "#FE595E",
+  className:'z-50',
+  delay: 100,
+});
+
+Router.events.on('routeChangeStart', progress.start);
+Router.events.on('routeChangeComplete', progress.finish);
+Router.events.on('routeChangeError', progress.finish);
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/search.js

@@ -17,9 +17,9 @@ export default function Search({ searchResults }) {
         <div>
             <Header placeholder={`${location} | ${range} | ${noOfGuests} guests`}/>
             <main className="flex">
-                <section className="flex-grow pt-14 px-6">
-                    <p className="text-xs p-5 m-4">5000+ Stay - {range} - for {noOfGuests} guests</p>
-                <h1 className="text-3xl font-semibold mt-2 mb-6 p-3 ml-5">Stays in {location}</h1>
+                <section className="flex-grow pt-8 px-6">
+                    <p className="text-xs p-2">5000+ Stay - {range} - for {noOfGuests} guests</p>
+                <h1 className="text-3xl font-semibold mt-2 mb-6 p-2">Stays in {location}</h1>
                 <div className="hidden lg:inline-flex mb-5 ml-5 space-x-3 text-gray-800 whitespace-nowrap">
                     <p className="button">Cancellation Flexibility</p>
                     <p className="button">Type of place</p>