Property Card Dynamic Data

Properties Pages and Property Card Dynamic Data

1. Prepare Your Data Source

a. Place the JSON File

Ensure that your properties.json file is located in your project root (or in a dedicated data folder).
This file contains an array of property objects with fields such as _id, name, type, location, rates, images, etc.

b. Understand the JSON Structure

Each property has:
- Basic Details: _id, name, type, beds, baths, square_feet
- Location: A nested object with street, city, state, zipcode
- Rates: An object that might include nightly, weekly, or monthly values
- Images: An array of image filenames (to be prefixed with /images/properties/ for public access)

2. Create a Dynamic PropertyCard Component

a. Create the Component File

In your components/ folder, create a file named PropertyCard.jsx.

b. Import Required Modules

Import Next.js’ Image and Link components along with React icons for a more stylish look:

"use client"; // Enable client-side interactivity if needed
import Image from 'next/image';
import Link from 'next/link';
import { FaBed, FaBath, FaRulerCombined, FaMoneyBill, FaMapMarkerAlt } from 'react-icons/fa';

c. Build the Component Structure

The component receives a single property object as a prop and dynamically displays its data. Create a helper function to determine the proper rate display.

Example Code:

'use client' // Enable client-side interactivity if needed
import Image from 'next/image'
import Link from 'next/link'
import {
  FaBed,
  FaBath,
  FaRulerCombined,
  FaMoneyBill,
  FaMapMarkerAlt,
} from 'react-icons/fa'

export default function PropertyCard({ property }) {
  // Helper function to choose a rate to display
  const getRateDisplay = () => {
    const { rates } = property
    if (rates.monthly) {
      return `$${rates.monthly.toLocaleString()}/mo`
    } else if (rates.weekly) {
      return `$${rates.weekly.toLocaleString()}/wk`
    } else if (rates.nightly) {
      return `$${rates.nightly.toLocaleString()}/night`
    }
    return 'Contact for rates'
  }

  return (
    <div className="bg-white rounded-xl shadow-md relative ">
      {/* Display the first image from the array */}
      <Image
        src={`/images/properties/${property.images[0]}`}
        alt={property.name}
        width={0} // Set to 0 when using CSS for responsive sizing
        height={0}
        sizes="100vw"
        className="object-cover rounded-t-xl md:rounded-tr-none md:rounded-l-xl w-full "
      />

      <div className="p-6">
        <div className="text-left md:text-center lg:text-left mb-6">
          <h3 className="text-xl font-bold">{property.name}</h3>
          <div className="text-gray-600 mb-4">{property.type}</div>
        </div>
        {/* Rate display badge */}
        <h3 className="absolute top-2 left-2 bg-white px-4 py-2 rounded-lg text-blue-500 font-bold">
          {getRateDisplay()}
        </h3>

        <div className="flex justify-between items-center ">
          <div className="flex gap-2 text-gray-500">
            <p>
              <FaBed className="inline mr-1" /> {property.beds}
            </p>
            <p>
              <FaBath className="inline mr-1" /> {property.baths}
            </p>
            <p>
              <FaRulerCombined className="inline mr-1" /> {property.square_feet}{' '}
              sqft
            </p>
          </div>
        </div>
        <div className="flex justify-center gap-4 text-green-900 text-sm mb-4">
          {property.rates.nightly && (
            <p>
              <i className="fa-solid fa-money-bill"></i> Nightly
            </p>
          )}
          {property.rates.weekly && (
            <p>
              <i className="fa-solid fa-money-bill"></i> Weekly
            </p>
          )}
          {property.rates.monthly && (
            <p>
              <i className="fa-solid fa-money-bill"></i> Monthly
            </p>
          )}
        </div>
      </div>
      <div className="border border-gray-200 mb-5">
        <div className="flex flex-col lg:flex-row justify-between mb-4">
          <div className=" flex align-middle gap-2 mb-4 lg:mb-0">
            <FaMapMarkerAlt className="text-orange-700 mr-1" />
            <span className="text-orange-700">
              {property.location.city}, {property.location.state}
            </span>
          </div>
          <Link
            href={`/properties/${property._id}`}
            className="h-[36px]  bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
            Details
          </Link>
        </div>
      </div>
    </div>
  )
}

Explanation:

