function GoogleBusinessLocator({ onSearch, loading, error, results, onSelect }) { const [query, setQuery] = useState(""); const [selectedBusiness, setSelectedBusiness] = useState(null); const [socialMediaData, setSocialMediaData] = useState(null); const [scrapingError, setScrapingError] = useState(null); const [isScrapingLoading, setIsScrapingLoading] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); if (onSearch) { onSearch(query); } }; const handleBusinessSelect = async (business)=>{ setSelectedBusiness(business); onSelect(business); if (business.website) { setIsScrapingLoading(true); setScrapingError(null); try { const response = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: business.website, getText: false }) }); const htmlContent = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(htmlContent, "text/html"); const socialData = { facebook: doc.querySelector('a[href*="facebook.com"]')?.href, twitter: doc.querySelector('a[href*="twitter.com"]')?.href, instagram: doc.querySelector('a[href*="instagram.com"]')?.href, linkedin: doc.querySelector('a[href*="linkedin.com"]')?.href, youtube: doc.querySelector('a[href*="youtube.com"]')?.href, pinterest: doc.querySelector('a[href*="pinterest.com"]')?.href, tiktok: doc.querySelector('a[href*="tiktok.com"]')?.href }; setSocialMediaData(socialData); } catch (err) { setScrapingError("Failed to scrape website for social media profiles"); } setIsScrapingLoading(false); } }; const renderSocialMedia = ()=>{ if (!socialMediaData) return null; const hasProfiles = Object.values(socialMediaData).some(Boolean); if (!hasProfiles) return null; return /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Social Media Profiles"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, Object.entries(socialMediaData).map(([platform, url])=>url && /*#__PURE__*/ React.createElement("a", { key: platform, href: url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 px-4 py-2 bg-[#F2F2F2] rounded-lg text-[#101012] hover:bg-[#D1D1D3] transition-colors", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab fa-${platform} text-xl`, __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "capitalize", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, platform))))); }; const renderPhotos = (photos)=>{ if (!photos?.length) return null; return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 mt-2", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, photos.map((photo, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: photo.photo_url, alt: "Business", className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }))); }; const renderReviews = (reviews)=>{ if (!reviews) return null; return /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "Reviews:"), Object.entries(reviews).map(([rating, count])=>/*#__PURE__*/ React.createElement("div", { key: rating, className: "flex gap-2", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "⭐", rating, ":"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, count, " reviews")))); }; const renderWorkingHours = (hours)=>{ if (!hours) return null; const daysOrder = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]; return /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, "Business Hours:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, daysOrder.map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, day, ":"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, hours[day] || "Closed"))))); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-center mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "Google Business Information Finder"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-4", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "Search businesses (e.g. Youtech or Youtech Dallas or Youtech AZ)", className: "flex-1 p-3 border rounded-lg", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this })))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, error), results?.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid gap-6", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, results.map((business)=>/*#__PURE__*/ React.createElement("div", { key: business.business_id, className: "border p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, business.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleBusinessSelect(business), className: `px-4 py-2 rounded ${selectedBusiness?.business_id === business.business_id ? "bg-green-600 text-white" : "bg-green-500 text-white hover:bg-green-600"}`, __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }), selectedBusiness?.business_id === business.business_id ? "Selected" : "Select")), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-lg mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }, "Basic Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 201, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 202, columnNumber: 23 }, __self: this }, "Place ID:"), " ", business.place_id), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 205, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 206, columnNumber: 23 }, __self: this }, "Address:"), " ", business.full_address), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 209, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 210, columnNumber: 23 }, __self: this }, "Phone:"), " ", business.phone_number), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 214, columnNumber: 23 }, __self: this }, "Rating:"), " ", business.rating, " ⭐ (", business.review_count, " reviews)"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 217, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 218, columnNumber: 23 }, __self: this }, "Status:"), " ", business.business_status), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 221, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 222, columnNumber: 23 }, __self: this }, "Type:"), " ", business.type), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 224, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 225, columnNumber: 23 }, __self: this }, "Coordinates:"), " ", business.latitude, ", ", business.longitude)), renderWorkingHours(business.working_hours), business.website && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: business.website, target: "_blank", rel: "noopener noreferrer", className: "inline-block mt-2 text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 234, columnNumber: 23 }, __self: this }, "Visit Website"), selectedBusiness?.business_id === business.business_id && renderSocialMedia(), isScrapingLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-gray-500", __source: { fileName: "", lineNumber: 245, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 246, columnNumber: 27 }, __self: this }), "Loading social media profiles..."), scrapingError && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-red-500 text-sm", __source: { fileName: "", lineNumber: 251, columnNumber: 25 }, __self: this }, scrapingError))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-lg mb-2", __source: { fileName: "", lineNumber: 260, columnNumber: 19 }, __self: this }, "Additional Details"), business.about?.summary && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, business.about.summary), business.subtypes?.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 270, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium", __source: { fileName: "", lineNumber: 271, columnNumber: 23 }, __self: this }, "Categories:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-1", __source: { fileName: "", lineNumber: 272, columnNumber: 23 }, __self: this }, business.subtypes.map((subtype, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-gray-100 px-2 py-1 rounded text-sm", __source: { fileName: "", lineNumber: 274, columnNumber: 27 }, __self: this }, subtype)))), business.hotel_review_summary && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium", __source: { fileName: "", lineNumber: 287, columnNumber: 23 }, __self: this }, "Hotel Reviews:"), Object.entries(business.hotel_review_summary).map(([category, data])=>/*#__PURE__*/ React.createElement("div", { key: category, className: "mt-2", __source: { fileName: "", lineNumber: 290, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 291, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 292, columnNumber: 31 }, __self: this }, category, ":"), " ", data.score, "/5"), data.summary.map((item, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 296, columnNumber: 31 }, __self: this }, "• ", item))))), renderReviews(business.reviews_per_rating))), renderPhotos(business.photos_sample))))); } function GoogleBusinessLocatorStory() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [results, setResults] = useState([]); const handleSearch = async (query)=>{ setLoading(true); setError(null); try { const response = await fetch(`/integrations/local-business-data/search?query=${encodeURIComponent(query)}`); const data = await response.json(); if (data.status === "OK") { setResults(data.data); } else { setError("Failed to fetch results"); } } catch (err) { setError("An error occurred while searching"); } finally{ setLoading(false); } }; const handleSelect = async (business)=>{ try { await fetch("/api/db/gmb", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `businesses` (business_id, name, address, phone, rating, review_count, website, latitude, longitude, business_status, type) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", values: [ business.business_id, business.name, business.full_address, business.phone_number, business.rating, business.review_count, business.website, business.latitude, business.longitude, business.business_status, business.type ] }) }); } catch (err) { setError("Failed to save business"); } }; return /*#__PURE__*/ React.createElement(GoogleBusinessLocator, { onSearch: handleSearch, onSelect: handleSelect, loading: loading, error: error, results: results, __source: { fileName: "", lineNumber: 374, columnNumber: 5 }, __self: this }); } function WebScrapingApp({ onScrape, initialData, error, loading }) { const [url, setUrl] = useState(""); const [scrapedData, setScrapedData] = useState(initialData || {}); const [scrapeError, setScrapeError] = useState(error || ""); const [isLoading, setIsLoading] = useState(loading || false); const extractSocialMedia = (htmlContent)=>{ const parser = new DOMParser(); const doc = parser.parseFromString(htmlContent, "text/html"); return { socialMedia: { facebook: doc.querySelector('a[href*="facebook.com"]')?.href, twitter: doc.querySelector('a[href*="twitter.com"]')?.href, instagram: doc.querySelector('a[href*="instagram.com"]')?.href, linkedin: doc.querySelector('a[href*="linkedin.com"]')?.href, youtube: doc.querySelector('a[href*="youtube.com"]')?.href, pinterest: doc.querySelector('a[href*="pinterest.com"]')?.href, tiktok: doc.querySelector('a[href*="tiktok.com"]')?.href } }; }; const handleScrape = async ()=>{ setIsLoading(true); setScrapeError(""); try { const response = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url, getText: false }) }); const htmlContent = await response.text(); const socialData = extractSocialMedia(htmlContent); setScrapedData(socialData); if (onScrape) onScrape(socialData); } catch (err) { setScrapeError("Failed to scrape website"); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-inter p-6 max-w-4xl mx-auto bg-[#FCFCFC]", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-[#101012]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Website URL"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", name: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "https://example.com", className: "flex-1 px-4 py-2 border border-[#D1D1D3] rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(ButtonStyles, { text: isLoading ? "Scraping..." : "Scrape", onClick: handleScrape, disabled: isLoading || !url, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }))), scrapeError && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, scrapeError), Object.keys(scrapedData.socialMedia || {}).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "border border-[#D1D1D3] rounded-lg p-4 mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#101012] mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Social Media Profiles"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, Object.entries(scrapedData.socialMedia).map(([platform, url])=>url && /*#__PURE__*/ React.createElement("a", { key: platform, href: url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 px-4 py-2 bg-[#F2F2F2] rounded-lg text-[#101012] hover:bg-[#D1D1D3] transition-colors", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab fa-${platform} text-xl`, __source: { fileName: "", lineNumber: 88, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "capitalize", __source: { fileName: "", lineNumber: 89, columnNumber: 23 }, __self: this }, platform))))))); } function WebScrapingAppStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WebScrapingApp, { __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this })); } function ButtonStyles({ variant = "primary", text, keyboardCommand, onClick }) { const baseClasses = "font-inter font-medium rounded-lg px-4 py-2 inline-block"; const primaryClasses = "bg-[#101012] text-white border border-[#3D3D3F]"; const secondaryClasses = "bg-transparent text-[#101012] border border-[#D1D1D3]"; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClasses} ${variant === "primary" ? primaryClasses : secondaryClasses}`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, text, keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: `ml-2 text-xs px-1.5 py-0.5 rounded ${variant === "primary" ? "bg-[#3D3D3F] text-white" : "bg-[#D1D1D3] text-[#101012]"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStylesStory() { const handleClick = ()=>{ alert('Button clicked!'); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Primary Button"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Click me", onClick: handleClick, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Primary Button with Keyboard Command"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Save", keyboardCommand: "⌘S", onClick: handleClick, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Secondary Button"), /*#__PURE__*/ React.createElement(ButtonStyles, { variant: "secondary", text: "Cancel", onClick: handleClick, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Secondary Button with Keyboard Command"), /*#__PURE__*/ React.createElement(ButtonStyles, { variant: "secondary", text: "Undo", keyboardCommand: "⌘Z", onClick: handleClick, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); } function MainComponent() { const daysOfWeek = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]; const [schemaType, setSchemaType] = useState("LocalBusiness"); const [selectedSubtypes, setSelectedSubtypes] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [formData, setFormData] = useState({}); const [output, setOutput] = useState(""); const [customUrls, setCustomUrls] = useState([ "" ]); const [businessHours, setBusinessHours] = useState(daysOfWeek.map((day)=>({ day, openTime: "", closeTime: "", isClosed: false }))); const schemaTypes = { LocalBusiness: [ { name: "name", label: "Business Name", required: true }, { name: "description", label: "Business Description", required: true }, { name: "priceRange", label: "Price Range", required: true }, { name: "telephone", label: "Phone Number", required: true }, { name: "url", label: "Website URL" }, { name: "logo", label: "logo URL" }, { name: "image", label: "Image URL" }, { name: "email", label: "Email" }, { name: "streetAddress", label: "Street Address", required: true }, { name: "addressLocality", label: "City", required: true }, { name: "addressRegion", label: "State", required: true }, { name: "postalCode", label: "Postal Code", required: true }, { name: "latitude", label: "Latitude" }, { name: "longitude", label: "Longitude" }, { name: "ratingValue", label: "Rating (0-5)" }, { name: "ratingCount", label: "Number of Ratings" }, { name: "hasMap", label: "Map URL" }, { name: "areaServed", label: "Area Served (comma-separated)" }, { name: "customUrls", label: "SameAs URLs", type: "custom" }, { name: "facebookUrl", label: "Facebook URL" }, { name: "twitterUrl", label: "Twitter URL" }, { name: "linkedinUrl", label: "LinkedIn URL" }, { name: "instagramUrl", label: "Instagram URL" }, { name: "youtubeUrl", label: "YouTube URL" }, { name: "actionUrl", label: "Action URL" }, { name: "actionText", label: "Action Text" } ], Organization: [ { name: "name", label: "Organization Name", required: true }, { name: "url", label: "Website URL", required: true }, { name: "logo", label: "Logo URL" }, { name: "description", label: "Description" } ], Person: [ { name: "name", label: "Full Name", required: true }, { name: "jobTitle", label: "Job Title" }, { name: "email", label: "Email" }, { name: "url", label: "Website" } ] }; const businessSubtypes = [ "GeneralContractor", "HomeAndConstructionBusiness", "ProfessionalService", "HVACBusiness", "Plumber", "Electrician", "RoofingContractor", "LegalService", "Attorney", "Notary", "MedicalBusiness", "HousePainter", "Locksmith", "MovingCompany", "AnimalShelter", "ArchiveOrganization", "AutomotiveBusiness", "ChildCare", "Dentist", "DryCleaningOrLaundry", "EmergencyService", "EmploymentAgency", "FireStation", "Hospital", "PoliceStation", "EntertainmentBusiness", "AdultEntertainment", "AmusementPark", "ArtGallery", "Casino", "ComedyClub", "MovieTheater", "NightClub", "FinancialService", "FoodEstablishment", "GovernmentOffice", "HealthAndBeautyBusiness", "InternetCafe", "Library", "LodgingBusiness", "RadioStation", "RealEstateAgent", "RecyclingCenter", "SelfStorage", "ShoppingCenter", "SportsActivityLocation", "Store", "TelevisionStation", "TouristInformationCenter", "TravelAgency" ]; const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [results, setResults] = useState([]); const handleSearch = async (query)=>{ setLoading(true); setError(null); try { const response = await fetch(`/integrations/local-business-data/search?query=${encodeURIComponent(query)}`); const data = await response.json(); if (data.status === "OK") { setResults(data.data); } else { setError("Failed to fetch results"); } } catch (err) { setError("An error occurred while searching"); } finally{ setLoading(false); } }; const handleBusinessSelect = (business)=>{ if (!business) return; const newFormData = { name: business.name || "", description: business.about?.summary || "", telephone: business.phone_number || "", url: business.website || "", logo: business.photos_sample?.[0]?.photo_url || "", image: business.photos_sample?.[0]?.photo_url || "", streetAddress: business.street_address || "", addressLocality: business.city || "", addressRegion: business.state || "", postalCode: business.zipcode || "", latitude: business.latitude?.toString() || "", longitude: business.longitude?.toString() || "", ratingValue: business.rating?.toString() || "", ratingCount: business.review_count?.toString() || "", hasMap: business.place_link || "", priceRange: business.price_level ? "$".repeat(business.price_level) : "", customUrls: business.sameAs?.join(",") || "", facebookUrl: "", twitterUrl: "", linkedinUrl: "", instagramUrl: "", youtubeUrl: "" }; if (business.subtypes?.length > 0) { const validSubtypes = business.subtypes.filter((subtype)=>businessSubtypes.includes(subtype)); setSelectedSubtypes(validSubtypes); } setFormData(newFormData); const newHours = [ ...businessHours ]; if (business.working_hours) { let allDaysAre24Hours = true; daysOfWeek.forEach((day, index)=>{ const hours = business.working_hours[day]; if (!hours) { newHours[index] = { day, openTime: "09:00", closeTime: "17:00", isClosed: false }; allDaysAre24Hours = false; return; } if (hours.toLowerCase().includes("closed")) { newHours[index] = { day, openTime: "", closeTime: "", isClosed: true }; allDaysAre24Hours = false; return; } if (hours.toLowerCase().includes("open 24 hours")) { newHours[index] = { day, openTime: "00:00", closeTime: "23:59", isClosed: false }; return; } const timeMatch = hours.match(/(\d{1,2}:\d{2})\s*(am|pm)?\s*-\s*(\d{1,2}:\d{2})\s*(am|pm)?/i); if (timeMatch) { const [_, openStr, openPeriod, closeStr, closePeriod] = timeMatch; const convertTo24Hour = (timeStr, period)=>{ let [hours, minutes] = timeStr.split(":").map(Number); if (period?.toLowerCase() === "pm" && hours !== 12) hours += 12; if (period?.toLowerCase() === "am" && hours === 12) hours = 0; return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`; }; newHours[index] = { day, openTime: convertTo24Hour(openStr, openPeriod), closeTime: convertTo24Hour(closeStr, closePeriod), isClosed: false }; allDaysAre24Hours = false; } else { newHours[index] = { day, openTime: "09:00", closeTime: "17:00", isClosed: false }; allDaysAre24Hours = false; } }); if (allDaysAre24Hours) { setFormData((prev)=>({ ...prev, is24x7: true })); } } setBusinessHours(newHours); }; const generateSchema = useCallback(()=>{ let schema = { "@context": "https://schema.org", "@type": schemaType, name: formData.name, description: formData.description, url: formData.url, telephone: formData.telephone, priceRange: formData.priceRange, logo: formData.logo, image: formData.image, email: formData.email }; if (schemaType === "LocalBusiness") { const customUrls = formData.customUrls ? formData.customUrls.split(",").map((url)=>url.trim()) : []; const sameAs = [ ...customUrls, formData.facebookUrl, formData.twitterUrl, formData.linkedinUrl, formData.instagramUrl, formData.youtubeUrl ].filter(Boolean); if (formData.ratingValue && formData.ratingCount) { schema.aggregateRating = { "@type": "AggregateRating", ratingValue: parseFloat(formData.ratingValue), ratingCount: parseInt(formData.ratingCount) }; } schema.address = { "@type": "PostalAddress", streetAddress: formData.streetAddress, addressLocality: formData.addressLocality, addressRegion: formData.addressRegion, postalCode: formData.postalCode, addressCountry: "US" }; if (formData.latitude && formData.longitude) { schema.geo = { "@type": "GeoCoordinates", latitude: parseFloat(formData.latitude), longitude: parseFloat(formData.longitude) }; } schema.hasMap = formData.hasMap; if (formData.is24x7) { schema.openingHoursSpecification = [ { "@type": "OpeningHoursSpecification", dayOfWeek: daysOfWeek, opens: "00:00", closes: "23:59" } ]; } else { schema.openingHoursSpecification = businessHours.filter(({ isClosed, openTime, closeTime })=>!isClosed && openTime && closeTime).map(({ day, openTime, closeTime })=>({ "@type": "OpeningHoursSpecification", dayOfWeek: day, opens: openTime, closes: closeTime })); } const cities = formData.areaServed ? formData.areaServed.split(",").map((city)=>city.trim()) : []; if (cities.length > 0) { schema.areaServed = [ { "@type": "Place", name: cities } ]; } if (sameAs.length > 0) { schema.sameAs = sameAs; } if (selectedSubtypes.length > 0) { schema["@type"] = [ "LocalBusiness", ...selectedSubtypes ]; } if (formData.actionUrl && formData.actionText) { schema.potentialAction = { "@type": "ReserveAction", target: { "@type": "EntryPoint", urlTemplate: formData.actionUrl, actionPlatform: [ "http://schema.org/DesktopWebPlatform", "http://schema.org/IOSPlatform", "http://schema.org/AndroidPlatform" ] }, result: { "@type": "Reservation", name: formData.actionText } }; } } else { schema = { ...schema, ...formData }; } setOutput(JSON.stringify(schema, null, 2)); }, [ schemaType, formData, selectedSubtypes, businessHours, daysOfWeek ]); const handleInputChange = useCallback((e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }, []); const copyToClipboard = async (text)=>{ try { await navigator.clipboard.writeText(text); } catch (err) { const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { document.execCommand("copy"); } catch (err) { console.error("Failed to copy text:", err); } document.body.removeChild(textArea); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FCFCFC] p-2 sm:p-4 md:p-8", __source: { fileName: "", lineNumber: 411, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 412, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-6 md:mb-12", __source: { fileName: "", lineNumber: 413, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center w-full", __source: { fileName: "", lineNumber: 414, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl sm:text-3xl md:text-4xl font-medium text-[#101012] font-inter", __source: { fileName: "", lineNumber: 415, columnNumber: 13 }, __self: this }, "Business Schema Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-[#777777] mt-2 text-sm sm:text-base", __source: { fileName: "", lineNumber: 418, columnNumber: 13 }, __self: this }, "Search for your business and generate schema markup in seconds"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 423, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm border border-[#D1D1D3] p-3 sm:p-4 md:p-6", __source: { fileName: "", lineNumber: 424, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 md:space-y-6", __source: { fileName: "", lineNumber: 425, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F2F2F2] p-3 sm:p-4 rounded-lg", __source: { fileName: "", lineNumber: 426, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base sm:text-lg font-medium text-[#101012] mb-3 md:mb-4", __source: { fileName: "", lineNumber: 427, columnNumber: 17 }, __self: this }, "🔍 Find Your Business"), /*#__PURE__*/ React.createElement(GoogleBusinessLocator, { onSearch: handleSearch, loading: loading, error: error, results: results, onSelect: handleBusinessSelect, __source: { fileName: "", lineNumber: 430, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#D1D1D3] pt-4 md:pt-6", __source: { fileName: "", lineNumber: 438, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base sm:text-lg font-medium text-[#101012] mb-3 md:mb-4", __source: { fileName: "", lineNumber: 439, columnNumber: 17 }, __self: this }, "⚙️ Schema Settings"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 442, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#101012] mb-2", __source: { fileName: "", lineNumber: 443, columnNumber: 19 }, __self: this }, "Schema Type"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 sm:p-3 border border-[#D1D1D3] rounded-lg bg-white hover:border-[#101012] transition-colors text-sm sm:text-base", value: schemaType, onChange: (e)=>setSchemaType(e.target.value), __source: { fileName: "", lineNumber: 446, columnNumber: 19 }, __self: this }, Object.keys(schemaTypes).map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, value: type, __source: { fileName: "", lineNumber: 452, columnNumber: 23 }, __self: this }, type)))))), schemaType === "LocalBusiness" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 461, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#101012] mb-1", __source: { fileName: "", lineNumber: 462, columnNumber: 17 }, __self: this }, "Select Subcategories")), schemaType === "LocalBusiness" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 469, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search business types...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full p-2 border border-[#D1D1D3] rounded mb-2", __source: { fileName: "", lineNumber: 470, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-2", __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this }, selectedSubtypes.map((type)=>/*#__PURE__*/ React.createElement("span", { key: type, className: "bg-[#F2F2F2] px-2 py-1 rounded-lg text-sm flex items-center gap-1", __source: { fileName: "", lineNumber: 479, columnNumber: 23 }, __self: this }, type, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedSubtypes(selectedSubtypes.filter((t)=>t !== type)), className: "text-[#777777] hover:text-[#101012]", __source: { fileName: "", lineNumber: 484, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 492, columnNumber: 27 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "max-h-40 overflow-y-auto border border-[#D1D1D3] rounded", __source: { fileName: "", lineNumber: 497, columnNumber: 19 }, __self: this }, businessSubtypes.filter((type)=>type.toLowerCase().includes(searchTerm.toLowerCase())).map((subtype)=>/*#__PURE__*/ React.createElement("div", { key: subtype, className: "p-2 hover:bg-[#F2F2F2] cursor-pointer flex items-center gap-2", onClick: ()=>{ if (!selectedSubtypes.includes(subtype)) { setSelectedSubtypes([ ...selectedSubtypes, subtype ]); } }, __source: { fileName: "", lineNumber: 503, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: selectedSubtypes.includes(subtype), onChange: ()=>{}, className: "h-4 w-4", __source: { fileName: "", lineNumber: 515, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 521, columnNumber: 27 }, __self: this }, subtype))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 526, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#101012] mb-1", __source: { fileName: "", lineNumber: 527, columnNumber: 19 }, __self: this }, "Business Hours"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 530, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-4", __source: { fileName: "", lineNumber: 531, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "is24x7", name: "is24x7", checked: formData.is24x7 || false, onChange: (e)=>handleInputChange({ target: { name: "is24x7", value: e.target.checked } }), className: "h-4 w-4", __source: { fileName: "", lineNumber: 532, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "is24x7", className: "text-sm text-[#777777]", __source: { fileName: "", lineNumber: 547, columnNumber: 23 }, __self: this }, "Open 24/7")), businessHours.map((hours, index)=>/*#__PURE__*/ React.createElement("div", { key: hours.day, className: "flex flex-wrap md:flex-nowrap gap-4 items-center p-4 bg-[#F2F2F2] rounded-lg", __source: { fileName: "", lineNumber: 555, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-24 font-medium text-[#101012]", __source: { fileName: "", lineNumber: 559, columnNumber: 25 }, __self: this }, hours.day), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 items-center", __source: { fileName: "", lineNumber: 562, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-[#777777]", __source: { fileName: "", lineNumber: 563, columnNumber: 27 }, __self: this }, "Opens:"), /*#__PURE__*/ React.createElement("input", { type: "time", className: "p-2 border border-[#D1D1D3] rounded bg-white", value: hours.openTime, onChange: (e)=>{ const newHours = [ ...businessHours ]; newHours[index] = { ...hours, openTime: e.target.value }; setBusinessHours(newHours); }, disabled: formData.is24x7 || hours.isClosed, __source: { fileName: "", lineNumber: 566, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 items-center", __source: { fileName: "", lineNumber: 581, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-[#777777]", __source: { fileName: "", lineNumber: 582, columnNumber: 27 }, __self: this }, "Closes:"), /*#__PURE__*/ React.createElement("input", { type: "time", className: "p-2 border border-[#D1D1D3] rounded bg-white", value: hours.closeTime, onChange: (e)=>{ const newHours = [ ...businessHours ]; newHours[index] = { ...hours, closeTime: e.target.value }; setBusinessHours(newHours); }, disabled: formData.is24x7 || hours.isClosed, __source: { fileName: "", lineNumber: 585, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 ml-auto", __source: { fileName: "", lineNumber: 600, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: hours.isClosed, onChange: (e)=>{ const newHours = [ ...businessHours ]; newHours[index] = { ...hours, isClosed: e.target.checked }; setBusinessHours(newHours); }, disabled: formData.is24x7, className: "h-4 w-4", __source: { fileName: "", lineNumber: 601, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#777777]", __source: { fileName: "", lineNumber: 615, columnNumber: 27 }, __self: this }, "Closed"))))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 624, columnNumber: 13 }, __self: this }, schemaTypes[schemaType].map((field)=>/*#__PURE__*/ React.createElement("div", { key: field.name, __source: { fileName: "", lineNumber: 626, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#101012] mb-1", __source: { fileName: "", lineNumber: 627, columnNumber: 19 }, __self: this }, field.label, " ", field.required && /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 629, columnNumber: 40 }, __self: this }, "*")), field.type === "custom" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 632, columnNumber: 21 }, __self: this }, customUrls.map((url, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex gap-2", __source: { fileName: "", lineNumber: 634, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: url, onChange: (e)=>{ const newUrls = [ ...customUrls ]; newUrls[index] = e.target.value; setCustomUrls(newUrls); setFormData((prev)=>({ ...prev, customUrls: newUrls.filter(Boolean).join(",") })); }, className: "flex-1 p-2 border border-[#D1D1D3] rounded", placeholder: "Enter URL", __source: { fileName: "", lineNumber: 635, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const newUrls = customUrls.filter((_, i)=>i !== index); setCustomUrls(newUrls); setFormData((prev)=>({ ...prev, customUrls: newUrls.filter(Boolean).join(",") })); }, className: "text-[#777777] hover:text-[#101012] px-2", type: "button", __source: { fileName: "", lineNumber: 650, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 664, columnNumber: 29 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCustomUrls([ ...customUrls, "" ]), className: "text-[#101012] hover:text-[#777777] flex items-center gap-2", type: "button", __source: { fileName: "", lineNumber: 668, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 673, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 674, columnNumber: 25 }, __self: this }, "Add URL"))) : field.type === "checkbox" ? /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: field.name, className: "p-2 border border-[#D1D1D3] rounded", checked: formData[field.name] || false, onChange: (e)=>handleInputChange({ target: { name: field.name, value: e.target.checked } }), __source: { fileName: "", lineNumber: 678, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("input", { type: "text", name: field.name, className: "w-full p-2 border border-[#D1D1D3] rounded", value: formData[field.name] || "", onChange: handleInputChange, required: field.required, __source: { fileName: "", lineNumber: 693, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 md:mt-8", __source: { fileName: "", lineNumber: 706, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Generate Schema", onClick: generateSchema, variant: "primary", __source: { fileName: "", lineNumber: 707, columnNumber: 15 }, __self: this }))), output && /*#__PURE__*/ React.createElement("div", { className: "bg-[#101012] rounded-xl shadow-sm p-3 sm:p-4 md:p-6 h-fit lg:sticky lg:top-8", __source: { fileName: "", lineNumber: 716, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-3 md:mb-4", __source: { fileName: "", lineNumber: 717, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-code text-white", __source: { fileName: "", lineNumber: 718, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-white font-medium text-sm sm:text-base", __source: { fileName: "", lineNumber: 719, columnNumber: 17 }, __self: this }, "Generated Schema")), /*#__PURE__*/ React.createElement("pre", { className: "text-green-400 overflow-x-auto bg-[#1E1E20] rounded-lg p-3 sm:p-4 text-xs sm:text-sm", __source: { fileName: "", lineNumber: 723, columnNumber: 15 }, __self: this }, output), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-4 md:mt-6", __source: { fileName: "", lineNumber: 726, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Copy Code", onClick: ()=>copyToClipboard(``), variant: "primary", __source: { fileName: "", lineNumber: 727, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Validate Schema", onClick: ()=>window.open("https://validator.schema.org/", "_blank"), variant: "primary", __source: { fileName: "", lineNumber: 736, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Google Rich Results", onClick: ()=>window.open("https://search.google.com/test/rich-results", "_blank"), variant: "primary", __source: { fileName: "", lineNumber: 743, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 text-center text-[#777777] text-sm pb-4", __source: { fileName: "", lineNumber: 758, columnNumber: 7 }, __self: this }, "Created by Dhruv Pandya"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 761, columnNumber: 7 }, __self: this }, ` :root { font-family: 'Inter', sans-serif; } `)); }