From 21fe4d6207d8859ab09ec4ad17f3b4ef83dd0610 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 9 Jul 2024 10:52:19 -0400 Subject: [PATCH] Render properties from JSON file --- _theme_files/index.html | 2 +- app/properties/page.jsx | 19 +- components/PropertyCard.jsx | 83 +++++ next.config.mjs | 17 +- properties.json | 384 +++++++++++++++++++++ public/{ => images}/properties/a1.jpg | Bin public/{ => images}/properties/a2 copy.jpg | Bin public/{ => images}/properties/a2.jpg | Bin public/{ => images}/properties/a3.jpg | Bin public/{ => images}/properties/a4.jpg | Bin public/{ => images}/properties/b1.jpg | Bin public/{ => images}/properties/b2.jpg | Bin public/{ => images}/properties/b3.jpg | Bin public/{ => images}/properties/c1.jpg | Bin public/{ => images}/properties/c2.jpg | Bin public/{ => images}/properties/c3.jpg | Bin public/{ => images}/properties/c4.jpg | Bin public/{ => images}/properties/d1.jpg | Bin public/{ => images}/properties/d2.jpg | Bin public/{ => images}/properties/d3.jpg | Bin public/{ => images}/properties/e1.jpg | Bin public/{ => images}/properties/e2.jpg | Bin public/{ => images}/properties/e3.jpg | Bin public/{ => images}/properties/e4.jpg | Bin public/{ => images}/properties/f1.jpg | Bin public/{ => images}/properties/f2.jpg | Bin public/{ => images}/properties/f3.jpg | Bin public/{ => images}/properties/g1.jpg | Bin public/{ => images}/properties/g2.jpg | Bin public/{ => images}/properties/g3.jpg | Bin public/{ => images}/properties/g4.jpg | Bin public/{ => images}/properties/h1.jpg | Bin public/{ => images}/properties/h2.jpg | Bin public/{ => images}/properties/h3.jpg | Bin public/{ => images}/properties/i1.jpg | Bin public/{ => images}/properties/i2.jpg | Bin public/{ => images}/properties/i3.jpg | Bin public/{ => images}/properties/j1.jpg | Bin public/{ => images}/properties/j2.jpg | Bin public/{ => images}/properties/j3.jpg | Bin 40 files changed, 502 insertions(+), 3 deletions(-) create mode 100644 components/PropertyCard.jsx create mode 100644 properties.json rename public/{ => images}/properties/a1.jpg (100%) rename public/{ => images}/properties/a2 copy.jpg (100%) rename public/{ => images}/properties/a2.jpg (100%) rename public/{ => images}/properties/a3.jpg (100%) rename public/{ => images}/properties/a4.jpg (100%) rename public/{ => images}/properties/b1.jpg (100%) rename public/{ => images}/properties/b2.jpg (100%) rename public/{ => images}/properties/b3.jpg (100%) rename public/{ => images}/properties/c1.jpg (100%) rename public/{ => images}/properties/c2.jpg (100%) rename public/{ => images}/properties/c3.jpg (100%) rename public/{ => images}/properties/c4.jpg (100%) rename public/{ => images}/properties/d1.jpg (100%) rename public/{ => images}/properties/d2.jpg (100%) rename public/{ => images}/properties/d3.jpg (100%) rename public/{ => images}/properties/e1.jpg (100%) rename public/{ => images}/properties/e2.jpg (100%) rename public/{ => images}/properties/e3.jpg (100%) rename public/{ => images}/properties/e4.jpg (100%) rename public/{ => images}/properties/f1.jpg (100%) rename public/{ => images}/properties/f2.jpg (100%) rename public/{ => images}/properties/f3.jpg (100%) rename public/{ => images}/properties/g1.jpg (100%) rename public/{ => images}/properties/g2.jpg (100%) rename public/{ => images}/properties/g3.jpg (100%) rename public/{ => images}/properties/g4.jpg (100%) rename public/{ => images}/properties/h1.jpg (100%) rename public/{ => images}/properties/h2.jpg (100%) rename public/{ => images}/properties/h3.jpg (100%) rename public/{ => images}/properties/i1.jpg (100%) rename public/{ => images}/properties/i2.jpg (100%) rename public/{ => images}/properties/i3.jpg (100%) rename public/{ => images}/properties/j1.jpg (100%) rename public/{ => images}/properties/j2.jpg (100%) rename public/{ => images}/properties/j3.jpg (100%) diff --git a/_theme_files/index.html b/_theme_files/index.html index b593e38..026c678 100644 --- a/_theme_files/index.html +++ b/_theme_files/index.html @@ -53,7 +53,7 @@ PropertyPulse diff --git a/app/properties/page.jsx b/app/properties/page.jsx index a539ad5..a95d086 100644 --- a/app/properties/page.jsx +++ b/app/properties/page.jsx @@ -1,5 +1,22 @@ +import properties from '@/properties.json'; +import PropertyCard from '@/components/PropertyCard'; + const PropertiesPage = () => { - return
PropertiesPage
; + return ( +
+
+ {properties.length === 0 ? ( +

No properties found

+ ) : ( +
+ {properties.map((property, index) => ( + + ))} +
+ )} +
+
+ ); }; export default PropertiesPage; diff --git a/components/PropertyCard.jsx b/components/PropertyCard.jsx new file mode 100644 index 0000000..c7833d4 --- /dev/null +++ b/components/PropertyCard.jsx @@ -0,0 +1,83 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { FaBed, FaBath, FaRulerCombined, FaMoneyBill } from 'react-icons/fa'; + +const PropertyCard = ({ property }) => { + 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 ( +
+ +
+
+
{property.type}
+

{property.name}

+
+

+ {getRateDisplay()} +

+ +
+

+ {property.beds} + Beds +

+

+ {property.baths} + Baths +

+

+ {' '} + {property.square_feet} + sqft +

+
+ +
+

+ Weekly +

+

+ Monthly +

+
+ +
+ +
+
+ + + {' '} + {property.location.city}, {property.location.state} + +
+ + Details + +
+
+
+ ); +}; +export default PropertyCard; diff --git a/next.config.mjs b/next.config.mjs index 4678774..5b264a8 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,19 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'lh3.googleusercontent.com', + pathname: '**', + }, + { + protocol: 'https', + hostname: 'res.cloudinary.com', + pathname: '**', + }, + ], + }, +}; export default nextConfig; diff --git a/properties.json b/properties.json new file mode 100644 index 0000000..b06d8f1 --- /dev/null +++ b/properties.json @@ -0,0 +1,384 @@ +[ + { + "_id": "1", + "owner": "1", + "name": "Boston Commons Retreat", + "type": "Apartment", + "description": "This is a beautiful apartment located near the commons. It is a 2 bedroom apartment with a full kitchen and bathroom. It is available for weekly or monthly rentals.", + "location": { + "street": "120 Tremont Street", + "city": "Boston", + "state": "MA", + "zipcode": "02108" + }, + "beds": 2, + "baths": 1, + "square_feet": 1500, + "amenities": [ + "Wifi", + "Full kitchen", + "Washer & Dryer", + "Free Parking", + "Hot Tub", + "24/7 Security", + "Wheelchair Accessible", + "Elevator Access", + "Dishwasher", + "Gym/Fitness Center", + "Air Conditioning", + "Balcony/Patio", + "Smart TV", + "Coffee Maker" + ], + "rates": { + "weekly": 1100, + "monthly": 4200 + }, + "seller_info": { + "name": "John Doe", + "email": "john@gmail.com", + "phone": "617-555-5555" + }, + "images": ["a1.jpg", "a2.jpg", "a3.jpg"], + "is_featured": false, + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + }, + { + "_id": "2", + "owner": "1", + "name": "Cozy Downtown Loft", + "type": "Apartment", + "description": "A cozy downtown loft with great city views.", + "location": { + "street": "45 Main Street", + "city": "New York", + "state": "NY", + "zipcode": "10001" + }, + "beds": 1, + "baths": 1, + "square_feet": 1800, + "amenities": [ + "Wifi", + "Full kitchen", + "Washer & Dryer", + "Free Parking", + "Hot Tub", + "24/7 Security", + "Wheelchair Accessible", + "Elevator Access", + "Dishwasher", + "High-Speed Internet", + "Air Conditioning", + "Smart TV", + "Outdoor Grill/BBQ" + ], + "rates": { + "weekly": 1000, + "monthly": 4000 + }, + "seller_info": { + "name": "Jane Smith", + "email": "jane@gmail.com", + "phone": "212-555-5555" + }, + "images": ["b1.jpg", "b2.jpg", "b3.jpg"], + "is_featured": false, + "createdAt": "2024-01-02T00:00:00.000Z", + "updatedAt": "2024-01-02T00:00:00.000Z" + }, + { + "_id": "3", + "owner": "2", + "name": "Luxury Condo with a View", + "type": "Condo", + "description": "Experience luxury in this stunning condo with breathtaking views.", + "location": { + "street": "500 Lux Lane", + "city": "Los Angeles", + "state": "CA", + "zipcode": "90001" + }, + "beds": 3, + "baths": 2, + "square_feet": 2200, + "amenities": [ + "Wifi", + "Full kitchen", + "Washer & Dryer", + "Free Parking", + "Hot Tub", + "24/7 Security", + "Wheelchair Accessible", + "Elevator Access", + "Dishwasher", + "Swimming Pool", + "Gym/Fitness Center", + "Air Conditioning", + "Smart TV", + "Coffee Maker" + ], + "rates": { + "nightly": 200, + "weekly": 750, + "monthly": 3300 + }, + "seller_info": { + "name": "David Johnson", + "email": "david@gmail.com", + "phone": "213-555-5555" + }, + "images": ["c1.jpg", "c2.jpg", "c3.jpg"], + "is_featured": false, + "createdAt": "2024-01-03T00:00:00.000Z", + "updatedAt": "2024-01-03T00:00:00.000Z" + }, + { + "_id": "4", + "owner": "2", + "name": "Charming Cottage Getaway", + "type": "Cottage Or Cabin", + "description": "Escape to this charming cottage for a peaceful retreat.", + "location": { + "street": "123 Countryside Lane", + "city": "Austin", + "state": "TX", + "zipcode": "78701" + }, + "beds": 1, + "baths": 1, + "square_feet": 900, + "amenities": [ + "Fireplace", + "Outdoor Grill/BBQ", + "Balcony/Patio", + "Coffee Maker" + ], + "rates": { + "weekly": 2000 + }, + "seller_info": { + "name": "Emily Davis", + "email": "emily@gmail.com", + "phone": "512-555-5555" + }, + "images": ["d1.jpg", "d2.jpg", "d3.jpg"], + "is_featured": false, + "createdAt": "2024-01-04T00:00:00.000Z", + "updatedAt": "2024-01-04T00:00:00.000Z" + }, + { + "_id": "5", + "owner": "3", + "name": "Modern Downtown Studio", + "type": "Studio", + "description": "Stay in style in this modern downtown studio apartment.", + "location": { + "street": "75 Urban Avenue", + "city": "Chicago", + "state": "IL", + "zipcode": "60601" + }, + "beds": 1, + "baths": 1, + "square_feet": 900, + "amenities": [ + "High-Speed Internet", + "Smart TV", + "Air Conditioning", + "Gym/Fitness Center", + "Outdoor Grill/BBQ" + ], + "rates": { + "weekly": 1100, + "monthly": 4200 + }, + "seller_info": { + "name": "Michael Brown", + "email": "michael@gmail.com", + "phone": "312-555-5555" + }, + "images": ["e1.jpg", "e2.jpg", "e3.jpg"], + "is_featured": true, + "createdAt": "2024-01-05T00:00:00.000Z", + "updatedAt": "2024-01-05T00:00:00.000Z" + }, + { + "_id": "6", + "owner": "3", + "name": "Seaside Retreat", + "type": "House", + "description": "Escape to this seaside house for a relaxing getaway.", + "location": { + "street": "456 Oceanfront Drive", + "city": "Miami", + "state": "FL", + "zipcode": "33101" + }, + "beds": 4, + "baths": 3, + "square_feet": 2800, + "amenities": [ + "Beach Access", + "Swimming Pool", + "Balcony/Patio", + "Smart TV", + "Outdoor Grill/BBQ" + ], + "rates": { + "nightly": 500, + "weekly": 2500 + }, + "seller_info": { + "name": "Sarah Wilson", + "email": "sarah@gmail.com", + "phone": "305-555-5555" + }, + "images": ["f1.jpg", "f2.jpg", "f3.jpg"], + "is_featured": true, + "createdAt": "2024-01-06T00:00:00.000Z", + "updatedAt": "2024-01-06T00:00:00.000Z" + }, + { + "_id": "7", + "owner": "4", + "name": "Rustic Cabin in the Woods", + "type": "Cottage Or Cabin", + "description": "Experience nature in this cozy rustic cabin.", + "location": { + "street": "789 Forest Lane", + "city": "Denver", + "state": "CO", + "zipcode": "80201" + }, + "beds": 2, + "baths": 1, + "square_feet": 1100, + "amenities": [ + "Fireplace", + "Outdoor Grill/BBQ", + "Hiking Trails Access", + "Pet-Friendly" + ], + "rates": { + "nightly": 475, + "weekly": 2000 + }, + "seller_info": { + "name": "Robert Anderson", + "email": "robert@gmail.com", + "phone": "303-555-5555" + }, + "images": ["g1.jpg", "g2.jpg", "g3.jpg"], + "is_featured": false, + "createdAt": "2024-01-07T00:00:00.000Z", + "updatedAt": "2024-01-07T00:00:00.000Z" + }, + { + "_id": "8", + "owner": "5", + "name": "Ski-In/Ski-Out Chalet", + "type": "Chalet", + "description": "Hit the slopes from this cozy ski-in/ski-out chalet.", + "location": { + "street": "321 Mountain Road", + "city": "Aspen", + "state": "CO", + "zipcode": "81611" + }, + "beds": 3, + "baths": 2, + "square_feet": 1800, + "amenities": [ + "Ski Equipment Storage", + "Fireplace", + "Balcony/Patio", + "Smart TV" + ], + "rates": { + "nightly": 300, + "weekly": 1100 + }, + "seller_info": { + "name": "Jennifer Martin", + "email": "jennifer@gmail.com", + "phone": "970-555-5555" + }, + "images": ["h1.jpg", "h2.jpg", "h3.jpg"], + "is_featured": false, + "createdAt": "2024-01-08T00:00:00.000Z", + "updatedAt": "2024-01-08T00:00:00.000Z" + }, + { + "_id": "9", + "owner": "6", + "name": "Mountain View Retreat", + "type": "House", + "description": "Enjoy stunning mountain views from this spacious retreat.", + "location": { + "street": "600 Summit Drive", + "city": "Boulder", + "state": "CO", + "zipcode": "80301" + }, + "beds": 4, + "baths": 3, + "square_feet": 2400, + "amenities": [ + "Mountain View", + "Hiking Trails Access", + "Air Conditioning", + "Smart TV", + "Outdoor Grill/BBQ" + ], + "rates": { + "weekly": 1000, + "monthly": 3800 + }, + "seller_info": { + "name": "Lisa Taylor", + "email": "lisa@gmail.com", + "phone": "303-555-5555" + }, + "images": ["i1.jpg", "i2.jpg", "i3.jpg"], + "is_featured": false, + "createdAt": "2024-01-09T00:00:00.000Z", + "updatedAt": "2024-01-09T00:00:00.000Z" + }, + { + "_id": "10", + "owner": "7", + "name": "Historic Downtown Loft", + "type": "Apartment", + "description": "Step back in time with a stay in this historic downtown loft.", + "location": { + "street": "123 History Lane", + "city": "Philadelphia", + "state": "PA", + "zipcode": "19101" + }, + "beds": 2, + "baths": 1, + "square_feet": 1200, + "amenities": [ + "High-Speed Internet", + "Air Conditioning", + "Smart TV", + "Coffee Maker" + ], + "rates": { + "weekly": 550, + "monthly": 2100 + }, + "seller_info": { + "name": "Matthew Harris", + "email": "matthew@gmail.com", + "phone": "215-555-5555" + }, + "images": ["j1.jpg", "j2.jpg", "j3.jpg"], + "is_featured": false, + "createdAt": "2024-01-10T00:00:00.000Z", + "updatedAt": "2024-01-10T00:00:00.000Z" + } +] diff --git a/public/properties/a1.jpg b/public/images/properties/a1.jpg similarity index 100% rename from public/properties/a1.jpg rename to public/images/properties/a1.jpg diff --git a/public/properties/a2 copy.jpg b/public/images/properties/a2 copy.jpg similarity index 100% rename from public/properties/a2 copy.jpg rename to public/images/properties/a2 copy.jpg diff --git a/public/properties/a2.jpg b/public/images/properties/a2.jpg similarity index 100% rename from public/properties/a2.jpg rename to public/images/properties/a2.jpg diff --git a/public/properties/a3.jpg b/public/images/properties/a3.jpg similarity index 100% rename from public/properties/a3.jpg rename to public/images/properties/a3.jpg diff --git a/public/properties/a4.jpg b/public/images/properties/a4.jpg similarity index 100% rename from public/properties/a4.jpg rename to public/images/properties/a4.jpg diff --git a/public/properties/b1.jpg b/public/images/properties/b1.jpg similarity index 100% rename from public/properties/b1.jpg rename to public/images/properties/b1.jpg diff --git a/public/properties/b2.jpg b/public/images/properties/b2.jpg similarity index 100% rename from public/properties/b2.jpg rename to public/images/properties/b2.jpg diff --git a/public/properties/b3.jpg b/public/images/properties/b3.jpg similarity index 100% rename from public/properties/b3.jpg rename to public/images/properties/b3.jpg diff --git a/public/properties/c1.jpg b/public/images/properties/c1.jpg similarity index 100% rename from public/properties/c1.jpg rename to public/images/properties/c1.jpg diff --git a/public/properties/c2.jpg b/public/images/properties/c2.jpg similarity index 100% rename from public/properties/c2.jpg rename to public/images/properties/c2.jpg diff --git a/public/properties/c3.jpg b/public/images/properties/c3.jpg similarity index 100% rename from public/properties/c3.jpg rename to public/images/properties/c3.jpg diff --git a/public/properties/c4.jpg b/public/images/properties/c4.jpg similarity index 100% rename from public/properties/c4.jpg rename to public/images/properties/c4.jpg diff --git a/public/properties/d1.jpg b/public/images/properties/d1.jpg similarity index 100% rename from public/properties/d1.jpg rename to public/images/properties/d1.jpg diff --git a/public/properties/d2.jpg b/public/images/properties/d2.jpg similarity index 100% rename from public/properties/d2.jpg rename to public/images/properties/d2.jpg diff --git a/public/properties/d3.jpg b/public/images/properties/d3.jpg similarity index 100% rename from public/properties/d3.jpg rename to public/images/properties/d3.jpg diff --git a/public/properties/e1.jpg b/public/images/properties/e1.jpg similarity index 100% rename from public/properties/e1.jpg rename to public/images/properties/e1.jpg diff --git a/public/properties/e2.jpg b/public/images/properties/e2.jpg similarity index 100% rename from public/properties/e2.jpg rename to public/images/properties/e2.jpg diff --git a/public/properties/e3.jpg b/public/images/properties/e3.jpg similarity index 100% rename from public/properties/e3.jpg rename to public/images/properties/e3.jpg diff --git a/public/properties/e4.jpg b/public/images/properties/e4.jpg similarity index 100% rename from public/properties/e4.jpg rename to public/images/properties/e4.jpg diff --git a/public/properties/f1.jpg b/public/images/properties/f1.jpg similarity index 100% rename from public/properties/f1.jpg rename to public/images/properties/f1.jpg diff --git a/public/properties/f2.jpg b/public/images/properties/f2.jpg similarity index 100% rename from public/properties/f2.jpg rename to public/images/properties/f2.jpg diff --git a/public/properties/f3.jpg b/public/images/properties/f3.jpg similarity index 100% rename from public/properties/f3.jpg rename to public/images/properties/f3.jpg diff --git a/public/properties/g1.jpg b/public/images/properties/g1.jpg similarity index 100% rename from public/properties/g1.jpg rename to public/images/properties/g1.jpg diff --git a/public/properties/g2.jpg b/public/images/properties/g2.jpg similarity index 100% rename from public/properties/g2.jpg rename to public/images/properties/g2.jpg diff --git a/public/properties/g3.jpg b/public/images/properties/g3.jpg similarity index 100% rename from public/properties/g3.jpg rename to public/images/properties/g3.jpg diff --git a/public/properties/g4.jpg b/public/images/properties/g4.jpg similarity index 100% rename from public/properties/g4.jpg rename to public/images/properties/g4.jpg diff --git a/public/properties/h1.jpg b/public/images/properties/h1.jpg similarity index 100% rename from public/properties/h1.jpg rename to public/images/properties/h1.jpg diff --git a/public/properties/h2.jpg b/public/images/properties/h2.jpg similarity index 100% rename from public/properties/h2.jpg rename to public/images/properties/h2.jpg diff --git a/public/properties/h3.jpg b/public/images/properties/h3.jpg similarity index 100% rename from public/properties/h3.jpg rename to public/images/properties/h3.jpg diff --git a/public/properties/i1.jpg b/public/images/properties/i1.jpg similarity index 100% rename from public/properties/i1.jpg rename to public/images/properties/i1.jpg diff --git a/public/properties/i2.jpg b/public/images/properties/i2.jpg similarity index 100% rename from public/properties/i2.jpg rename to public/images/properties/i2.jpg diff --git a/public/properties/i3.jpg b/public/images/properties/i3.jpg similarity index 100% rename from public/properties/i3.jpg rename to public/images/properties/i3.jpg diff --git a/public/properties/j1.jpg b/public/images/properties/j1.jpg similarity index 100% rename from public/properties/j1.jpg rename to public/images/properties/j1.jpg diff --git a/public/properties/j2.jpg b/public/images/properties/j2.jpg similarity index 100% rename from public/properties/j2.jpg rename to public/images/properties/j2.jpg diff --git a/public/properties/j3.jpg b/public/images/properties/j3.jpg similarity index 100% rename from public/properties/j3.jpg rename to public/images/properties/j3.jpg