“`react
import React, { useState } from ‘react’;
import {
MapPin,
Wifi,
Trash2,
Zap,
Phone,
Mail,
ExternalLink,
CheckCircle2,
DollarSign,
Home,
ChevronLeft,
ChevronRight
} from ‘lucide-react’;

// Simulated JSON Feed generated by Nexus_OS
const mockListingsFeed = [
{
id: “largo-01”,
title: “Largo Room”,
subtitle: “Peaceful residential surroundings”,
address: “1142 7th St NW, Largo, FL 33770”,
rent: “1,000”,
status: “Available Now”,
images: [
“https://images.unsplash.com/photo-1522771731478-44710c589c37?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80”
],
includes: [“All Utilities”, “Trash Pickup”, “High-Speed WiFi”],
amenities: [“In-unit washer/dryer”, “Full kitchen access”, “Quiet neighborhood”],
driveLink: “https://drive.google.com/drive/folders/1rq4JYVN-X7xNK-JRJLyLGMOB9EfGswp”,
contact: {
name: “Sheila”,
phone: “(727) 510-7980”,
email: “gulfnexus@gmail.com”
}
},
{
id: “tampa-01”,
title: “Tampa Room”,
subtitle: “Conveniently located near transit”,
address: “926 E Poinsettia Ave, Tampa, FL 33612”,
rent: “850”,
status: “Available Now”,
images: [
“https://images.unsplash.com/photo-1556910103-1c02745aae4d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80”, // Kitchen
“https://images.unsplash.com/photo-1616047006789-b7af5afb8c20?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80”, // Hallway
“https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80”, // Laundry
“https://images.unsplash.com/photo-1584558597022-83b6329fc2a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80” // Exterior
],
includes: [“All Utilities”, “Trash Pickup”, “High-Speed WiFi”],
amenities: [“In-unit washer/dryer”, “Full kitchen access”, “Driveway/street parking”],
driveLink: “https://drive.google.com/drive/folders/1JVp5rKSMxX6PUWwh8s15ceHhN4qxBHxa”,
contact: {
name: “Sheila”,
phone: “(727) 510-7980”,
email: “gulfnexus@gmail.com”
}
}
];

const ListingCard = ({ listing }) => {
const [currentImageIndex, setCurrentImageIndex] = useState(0);

const nextImage = () => {
setCurrentImageIndex((prev) => (prev + 1) % listing.images.length);
};

const prevImage = () => {
setCurrentImageIndex((prev) => (prev === 0 ? listing.images.length – 1 : prev – 1));
};

return (

{/* Card Image Carousel */}

{/* Carousel Controls */}
{listing.images.length > 1 && (

{/* Dots indicator */}

{listing.images.map((_, idx) => (

))}

)}

{listing.status}

{listing.rent}
/mo

{/* Card Content */}

{listing.title}

{listing.address}

{/* Badges / Includes */}

{listing.includes.map((item, i) => (

{item.includes(‘WiFi’) && }
{item.includes(‘Utilities’) && }
{item.includes(‘Trash’) && }
{item}

))}

{/* Amenities List */}

{amenity}

))}

{/* Actions */}

View Photo Gallery

Call

);
};

const EmbeddedListings = () => {
const [listings] = useState(mockListingsFeed);

return (

{/* Header */}

Amazing Grace

Home
Available Rooms
About Us
Contact

{/* Hero Title */}

Available Rooms

Find your perfect space. All of our rooms include utilities, WiFi, and are located in clean, well-maintained properties.

{/* Listings Grid */}

{listings.map((listing) => (

))}

);
};

export default function App() {
return (

{/* Host site mockup header */}

Host Environment

External Site (WordPress / Embed)

Iframe Simulation

{/* Frame Wrapper */}

{/* Mock Iframe toolbar */}

{/* Spacer for alignment */}

{/* Embedded Content Container (Scrollable independent of the dark background) */}

Scroll inside the white container above. The UI is fully isolated and responsive, just like a real embed!

);
}

“`

