function NewComponent({ title, items, isBrandsPage }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, isBrandsPage ? 'Location:' : 'Next Trip:'), " ", isBrandsPage ? item.location : item.nextLocation), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, isBrandsPage ? 'Promotion Needs:' : 'Upcoming Trips:'), " ", isBrandsPage ? item.promotionNeeds : item.upcomingTrips.join(', ')), isBrandsPage ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, "Marketing Goals:"), " ", item.marketingGoals) : /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, "Followers:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside ml-4", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 23, columnNumber: 19 }, __self: this }, "Instagram: ", item.followers.instagram), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, "TikTok: ", item.followers.tiktok), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 25, columnNumber: 19 }, __self: this }, "YouTube: ", item.followers.youtube)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Engagement Rate:"), " ", item.engagementRate)))))); } function NewComponentStory() { const brands = [ { name: 'Luxury Resorts Inc.', location: 'Maldives', promotionNeeds: 'High-end resort experiences, water villas', marketingGoals: 'Increase bookings for honeymoon packages' }, { name: 'Adventure Gear Co.', location: 'Colorado, USA', promotionNeeds: 'Outdoor equipment, hiking gear', marketingGoals: 'Boost sales of new eco-friendly product line' } ]; const influencers = [ { name: 'Alice Traveler', upcomingTrips: [ 'Paris', 'Tokyo', 'Bali' ], nextLocation: 'Paris', followers: { instagram: '500K', tiktok: '1M', youtube: '250K' }, engagementRate: '4.5%' }, { name: 'Bob Wanderlust', upcomingTrips: [ 'New York', 'Rio de Janeiro', 'Cape Town' ], nextLocation: 'New York', followers: { instagram: '750K', tiktok: '2M', youtube: '500K' }, engagementRate: '5.2%' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { title: "Travel Brands", items: brands, isBrandsPage: true, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { title: "Travel Influencers", items: influencers, isBrandsPage: false, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentPage, setCurrentPage] = React.useState('brands'); const BrandsPage = ()=>{ const influencers = [ { name: 'Alice Traveler', upcomingTrips: [ 'Paris', 'Tokyo', 'Bali' ], nextLocation: 'Paris', followers: { instagram: '500K', tiktok: '1M', youtube: '250K' }, engagementRate: '4.5%' }, { name: 'Bob Wanderlust', upcomingTrips: [ 'New York', 'Rio de Janeiro', 'Cape Town' ], nextLocation: 'New York', followers: { instagram: '750K', tiktok: '2M', youtube: '500K' }, engagementRate: '5.2%' } ]; return /*#__PURE__*/ React.createElement(NewComponent, { title: "Travel Influencers", items: influencers, isBrandsPage: false, __source: { fileName: "", lineNumber: 22, columnNumber: 12 }, __self: this }); }; const InfluencersPage = ()=>{ const brands = [ { name: 'Luxury Resorts Inc.', location: 'Maldives', promotionNeeds: 'High-end resort experiences, water villas', marketingGoals: 'Increase bookings for honeymoon packages' }, { name: 'Adventure Gear Co.', location: 'Colorado, USA', promotionNeeds: 'Outdoor equipment, hiking gear', marketingGoals: 'Boost sales of new eco-friendly product line' } ]; return /*#__PURE__*/ React.createElement(NewComponent, { title: "Travel Brands", items: brands, isBrandsPage: true, __source: { fileName: "", lineNumber: 41, columnNumber: 12 }, __self: this }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4 justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded ${currentPage === 'brands' ? 'bg-blue-800' : ''}`, onClick: ()=>setCurrentPage('brands'), __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "For Brands")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded ${currentPage === 'influencers' ? 'bg-blue-800' : ''}`, onClick: ()=>setCurrentPage('influencers'), __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "For Influencers")))), currentPage === 'brands' ? /*#__PURE__*/ React.createElement(BrandsPage, { __source: { fileName: "", lineNumber: 66, columnNumber: 35 }, __self: this }) : /*#__PURE__*/ React.createElement(InfluencersPage, { __source: { fileName: "", lineNumber: 66, columnNumber: 52 }, __self: this })); }