Property listing pages

2024-07-10 07:38:50 -04:00
parent 5dd575e001
commit 0b1c9aaa02
8 changed files with 292 additions and 21 deletions
@@ -0,0 +1,99 @@
+import {
+  FaBed,
+  FaBath,
+  FaRulerCombined,
+  FaTimes,
+  FaCheck,
+  FaMapMarker,
+} from 'react-icons/fa';
+
+const PropertyDetails = ({ property }) => {
+  return (
+    <main>
+      <div className='bg-white p-6 rounded-lg shadow-md text-center md:text-left'>
+        <div className='text-gray-500 mb-4'>{property.type}</div>
+        <h1 className='text-3xl font-bold mb-4'>{property.name}</h1>
+        <div className='text-gray-500 mb-4 flex align-middle justify-center md:justify-start'>
+          <FaMapMarker className='text-orange-700 mt-1 mr-1' />
+          <p className='text-orange-700'>
+            {property.location.street}, {property.location.city}{' '}
+            {property.location.state}
+          </p>
+        </div>
+
+        <h3 className='text-lg font-bold my-6 bg-gray-800 text-white p-2'>
+          Rates & Options
+        </h3>
+        <div className='flex flex-col md:flex-row justify-around'>
+          <div className='flex items-center justify-center mb-4 border-b border-gray-200 md:border-b-0 pb-4 md:pb-0'>
+            <div className='text-gray-500 mr-2 font-bold'>Nightly</div>
+            <div className='text-2xl font-bold text-blue-500'>
+              {property.rates.nightly ? (
+                `$${property.rates.nightly.toLocaleString()}`
+              ) : (
+                <FaTimes className='text-red-700' />
+              )}
+            </div>
+          </div>
+          <div className='flex items-center justify-center mb-4 border-b border-gray-200 md:border-b-0 pb-4 md:pb-0'>
+            <div className='text-gray-500 mr-2 font-bold'>Weekly</div>
+            <div className='text-2xl font-bold text-blue-500'>
+              {property.rates.weekly ? (
+                `$${property.rates.weekly.toLocaleString()}`
+              ) : (
+                <FaTimes className='text-red-700' />
+              )}
+            </div>
+          </div>
+          <div className='flex items-center justify-center mb-4 pb-4 md:pb-0'>
+            <div className='text-gray-500 mr-2 font-bold'>Monthly</div>
+            <div className='text-2xl font-bold text-blue-500'>
+              {property.rates.monthly ? (
+                `$${property.rates.monthly.toLocaleString()}`
+              ) : (
+                <FaTimes className='text-red-700' />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='bg-white p-6 rounded-lg shadow-md mt-6'>
+        <h3 className='text-lg font-bold mb-6'>Description & Details</h3>
+        <div className='flex justify-center gap-4 text-blue-500 mb-4 text-xl space-x-9'>
+          <p>
+            <FaBed className='inline-block mr-2' /> {property.beds}{' '}
+            <span className='hidden sm:inline'>Beds</span>
+          </p>
+          <p>
+            <FaBath className='inline-block mr-2' /> {property.baths}{' '}
+            <span className='hidden sm:inline'>Baths</span>
+          </p>
+          <p>
+            <FaRulerCombined className='inline-block mr-2' />
+            {property.square_feet}{' '}
+            <span className='hidden sm:inline'>sqft</span>
+          </p>
+        </div>
+        <p className='text-gray-500 mb-4'>{property.description}</p>
+      </div>
+
+      <div className='bg-white p-6 rounded-lg shadow-md mt-6'>
+        <h3 className='text-lg font-bold mb-6'>Amenities</h3>
+
+        <ul className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 list-none space-y-2'>
+          {property.amenities.map((amenity, index) => (
+            <li key={index}>
+              <FaCheck className='inline-block text-green-600 mr-2' /> {amenity}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className='bg-white p-6 rounded-lg shadow-md mt-6'>
+        <div id='map'></div>
+      </div>
+    </main>
+  );
+};
+
+export default PropertyDetails;
@@ -0,0 +1,22 @@
+import Image from 'next/image';
+
+const PropertyHeaderImage = ({ image }) => {
+  return (
+    <section>
+      <div className='container-xl m-auto'>
+        <div className='grid grid-cols-1'>
+          <Image
+            src={`/images/properties/${image}`}
+            alt=''
+            className='object-cover h-[400px] w-full'
+            width={0}
+            height={0}
+            sizes='100vw'
+            priority={true}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+export default PropertyHeaderImage;