'use client':
- This directive at the top indicates that this component is a Client Component in Next.js. This means it will be rendered in the user's browser and can use client-side features like event handlers and state.
Imports:
- Image from next/image: For optimized image rendering.
- Link from next/link: For creating client-side navigation links.
- FaBed, FaBath, FaRulerCombined, FaMoneyBill, FaMapMarkerAlt from react-icons/fa: These are icons from the react-icons library (specifically, Font Awesome icons) used to visually represent beds, baths, square footage, rates, and location.
PropertyCard({ property }) Function:
- This is a functional component that accepts a property object as a prop. This property object will contain all the details of a single property (like name, type, location, rates, etc.).
getRateDisplay() Helper Function:
- This function determines which rate to display (monthly, weekly, or nightly) based on the rates object within the property data.
- It prioritizes monthly, then weekly, then nightly.
- It uses toLocaleString() to format the number with commas (e.g., 4200 becomes 4,200).
- If no rates are available, it returns "Contact for rates".
JSX Structure (The return statement):
- Outer div:
  - className="bg-white rounded-xl shadow-md relative": This sets the basic styling for the card: white background, rounded corners, a shadow, and relative positioning (for absolute positioning of the rate badge).
- Image Component:
  - src={/images/properties/${property.images[0]}}: Dynamically sets the image source to the first image in the property.images array. It assumes images are stored in the /public/images/properties directory.
  - alt={property.name}: Sets the alt text for accessibility.
  - width={0}, height={0}, sizes="100vw": These are important for responsive image sizing with next/image. By setting width and height to 0, you're telling Next.js to let the CSS determine the image dimensions. sizes="100vw" tells Next.js that the image will take up the full width of the viewport.
  - className="object-cover rounded-t-xl md:rounded-tr-none md:rounded-l-xl w-full": Styles the image to cover the container, have rounded corners at the top, and adjust the rounding on medium screens and up.
- Inner div (Content):
  - className="p-6": Adds padding to the content area.
  - Property Name and Type:
    h3 className="text-xl font-bold">{property.name}: Displays the property's name in a large, bold font.
    div className="text-gray-600 mb-4">{property.type}: Displays the property's type (e.g., "Apartment", "Condo").
  - Rate Badge:
    h3 className="absolute top-2 left-2 bg-white px-4 py-2 rounded-lg text-blue-500 font-bold": Displays the rate (from getRateDisplay()) as a badge in the top-left corner of the card.
  - Beds, Baths, and Square Footage:
    div className="flex justify-between items-center": A flex container to align the icons and text.
    div className="flex gap-2 text-gray-500": A flex container for the icons and text.
    <FaBed>, <FaBath>, <FaRulerCombined>: The icons.
    {property.beds}, {property.baths}, {property.square_feet}: The property data.
  - Rate Types:
    div className="flex justify-center gap-4 text-green-900 text-sm mb-4": A flex container to display the rate types.
    The code conditionally renders the rate types based on the property data.
  - Location and Details Link
    div className="border border-gray-200 mb-5": A horizontal line to separate the content.
    div className="flex flex-col lg:flex-row justify-between mb-4": A flex container to align the location and the details link.
    <FaMapMarkerAlt>: The location icon.
    {property.location.city}, {property.location.state}: The property's city and state.
    <Link href={/properties/${property._id}}: A link to the property's detail page. The _id is used to create a unique URL for each property.

In Summary:

The PropertyCard component is a reusable UI element that takes property data and renders a visually appealing card with key information about the property. It handles:

Displaying an image.
Showing the property's name, type, and location.
Dynamically choosing and formatting the appropriate rate.
Displaying the number of beds, baths, and square footage.
Providing a link to the full property details page.
Responsive design.
Using icons to improve the UI.

3. Integrate the PropertyCard Component in the Properties Page

a. Create/Update the Properties Page

In your Next.js project (using the new app directory), create or update the file:
```
app/properties/page.jsx
```

b. Import the JSON Data and Component

Import your JSON file and the PropertyCard component:

import PropertyCard from '@/components/PropertyCard';
import properties from '@/properties.json'; // Adjust path if necessary

c. Render the List of Property Cards

Update page.jsx by applying conditional rendering to check if properties exist. If so, map over the data and render a PropertyCard for each item.