<iframe>
```react
import React, { useState } from 'react';
import { 
  MapPin, 
  Wifi, 
  Trash2, 
  Zap, 
  Phone, 
  Mail, 
  ExternalLink, 
  CheckCircle2,
  DollarSign,
  Home,
  ChevronLeft,
  ChevronRight
} from 'lucide-react';

// Simulated JSON Feed generated by Nexus_OS
const mockListingsFeed = [
  {
    id: "largo-01",
    title: "Largo Room",
    subtitle: "Peaceful residential surroundings",
    address: "1142 7th St NW, Largo, FL 33770",
    rent: "1,000",
    status: "Available Now",
    images: [
      "https://images.unsplash.com/photo-1522771731478-44710c589c37?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
    ],
    includes: ["All Utilities", "Trash Pickup", "High-Speed WiFi"],
    amenities: ["In-unit washer/dryer", "Full kitchen access", "Quiet neighborhood"],
    driveLink: "https://drive.google.com/drive/folders/1rq4JYVN-X7xNK-JRJLyLGMOB9EfGswp",
    contact: {
      name: "Sheila",
      phone: "(727) 510-7980",
      email: "gulfnexus@gmail.com"
    }
  },
  {
    id: "tampa-01",
    title: "Tampa Room",
    subtitle: "Conveniently located near transit",
    address: "926 E Poinsettia Ave, Tampa, FL 33612",
    rent: "850",
    status: "Available Now",
    images: [
      "https://images.unsplash.com/photo-1556910103-1c02745aae4d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", // Kitchen
      "https://images.unsplash.com/photo-1616047006789-b7af5afb8c20?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", // Hallway
      "https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", // Laundry
      "https://images.unsplash.com/photo-1584558597022-83b6329fc2a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"  // Exterior
    ],
    includes: ["All Utilities", "Trash Pickup", "High-Speed WiFi"],
    amenities: ["In-unit washer/dryer", "Full kitchen access", "Driveway/street parking"],
    driveLink: "https://drive.google.com/drive/folders/1JVp5rKSMxX6PUWwh8s15ceHhN4qxBHxa",
    contact: {
      name: "Sheila",
      phone: "(727) 510-7980",
      email: "gulfnexus@gmail.com"
    }
  }
];

const ListingCard = ({ listing }) => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const nextImage = () => {
    setCurrentImageIndex((prev) => (prev + 1) % listing.images.length);
  };

  const prevImage = () => {
    setCurrentImageIndex((prev) => (prev === 0 ? listing.images.length - 1 : prev - 1));
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 border border-slate-200 overflow-hidden flex flex-col">
      
      {/* Card Image Carousel */}
      <div className="relative h-56 bg-slate-200 group">
        <img 
          src={listing.images[currentImageIndex]} 
          alt={listing.title} 
          className="w-full h-full object-cover transition-opacity duration-300"
        />
        
        {/* Carousel Controls */}
        {listing.images.length > 1 && (
          <>
            <button 
              onClick={prevImage}
              className="absolute left-2 top-1/2 -translate-y-1/2 p-1.5 bg-white/80 hover:bg-white text-slate-800 rounded-full shadow-md backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
            <button 
              onClick={nextImage}
              className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 bg-white/80 hover:bg-white text-slate-800 rounded-full shadow-md backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
            
            {/* Dots indicator */}
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-1.5">
              {listing.images.map((_, idx) => (
                <div 
                  key={idx} 
                  className={`w-1.5 h-1.5 rounded-full ${idx === currentImageIndex ? 'bg-white' : 'bg-white/50'}`}
                />
              ))}
            </div>
          </>
        )}

        <div className="absolute top-4 left-4">
          <span className="px-3 py-1 bg-green-500 text-white text-xs font-bold uppercase tracking-wider rounded-full shadow-sm">
            {listing.status}
          </span>
        </div>
        <div className="absolute bottom-4 right-4 bg-white/95 backdrop-blur-sm px-4 py-2 rounded-lg shadow-sm border border-white/20 flex items-center">
          <DollarSign className="w-4 h-4 text-slate-700 mr-0.5" />
          <span className="text-xl font-bold text-slate-900">{listing.rent}</span>
          <span className="text-xs text-slate-500 ml-1 mt-1">/mo</span>
        </div>
      </div>

      {/* Card Content */}
      <div className="p-6 flex-grow flex flex-col">
        <div className="mb-4">
          <h2 className="text-2xl font-bold text-slate-800 mb-1">{listing.title}</h2>
          <p className="text-sm text-slate-500 flex items-start">
            <MapPin className="w-4 h-4 mr-1 mt-0.5 flex-shrink-0 text-blue-500" />
            {listing.address}
          </p>
        </div>

        {/* Badges / Includes */}
        <div className="flex flex-wrap gap-2 mb-6">
          {listing.includes.map((item, i) => (
            <span key={i} className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">
              {item.includes('WiFi') && <Wifi className="w-3 h-3 mr-1" />}
              {item.includes('Utilities') && <Zap className="w-3 h-3 mr-1" />}
              {item.includes('Trash') && <Trash2 className="w-3 h-3 mr-1" />}
              {item}
            </span>
          ))}
        </div>

        {/* Amenities List */}
        <ul className="space-y-2 mb-8 flex-grow">
          {listing.amenities.map((amenity, i) => (
            <li key={i} className="flex items-start text-sm text-slate-600">
              <CheckCircle2 className="w-4 h-4 mr-2 text-emerald-500 mt-0.5 flex-shrink-0" />
              {amenity}
            </li>
          ))}
        </ul>

        {/* Actions */}
        <div className="space-y-3 mt-auto">
          <a 
            href={listing.driveLink} 
            target="_blank" 
            rel="noopener noreferrer"
            className="w-full flex items-center justify-center px-4 py-2.5 border-2 border-slate-200 text-slate-700 font-semibold rounded-xl hover:border-blue-600 hover:text-blue-600 transition-colors"
          >
            View Photo Gallery
            <ExternalLink className="w-4 h-4 ml-2" />
          </a>
          
          <div className="grid grid-cols-2 gap-3">
            <a 
              href={`tel:${listing.contact.phone.replace(/\D/g,'')}`}
              className="flex items-center justify-center px-4 py-2.5 bg-blue-50 text-blue-700 font-semibold rounded-xl hover:bg-blue-100 transition-colors"
            >
              <Phone className="w-4 h-4 mr-2" />
              Call
            </a>
            <a 
              href={`mailto:${listing.contact.email}?subject=Inquiry about ${listing.title}`}
              className="flex items-center justify-center px-4 py-2.5 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-colors shadow-sm"
            >
              <Mail className="w-4 h-4 mr-2" />
              Email
            </a>
          </div>
        </div>

      </div>
    </div>
  );
};

const EmbeddedListings = () => {
  const [listings] = useState(mockListingsFeed);

  return (
    <div className="min-h-[100vh] bg-slate-50 font-sans pb-12">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <Home className="w-8 h-8 text-blue-600" />
            <span className="text-xl font-bold text-slate-800 tracking-tight">Amazing Grace</span>
          </div>
          <nav className="hidden md:flex space-x-6 text-sm font-medium text-slate-600">
            <a href="#" className="hover:text-blue-600 transition-colors">Home</a>
            <a href="#" className="text-blue-600">Available Rooms</a>
            <a href="#" className="hover:text-blue-600 transition-colors">About Us</a>
            <a href="#" className="hover:text-blue-600 transition-colors">Contact</a>
          </nav>
        </div>
      </header>

      {/* Hero Title */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-8">
        <h1 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-2">Available Rooms</h1>
        <p className="text-lg text-slate-600 max-w-2xl">
          Find your perfect space. All of our rooms include utilities, WiFi, and are located in clean, well-maintained properties.
        </p>
      </div>

      {/* Listings Grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          
          {listings.map((listing) => (
            <ListingCard key={listing.id} listing={listing} />
          ))}

        </div>
      </div>
      
    </div>
  );
};

export default function App() {
  return (
    <div className="min-h-screen bg-neutral-900 p-4 sm:p-8 flex flex-col items-center justify-start font-sans">
      
      {/* Host site mockup header */}
      <div className="w-full max-w-7xl mb-4 flex justify-between items-end text-neutral-300">
        <div>
          <p className="text-sm font-semibold text-neutral-500 uppercase tracking-widest mb-1">Host Environment</p>
          <h2 className="text-2xl font-bold text-white">External Site (WordPress / Embed)</h2>
        </div>
        <div className="hidden sm:flex items-center text-sm bg-neutral-800 border border-neutral-700 px-3 py-1.5 rounded-md shadow-sm text-neutral-400">
          <ExternalLink className="w-4 h-4 mr-2" />
          Iframe Simulation
        </div>
      </div>
      
      {/* Frame Wrapper */}
      <div className="w-full max-w-7xl bg-white border-[4px] border-neutral-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] overflow-hidden h-[80vh] flex flex-col relative resize-y">
        
        {/* Mock Iframe toolbar */}
        <div className="bg-neutral-200 border-b border-neutral-300 px-4 py-2 flex items-center justify-between">
          <div className="flex gap-1.5 w-20">
            <div className="w-3 h-3 rounded-full bg-red-400 shadow-sm border border-red-500/20"></div>
            <div className="w-3 h-3 rounded-full bg-amber-400 shadow-sm border border-amber-500/20"></div>
            <div className="w-3 h-3 rounded-full bg-green-400 shadow-sm border border-green-500/20"></div>
          </div>
          <div className="bg-white/80 px-3 py-1 text-xs text-neutral-500 rounded border border-neutral-300 shadow-sm w-auto text-center truncate font-mono">
            &lt;iframe src="/listings-feed" width="100%" height="100%"&gt;
          </div>
          <div className="w-20"></div> {/* Spacer for alignment */}
        </div>

        {/* Embedded Content Container (Scrollable independent of the dark background) */}
        <div className="flex-1 overflow-y-auto bg-slate-50 relative hide-scrollbar">
          <EmbeddedListings />
        </div>
        
      </div>
      
      <p className="mt-6 text-neutral-400 text-sm max-w-7xl w-full text-center">
        Scroll inside the white container above. The UI is fully isolated and responsive, just like a real embed!
      </p>
    </div>
  );
}


```<iframe>

https://github.com/users/NicholaiMadias/achievements/pair-extraordinaire

Describe one positive change you have made in your life.

By:

Nicholai

Posted in:

dailyprompt, dailyprompt-1904

{listing.title}

Available Rooms

External Site (WordPress / Embed)

Share this:

Leave a comment Cancel reply