function RestaurantCard({ name, cuisine, rating, allergens, cuisineDetails }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-md p-6 bg-white max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto mb-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, cuisine), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 font-roboto mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, cuisineDetails), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1 font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, rating)), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-2", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-red-600", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-1", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), "Allergens: ", allergens.join(", ")))); } function RestaurantCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RestaurantCard, { name: "Pasta Palace", cuisine: "Italian", rating: "4.5", cuisineDetails: "Northern Italian specialties, homemade pasta", allergens: [ "Gluten", "Dairy" ], __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RestaurantCard, { name: "Sushi Supreme", cuisine: "Japanese", rating: "4.8", cuisineDetails: "Traditional sushi and sashimi, ramen", allergens: [ "Fish", "Shellfish", "Soy" ], __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RestaurantCard, { name: "Taco Temple", cuisine: "Mexican", rating: "4.2", cuisineDetails: "Authentic street tacos, house-made tortillas", allergens: [ "Wheat", "Dairy" ], __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this })); } function DinnerPartyList() { const [selectedRestaurant, setSelectedRestaurant] = useState(null); const [guests, setGuests] = useState([]); const [newGuest, setNewGuest] = useState({ name: "", preferences: "", allergies: "" }); const restaurants = [ { name: "Bella Italia", cuisine: "Italian", image: "/images/italian.jpg", rating: 4.5, priceRange: "$$" }, { name: "Sushi Master", cuisine: "Japanese", image: "/images/japanese.jpg", rating: 4.8, priceRange: "$$$" }, { name: "Taco Fiesta", cuisine: "Mexican", image: "/images/mexican.jpg", rating: 4.3, priceRange: "$" }, { name: "Golden Dragon", cuisine: "Chinese", image: "/images/chinese.jpg", rating: 4.6, priceRange: "$$" }, { name: "Burger Spot", cuisine: "American", image: "/images/american.jpg", rating: 4.4, priceRange: "$$" } ]; const getRandomRestaurant = ()=>{ const randomIndex = Math.floor(Math.random() * restaurants.length); setSelectedRestaurant(restaurants[randomIndex]); }; const addGuest = ()=>{ if (newGuest.name.trim()) { setGuests([ ...guests, newGuest ]); setNewGuest({ name: "", preferences: "", allergies: "" }); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-center mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "What should I eat today?"), /*#__PURE__*/ React.createElement("div", { className: "mb-8 bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Dinner Guests"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newGuest.name, onChange: (e)=>setNewGuest({ ...newGuest, name: e.target.value }), className: "w-full border rounded-lg px-3 py-2 font-roboto", placeholder: "Guest name", name: "guestName", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: newGuest.preferences, onChange: (e)=>setNewGuest({ ...newGuest, preferences: e.target.value }), className: "w-full border rounded-lg px-3 py-2 font-roboto", placeholder: "Food preferences", name: "preferences", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: newGuest.allergies, onChange: (e)=>setNewGuest({ ...newGuest, allergies: e.target.value }), className: "w-full border rounded-lg px-3 py-2 font-roboto", placeholder: "Food allergies", name: "allergies", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addGuest, className: "w-full bg-[#FF6B6B] hover:bg-[#FF5252] text-white font-roboto py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Add Guest")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, guests.map((guest, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, guest.name), guest.preferences && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-utensils mr-2", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }), "Preferences: ", guest.preferences), guest.allergies && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }), "Allergies: ", guest.allergies))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: getRandomRestaurant, className: "bg-[#FF6B6B] hover:bg-[#FF5252] text-white font-roboto py-3 px-6 rounded-lg shadow-lg transform transition hover:scale-105", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "Get Random Recommendation"), selectedRestaurant && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, "We recommend:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#FF6B6B]", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, selectedRestaurant.name), "!"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, restaurants.map((restaurant, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null))))); } function DinnerPartyListStory() { return /*#__PURE__*/ React.createElement(DinnerPartyList, { __source: { fileName: "", lineNumber: 160, columnNumber: 10 }, __self: this }); } function MainComponent() { const [selectedRestaurant, setSelectedRestaurant] = useState(null); const [name, setName] = useState(""); const [isRegistered, setIsRegistered] = useState(false); const [guests, setGuests] = useState([]); const [newGuest, setNewGuest] = useState({ name: "", preferences: "", allergies: "" }); const restaurants = [ { name: "Bella Italia", cuisine: "Italian", cuisineTags: [ "pasta", "pizza", "mediterranean", "wine" ], image: "/images/italian.jpg", rating: 4.5, priceRange: "$", allergens: [ "gluten", "dairy", "eggs" ], dietaryOptions: [ "vegetarian-friendly", "vegan-options" ] }, { name: "Sushi Master", cuisine: "Japanese", cuisineTags: [ "sushi", "sashimi", "ramen", "tempura" ], image: "/images/japanese.jpg", rating: 4.8, priceRange: "$", allergens: [ "fish", "shellfish", "soy" ], dietaryOptions: [ "gluten-free-options", "vegetarian-friendly" ] }, { name: "Taco Fiesta", cuisine: "Mexican", cuisineTags: [ "tacos", "burritos", "enchiladas", "spicy" ], image: "/images/mexican.jpg", rating: 4.3, priceRange: "$", allergens: [ "dairy", "gluten" ], dietaryOptions: [ "vegan-options", "vegetarian-friendly" ] }, { name: "Golden Dragon", cuisine: "Chinese", cuisineTags: [ "dim-sum", "noodles", "stir-fry", "seafood" ], image: "/images/chinese.jpg", rating: 4.6, priceRange: "$", allergens: [ "soy", "shellfish", "peanuts" ], dietaryOptions: [ "vegetarian-friendly" ] }, { name: "Burger Spot", cuisine: "American", cuisineTags: [ "burgers", "fries", "shakes", "sandwiches" ], image: "/images/american.jpg", rating: 4.4, priceRange: "$", allergens: [ "dairy", "gluten", "eggs", "soy" ], dietaryOptions: [ "gluten-free-buns" ] } ]; const getRandomRestaurant = ()=>{ const guestAllergies = guests.flatMap((guest)=>guest.allergies.split(",").map((a)=>a.trim())); const guestPreferences = guests.flatMap((guest)=>guest.preferences.split(",").map((p)=>p.trim())); const filteredRestaurants = restaurants.filter((restaurant)=>{ const hasAllergen = restaurant.allergens.some((allergen)=>guestAllergies.includes(allergen)); const matchesPreference = guestPreferences.length === 0 || guestPreferences.some((preference)=>restaurant.cuisineTags.includes(preference)); return !hasAllergen && matchesPreference; }); const randomIndex = Math.floor(Math.random() * filteredRestaurants.length); const selected = filteredRestaurants[randomIndex]; setSelectedRestaurant({ ...selected, recommendation: `Perfect for your group! ${selected.cuisineTags.slice(0, 2).join(" and ")} are their specialties.` }); }; const handleSubmit = (e)=>{ e.preventDefault(); if (name.trim()) { setIsRegistered(true); } }; const addGuest = ()=>{ if (newGuest.name.trim()) { setGuests([ ...guests, newGuest ]); setNewGuest({ name: "", preferences: "", allergies: "" }); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, !isRegistered ? /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text text-center mb-8", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, "Join the Dinner Party"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), className: "w-full p-3 border rounded-lg font-roboto", required: true, __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#FF6B6B] hover:bg-[#FF5252] text-white font-roboto py-3 px-4 rounded-lg transition duration-200", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "Let's Get Started")))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-crimson-text text-center mb-12", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Welcome to the Party, ", name, "! 🎉"), /*#__PURE__*/ React.createElement("div", { className: "mb-16", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "Dinner Guests"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newGuest.name, onChange: (e)=>setNewGuest({ ...newGuest, name: e.target.value }), className: "w-full border rounded-lg px-3 py-2 font-roboto", placeholder: "Guest name", name: "guestName", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: newGuest.preferences, onChange: (e)=>setNewGuest({ ...newGuest, preferences: e.target.value }), className: "w-full border rounded-lg px-3 py-2 font-roboto", placeholder: "Food preferences", name: "preferences", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: newGuest.allergies, onChange: (e)=>setNewGuest({ ...newGuest, allergies: e.target.value }), className: "w-full border rounded-lg px-3 py-2 font-roboto", placeholder: "Food allergies", name: "allergies", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addGuest, className: "w-full bg-[#FF6B6B] hover:bg-[#FF5252] text-white font-roboto py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, "Add Guest")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, guests.map((guest, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 195, columnNumber: 23 }, __self: this }, guest.name), guest.preferences && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 197, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-utensils mr-2", __source: { fileName: "", lineNumber: 198, columnNumber: 27 }, __self: this }), "Preferences: ", guest.preferences), guest.allergies && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 203, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 204, columnNumber: 27 }, __self: this }), "Allergies: ", guest.allergies)))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: getRandomRestaurant, className: "bg-[#FF6B6B] hover:bg-[#FF5252] text-white font-roboto py-3 px-6 rounded-lg shadow-lg transform transition hover:scale-105", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "Get Random Recommendation"), selectedRestaurant && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }, "We recommend:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#FF6B6B]", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, selectedRestaurant.name), "!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto text-sm", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, selectedRestaurant.recommendation), /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-sm", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-red-500", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, "Allergen info: ", selectedRestaurant.allergens.join(", ")), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 238, columnNumber: 21 }, __self: this }, selectedRestaurant.dietaryOptions.join(", "))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, restaurants.map((restaurant, index)=>/*#__PURE__*/ React.createElement(RestaurantCard, { key: index, name: restaurant.name, cuisine: restaurant.cuisine, rating: restaurant.rating, allergens: restaurant.allergens, cuisineDetails: restaurant.cuisineTags.join(", "), __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this })))))); }