function NewComponent({ posts }) { const [loading, setLoading] = React.useState(false); const [formData, setFormData] = React.useState({ blogUrl: '', platform: '', postLength: '', hashtags: '', writingStyle: '', includeEmojis: false }); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setFormData((prev)=>({ ...prev, [name]: type === 'checkbox' ? checked : value })); }; const handleSubmit = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: formData.blogUrl, getText: true }) }); const content = await response.text(); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `Rewrite the following blog content into 5 social media posts for the platform ${formData.platform}. Each post should be ${formData.postLength} long, include ${formData.hashtags} hashtags, and be in a ${formData.writingStyle} tone. ${formData.includeEmojis ? 'Include emojis.' : 'Do not include emojis.'} \n\n${content}` } ] }) }); const result = await chatResponse.json(); const generatedPosts = result.choices[0].message.content.split('\n\n').map((text)=>({ text })); setPosts(generatedPosts); } catch (error) { console.error(error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#f5f7fa]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "✨ Create perfect social media content from blog content"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Fill in the filters below and we’ll generate 5 social media posts including illustration, pictures, and so on."), /*#__PURE__*/ React.createElement("form", { className: "bg-[#ffffff] p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Blog URL"), /*#__PURE__*/ React.createElement("input", { name: "blogUrl", className: "w-full p-2 border border-gray-300 rounded font-roboto", type: "text", value: formData.blogUrl, onChange: handleChange, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Social Platform"), /*#__PURE__*/ React.createElement("select", { name: "platform", className: "w-full p-2 border border-gray-300 rounded font-roboto", value: formData.platform, onChange: handleChange, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Select Platform"), /*#__PURE__*/ React.createElement("option", { value: "Facebook", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Facebook"), /*#__PURE__*/ React.createElement("option", { value: "Twitter", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("option", { value: "LinkedIn", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "LinkedIn"), /*#__PURE__*/ React.createElement("option", { value: "Instagram", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Instagram"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Post Length"), /*#__PURE__*/ React.createElement("select", { name: "postLength", className: "w-full p-2 border border-gray-300 rounded font-roboto", value: formData.postLength, onChange: handleChange, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Select Length"), /*#__PURE__*/ React.createElement("option", { value: "Short (50-150 words)", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Short (50-150 words)"), /*#__PURE__*/ React.createElement("option", { value: "Medium (150-300 words)", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Medium (150-300 words)"), /*#__PURE__*/ React.createElement("option", { value: "Long (300+ words)", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Long (300+ words)"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Number of Hashtags in the post"), /*#__PURE__*/ React.createElement("input", { name: "hashtags", className: "w-full p-2 border border-gray-300 rounded font-roboto", type: "number", value: formData.hashtags, onChange: handleChange, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Post Writing Style"), /*#__PURE__*/ React.createElement("select", { name: "writingStyle", className: "w-full p-2 border border-gray-300 rounded font-roboto", value: formData.writingStyle, onChange: handleChange, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Select Style"), /*#__PURE__*/ React.createElement("option", { value: "Casual", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Casual"), /*#__PURE__*/ React.createElement("option", { value: "Professional", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Professional"), /*#__PURE__*/ React.createElement("option", { value: "Humorous", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Humorous"), /*#__PURE__*/ React.createElement("option", { value: "Inspirational", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Inspirational"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "includeEmojis", type: "checkbox", className: "mr-2", checked: formData.includeEmojis, onChange: handleChange, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Include Emojis")), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white px-4 py-2 rounded font-roboto", onClick: handleSubmit, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, loading ? 'Loading...' : 'Generate Posts')), /*#__PURE__*/ React.createElement("div", { className: "mt-6 font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "Here are your generated posts:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 mt-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, posts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded shadow w-[400px]", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 font-roboto mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, post.text), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-camera mr-2", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }), "Add a picture"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-rocket mr-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), "Post")))))); } function NewComponentStory() { const samplePosts = [ { text: "Ever thought about what your backyard could really do? With edible landscaping, it could offer a tangible solution to food scarcity, turning unused spaces into productive, nutritious mini-farms, right in the heart of urban communities. Encourage the practice of 'eat your yard' and help reduce food insecurity, one garden at a time. #EdibleLandscaping #FoodSecurity..." }, { text: "Edible parks, public spaces and gardens not only create vibrant and engaging spaces but also promote community involvement and environmental stewardship. Join us in boosting awareness for sustainable food systems and be part of the change. #EdibleSpaces #CommunityUnity..." }, { text: "Edible Landscapes are about more than just aesthetics. By promoting local food production, they strengthen local economies by supporting area farmers and gardeners. Give local, eat local, and help boost your community's economy. #EdibleLandscapes #SupportLocal..." }, { text: "Dive into the world of edible landscaping, where landscape design meets agriculture. Find out how this innovative approach is not just transforming the visual appeal of places but is also offering a viable solution to the challenges of food scarcity. #EdibleLandscaping #FutureofFood..." }, { text: "Edible landscaping, it's not only about food production. It's also about connecting people with their food sources, boosting awareness for sustainability, and creating job opportunities within local communities. #EdibleLandscaping #Sustainability..." } ]; return /*#__PURE__*/ React.createElement(NewComponent, { posts: samplePosts, __source: { fileName: "", lineNumber: 130, columnNumber: 10 }, __self: this }); } function ImageSelectorModal({ images, setSelectedImageForPost }) { const [showModal, setShowModal] = React.useState(false); const [selectedImage, setSelectedImage] = React.useState(images[0]); const [currentIndex, setCurrentIndex] = React.useState(0); const handleSelectImage = (direction)=>{ if (direction === 'next') { setCurrentIndex((prevIndex)=>(prevIndex + 1) % images.length); } else { setCurrentIndex((prevIndex)=>(prevIndex - 1 + images.length) % images.length); } }; React.useEffect(()=>{ setSelectedImage(images[currentIndex]); }, [ currentIndex, images ]); return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 text-white px-4 py-2 rounded font-roboto", onClick: ()=>setShowModal(true), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-camera mr-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), "Add a picture"), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-lg w-[600px]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-purple-500 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Pick an image scraped from the article:"), /*#__PURE__*/ React.createElement("button", { className: "text-gray-500", onClick: ()=>setShowModal(false), __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-purple-500", onClick: ()=>handleSelectImage('prev'), __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: selectedImage.url, alt: "Scraped from article", className: "w-[300px] h-[200px] object-cover", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-purple-500", onClick: ()=>handleSelectImage('next'), __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-right", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white px-4 py-2 rounded font-roboto", onClick: ()=>setShowModal(false), __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Close"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded font-roboto", onClick: ()=>{ setSelectedImageForPost(selectedImage); setShowModal(false); }, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Done")))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImage.url, alt: "Selected", className: "w-[400px] h-[300px] object-cover", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }))); } function ImageSelectorModalStory() { const sampleImages = [ { url: 'path/to/image1.jpg' }, { url: 'path/to/image2.jpg' }, { url: 'path/to/image3.jpg' } ]; const [selectedImageForPost, setSelectedImageForPost] = React.useState(null); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageSelectorModal, { images: sampleImages, setSelectedImageForPost: setSelectedImageForPost, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }), selectedImageForPost && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow w-[400px] mt-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImageForPost.url, alt: "Selected for post", className: "w-[300px] h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "This image will be included in your post."))); } function NewComponent2({ post, image, onClose }) { return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-lg w-[600px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-purple-500 font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Preview Selected Post"), /*#__PURE__*/ React.createElement("button", { className: "text-gray-500", onClick: onClose, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Text:"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, post.text), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Picture:"), image && /*#__PURE__*/ React.createElement("img", { src: image.url, alt: "Selected post image", className: "w-[300px] h-[200px] object-cover mb-4 mx-auto", __source: { fileName: "", lineNumber: 15, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-lime-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "facebook"), /*#__PURE__*/ React.createElement("button", { className: "bg-lime-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "twitter"), /*#__PURE__*/ React.createElement("button", { className: "bg-lime-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "linkedin"), /*#__PURE__*/ React.createElement("button", { className: "bg-lime-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "reddit"), /*#__PURE__*/ React.createElement("button", { className: "bg-lime-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "instagram"))), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 text-white px-4 py-2 rounded font-roboto mt-4", onClick: onClose, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Close"))); } function NewComponent2Story() { const samplePost = { text: "Ever thought about what your backyard could really do? With edible landscaping, it could offer a tangible solution to food scarcity, turning unused spaces into productive, nutritious mini-farms, right in the heart of urban communities. Encourage the practice of 'eat your yard' and help reduce food insecurity, one garden at a time. #EdibleLandscaping #FoodSecurity..." }; const sampleImage = { url: 'path/to/image1.jpg' }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent2, { post: samplePost, image: sampleImage, onClose: ()=>alert('Closed!'), __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [formData, setFormData] = React.useState({ blogUrl: '', platform: '', postLength: '', hashtags: '', writingStyle: '', includeEmojis: false }); const [finalPosts, setFinalPosts] = React.useState([]); const [selectedImage, setSelectedImage] = React.useState(null); const [previewPost, setPreviewPost] = React.useState(null); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setFormData((prev)=>({ ...prev, [name]: type === 'checkbox' ? checked : value })); }; const handleSubmit = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: formData.blogUrl, getText: true }) }); const content = await response.text(); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `Rewrite the following blog content into 5 social media posts for the platform ${formData.platform}. Each post should be ${formData.postLength} long, include ${formData.hashtags} hashtags, and be in a ${formData.writingStyle} tone. ${formData.includeEmojis ? 'Include emojis.' : 'Do not include emojis.'} \n\n${content}` } ] }) }); const result = await chatResponse.json(); const generatedPosts = result.choices[0].message.content.split('\n\n').map((text)=>({ text })); setFinalPosts(generatedPosts); } catch (error) { console.error(error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#f5f7fa]", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "✨ Create perfect social media content from blog content"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Fill in the filters below and we’ll generate 5 social media posts including illustration, pictures, and so on."), /*#__PURE__*/ React.createElement("form", { className: "bg-[#ffffff] p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Blog URL"), /*#__PURE__*/ React.createElement("input", { name: "blogUrl", className: "w-full p-2 border border-gray-300 rounded font-roboto", type: "text", value: formData.blogUrl, onChange: handleChange, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Social Platform"), /*#__PURE__*/ React.createElement("select", { name: "platform", className: "w-full p-2 border border-gray-300 rounded font-roboto", value: formData.platform, onChange: handleChange, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Select Platform"), /*#__PURE__*/ React.createElement("option", { value: "Facebook", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Facebook"), /*#__PURE__*/ React.createElement("option", { value: "Twitter", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("option", { value: "LinkedIn", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "LinkedIn"), /*#__PURE__*/ React.createElement("option", { value: "Instagram", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Instagram"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Post Length"), /*#__PURE__*/ React.createElement("select", { name: "postLength", className: "w-full p-2 border border-gray-300 rounded font-roboto", value: formData.postLength, onChange: handleChange, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Select Length"), /*#__PURE__*/ React.createElement("option", { value: "Short (50-150 words)", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Short (50-150 words)"), /*#__PURE__*/ React.createElement("option", { value: "Medium (150-300 words)", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Medium (150-300 words)"), /*#__PURE__*/ React.createElement("option", { value: "Long (300+ words)", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Long (300+ words)"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Number of Hashtags in the post"), /*#__PURE__*/ React.createElement("input", { name: "hashtags", className: "w-full p-2 border border-gray-300 rounded font-roboto", type: "number", value: formData.hashtags, onChange: handleChange, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Post Writing Style"), /*#__PURE__*/ React.createElement("select", { name: "writingStyle", className: "w-full p-2 border border-gray-300 rounded font-roboto", value: formData.writingStyle, onChange: handleChange, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Select Style"), /*#__PURE__*/ React.createElement("option", { value: "Casual", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Casual"), /*#__PURE__*/ React.createElement("option", { value: "Professional", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Professional"), /*#__PURE__*/ React.createElement("option", { value: "Humorous", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Humorous"), /*#__PURE__*/ React.createElement("option", { value: "Inspirational", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Inspirational"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "includeEmojis", type: "checkbox", className: "mr-2", checked: formData.includeEmojis, onChange: handleChange, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Include Emojis")), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white px-4 py-2 rounded font-roboto", onClick: handleSubmit, __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, loading ? 'Loading...' : 'Generate Posts')), /*#__PURE__*/ React.createElement("div", { className: "mt-6 font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, "Here are your generated posts:"), /*#__PURE__*/ React.createElement("div", { className: `flex flex-wrap gap-4 mt-4 ${loading ? "animate-gradient" : ""}`, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center flex flex-col items-center justify-center w-full", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/032bdfa2-2984-49f5-9ae2-5d1e3eede70f/-/format/auto/", alt: "IDEAS For Us", className: "animate-fade w-[100px]", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white font-bold font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "AI tool brought to you by IDEAS For Us")) : finalPosts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded shadow w-[400px]", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 font-roboto mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, post.text), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ImageSelectorModal, { images: [], setSelectedImageForPost: setSelectedImage, __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded font-roboto", onClick: ()=>setPreviewPost(post), __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-rocket mr-2", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }), "Post"))))), previewPost && /*#__PURE__*/ React.createElement(NewComponent, { post: previewPost, image: selectedImage, onClose: ()=>setPreviewPost(null), __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, ` @keyframes gradient { 0% { background-color: #176685; } 50% { background-color: #3DC6F3; } 100% { background-color: #009944; } } .animate-gradient { animation: gradient 3s infinite; } @keyframes fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .animate-fade { animation: fade 2s infinite; } `)); } function StoryComponent() { const samplePosts = [ { text: "Ever thought about what your backyard could really do? With edible landscaping, it could offer a tangible solution to food scarcity, turning unused spaces into productive, nutritious mini-farms, right in the heart of urban communities. Encourage the practice of 'eat your yard' and help reduce food insecurity, one garden at a time. #EdibleLandscaping #FoodSecurity..." }, { text: "Edible parks, public spaces and gardens not only create vibrant and engaging spaces but also promote community involvement and environmental stewardship. Join us in boosting awareness for sustainable food systems and be part of the change. #EdibleSpaces #CommunityUnity..." }, { text: "Edible Landscapes are about more than just aesthetics. By promoting local food production, they strengthen local economies by supporting area farmers and gardeners. Give local, eat local, and help boost your community's economy. #EdibleLandscapes #SupportLocal..." }, { text: "Dive into the world of edible landscaping, where landscape design meets agriculture. Find out how this innovative approach is not just transforming the visual appeal of places but is also offering a viable solution to the challenges of food scarcity. #EdibleLandscaping #FutureofFood..." }, { text: "Edible landscaping, it's not only about food production. It's also about connecting people with their food sources, boosting awareness for sustainability, and creating job opportunities within local communities. #EdibleLandscaping #Sustainability..." } ]; return /*#__PURE__*/ React.createElement(MainComponent, { posts: samplePosts, __source: { fileName: "", lineNumber: 166, columnNumber: 10 }, __self: this }); }