function FormSuggestTool({ suggestUrl = "", onUrlChange, onSubmit, suggestMessage = null, onCancel, suggestLoading = false, selectedCategories = [], onCategoryChange, filters = {}, onFilterChange, selectedFeatures = [], onFeatureChange }) { const [features, setFeatures] = useState([]); const [categories, setCategories] = useState([]); const handleSubmit = async (e)=>{ e.preventDefault(); if (!suggestUrl) { onSubmit({ success: false, message: "Please enter a valid URL", type: "error" }); return; } const data = { url: suggestUrl, categories: selectedCategories, features: selectedFeatures, allows_own_llm_key: filters.customLLMKey || false, has_visual_editor: filters.hasVisualEditor || false, is_open_source: filters.openSource || false, supports_backend: filters.backendSupport || false }; await onSubmit(data); }; useEffect(()=>{ const handleEscKey = (event)=>{ if (event.key === "Escape") { onCancel(); } }; window.addEventListener("keydown", handleEscKey); return ()=>{ window.removeEventListener("keydown", handleEscKey); }; }, [ onCancel ]); useEffect(()=>{ const fetchFeaturesAndCategories = async ()=>{ try { const response = await fetch("/api/get-features", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error("Failed to fetch features and categories"); } const data = await response.json(); setFeatures(data.features); setCategories(data.features.filter((feature)=>feature.is_category)); } catch (error) { console.error("Error fetching features and categories:", error); } }; fetchFeaturesAndCategories(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 backdrop-blur-sm border border-purple-500/10 rounded-lg p-8 max-w-2xl w-full mx-4 relative", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onCancel, className: "absolute top-4 right-4 text-gray-400 hover:text-white transition-colors", "aria-label": "Close", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, "Suggest a Tool"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-300 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Tool URL ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 108, columnNumber: 22 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "url", value: suggestUrl, onChange: (e)=>onUrlChange(e), placeholder: "https://example.com", className: "w-full px-3 py-2 bg-gray-900/50 border border-gray-700/50 rounded-md text-white placeholder-gray-400 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50", required: true, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(ToolFilters, { selectedCategories: selectedCategories, onCategoryChange: onCategoryChange, filters: filters, onFilterChange: onFilterChange, className: "mb-6", preventSubmit: true, __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }), suggestMessage && /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-md mb-4 ${suggestMessage.type === "success" ? "bg-green-900/20 text-green-300 border border-green-500/20" : "bg-red-900/20 text-red-300 border border-red-500/20"}`, __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, suggestMessage.text, suggestMessage.details && /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2 opacity-80", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, suggestMessage.details)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onCancel, className: "px-4 py-2 text-gray-300 hover:bg-gray-700/50 rounded-md transition-colors", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: suggestLoading, className: "px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium rounded-md transition-all duration-300 disabled:opacity-50", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, suggestLoading ? "Suggesting..." : "Suggest Tool")))); } function FormSuggestToolStory() { const [suggestUrl, setSuggestUrl] = useState(""); const [suggestMessage, setSuggestMessage] = useState(null); const [suggestLoading, setSuggestLoading] = useState(false); const [selectedCategories, setSelectedCategories] = useState([]); const [selectedFeatures, setSelectedFeatures] = useState([]); const [filters, setFilters] = useState({ customLLMKey: false, hasVisualEditor: false, openSource: false, backendSupport: false }); const handleUrlChange = (e)=>setSuggestUrl(e.target.value); const handleSubmit = async (data)=>{ setSuggestLoading(true); setSuggestMessage(null); try { const response = await fetch("/api/suggest-tool", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); const result = await response.json(); setSuggestMessage({ type: result.success ? "success" : "error", text: result.message, details: result.details }); if (result.success) { setSuggestUrl(""); } } catch (error) { setSuggestMessage({ type: "error", text: "Error suggesting tool. Please try again." }); } finally{ setSuggestLoading(false); } }; const handleCategoryChange = (categoryId)=>{ setSelectedCategories((prev)=>prev.includes(categoryId) ? prev.filter((id)=>id !== categoryId) : [ ...prev, categoryId ]); }; const handleFeatureChange = (featureId)=>{ setSelectedFeatures((prev)=>prev.includes(featureId) ? prev.filter((id)=>id !== featureId) : [ ...prev, featureId ]); }; const handleFilterChange = (filterName, value)=>{ setFilters((prev)=>({ ...prev, [filterName]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 min-h-screen bg-gray-900", __source: { fileName: "", lineNumber: 238, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 239, columnNumber: 7 }, __self: this }, "Suggest a Tool Component Demo"), /*#__PURE__*/ React.createElement(FormSuggestTool, { suggestUrl: suggestUrl, onUrlChange: handleUrlChange, onSubmit: handleSubmit, suggestMessage: suggestMessage, onCancel: ()=>{ setSuggestUrl(""); setSuggestMessage(null); }, suggestLoading: suggestLoading, selectedCategories: selectedCategories, onCategoryChange: handleCategoryChange, filters: filters, onFilterChange: handleFilterChange, selectedFeatures: selectedFeatures, onFeatureChange: handleFeatureChange, __source: { fileName: "", lineNumber: 243, columnNumber: 7 }, __self: this })); } function ToolFilters({ selectedCategories = [], onCategoryChange, filters = {}, onFilterChange, className = "", preventSubmit = false }) { const { categories, features, loading, error } = React.useContext(FeaturesContext); const handleCategoryClick = (e, categoryId)=>{ if (preventSubmit) { e.preventDefault(); e.stopPropagation(); } onCategoryChange(categoryId); }; const handleFilterClick = (e, filterName, value)=>{ if (preventSubmit) { e.preventDefault(); e.stopPropagation(); } onFilterChange(filterName, value); }; if (loading && !categories?.length && !features?.length) { return /*#__PURE__*/ React.createElement("div", { className: className, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 border-2 border-t-purple-600 border-r-purple-600 border-b-transparent border-l-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-gray-400", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Loading filters..."))); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: className, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-900/20 border border-red-500/20 rounded-lg text-red-300", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Error loading filters. Please try again.")); } return /*#__PURE__*/ React.createElement("div", { className: className, __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-400 mb-3", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, Array.isArray(categories) && categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: (e)=>handleCategoryClick(e, category.id), className: ` px-4 py-2 rounded-lg text-sm font-medium transition-all ${selectedCategories.includes(category.id) ? "bg-purple-600/90 text-white border-2 border-purple-400" : "bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700"} `, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, category.icon, " ", category.name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-400 mb-3", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, Array.isArray(features) && features.map((feature)=>/*#__PURE__*/ React.createElement("button", { key: feature.id, onClick: (e)=>handleFilterClick(e, feature.feature_key, !filters[feature.feature_key]), className: ` px-4 py-2 rounded-lg text-sm font-medium transition-all ${filters[feature.feature_key] ? "bg-purple-600/90 text-white border-2 border-purple-400" : "bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700"} `, __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, feature.icon, " ", feature.name))))); } function ToolFiltersStory() { const { features } = React.useContext(FeaturesContext); const [selectedCategories, setSelectedCategories] = useState([]); const [filters, setFilters] = useState(()=>{ const initialFilters = {}; features.forEach((feature)=>{ initialFilters[feature.feature_key] = false; }); return initialFilters; }); const handleCategoryChange = (categoryId)=>{ setSelectedCategories((prev)=>prev.includes(categoryId) ? prev.filter((id)=>id !== categoryId) : [ ...prev, categoryId ]); }; const handleFilterChange = (filterName, value)=>{ setFilters((prev)=>({ ...prev, [filterName]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, "Tool Filters Demo"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg text-white mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, "Default Behavior"), /*#__PURE__*/ React.createElement(ToolFilters, { selectedCategories: selectedCategories, onCategoryChange: handleCategoryChange, filters: filters, onFilterChange: handleFilterChange, __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg text-white mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, "With Prevent Submit"), /*#__PURE__*/ React.createElement(ToolFilters, { selectedCategories: selectedCategories, onCategoryChange: handleCategoryChange, filters: filters, onFilterChange: handleFilterChange, preventSubmit: true, __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, "Current State:"), /*#__PURE__*/ React.createElement("pre", { className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, JSON.stringify({ selectedCategories, filters }, null, 2)))); } function CardTool({ categoryNames = [], categoryIcons = [], isOpenSource = false, hasDeploy = false, hasFreePlan = false, name = "Tool Name", description = "No description available", title = null, description_meta = null, hasVisualEditor = false, allowsOwnLLMKey = false, supportsBackend = false, url = "#", isFeatured = false, toolId = null, onReportClick, showReportForm = false, onReportSubmit, onReportCancel, reportLoading = false, reportMessage = null }) { const CATEGORY_ICONS = { "Extensions for IDE": "🧩", IDE: "⚙️", Terminal: "💻", "Web Builder": "🌐", "Custom LLM Key": "🔑", "Visual Editor": "🎨", "Open Source": "📖", "Backend Support": "⚡", "Product Manager": "🗺️", "Product Designer": "🖼️", Developer: "💻" }; const getCategoryIcon = (categoryName)=>{ return CATEGORY_ICONS[categoryName] || "•"; }; const truncateText = (text, maxLength)=>{ if (!text) return ""; if (text.length <= maxLength) return text; return text.substring(0, maxLength).trim() + "..."; }; return /*#__PURE__*/ React.createElement("div", { className: ` group relative overflow-hidden rounded-xl ${isFeatured ? "bg-gradient-to-br from-purple-900/90 to-gray-800/90 border-purple-500/50" : "bg-gray-800/80 border-gray-700/50"} backdrop-blur-sm border hover:border-purple-500/50 transition-all duration-300 shadow-lg hover:shadow-purple-500/20 flex flex-col h-full `, __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 flex flex-col flex-grow", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-grow", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, isFeatured && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/20 text-purple-300 border border-purple-500/30", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "⭐ Featured"), categoryNames.map((name, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-700/70 text-gray-300 border border-gray-600/50 whitespace-nowrap", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, getCategoryIcon(name), " ", name))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, name), title && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm mb-3 italic truncate", title: title, __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "absolute opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10 bottom-full left-0 mb-2 bg-gray-900 text-white text-sm rounded-lg p-3 shadow-xl max-w-xs pointer-events-none", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, title, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[-6px] left-4 w-3 h-3 bg-gray-900 transform rotate-45", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative group/desc", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, truncateText(description_meta || description, 90)), (description_meta || description)?.length > 90 && /*#__PURE__*/ React.createElement("div", { className: "absolute opacity-0 group-hover/desc:opacity-100 invisible group-hover/desc:visible transition-opacity duration-200 z-10 bottom-full left-0 mb-2 bg-gray-900 text-white text-sm rounded-lg p-3 shadow-xl max-w-xs pointer-events-none", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, description_meta || description, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[-6px] left-4 w-3 h-3 bg-gray-900 transform rotate-45", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, hasVisualEditor && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-blue-900/50 text-blue-300 rounded border border-blue-500/30", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "🎨 Visual Editor"), allowsOwnLLMKey && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-purple-900/50 text-purple-300 rounded border border-purple-500/30", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "🔑 Custom LLM Key"), supportsBackend && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-yellow-900/50 text-yellow-300 rounded border border-yellow-500/30", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "⚡ Backend Support"), isOpenSource && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-green-900/50 text-green-300 rounded border border-green-500/30", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "📖 Open Source"), hasDeploy && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-red-900/50 text-red-300 rounded border border-red-500/30", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "🚀 Deploy"), hasFreePlan && /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-teal-900/50 text-teal-300 rounded border border-teal-500/30", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, "🆓 Free Plan"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center w-full px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium rounded-lg transition-all duration-300 transform group-hover:scale-[1.02]", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, "Open", /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 ml-1 transition-transform group-hover:translate-x-1", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { fillRule: "evenodd", d: "M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z", clipRule: "evenodd", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }))))), onReportClick && /*#__PURE__*/ React.createElement("button", { onClick: ()=>onReportClick(toolId, name, { categories: categoryNames, isOpenSource, hasVisualEditor, allowsOwnLLMKey, supportsBackend, hasDeploy, hasFreePlan }), className: "absolute top-2 right-2 text-gray-400 hover:text-gray-200 transition-colors p-1 rounded-full bg-gray-800/50 hover:bg-gray-700/70 text-xs", title: "Report issue or suggest change", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }))), showReportForm && /*#__PURE__*/ React.createElement(ReportToolForm, { toolId: toolId, toolName: name, categories: categoryNames.map((name, index)=>({ id: index, name })), features: [ { id: "1", name: "Open Source", feature_key: "isOpenSource" }, { id: "2", name: "Visual Editor", feature_key: "hasVisualEditor" }, { id: "3", name: "Custom LLM Key", feature_key: "allowsOwnLLMKey" }, { id: "4", name: "Backend Support", feature_key: "supportsBackend" } ], onSubmit: onReportSubmit, onCancel: onReportCancel, loading: reportLoading, message: reportMessage, __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this })); } function CardToolStory() { const handleReportClick = (toolId, name, details)=>{ console.log("Report clicked:", { toolId, name, details }); }; const handleReportSubmit = (data)=>{ console.log("Report submitted:", data); }; const handleReportCancel = ()=>{ console.log("Report cancelled"); }; const defaultProps = { name: "Example Tool", description: "This is a sample tool description that demonstrates the card's layout and features.", url: "https://example.com", categoryNames: [ "IDE", "Web Builder" ], isOpenSource: true, hasVisualEditor: true, allowsOwnLLMKey: true, supportsBackend: true, hasDeploy: true, hasFreePlan: true, toolId: "123", onReportClick: handleReportClick, showReportForm: true, onReportSubmit: handleReportSubmit, onReportCancel: handleReportCancel, reportLoading: false, reportMessage: null }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 265, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 266, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-8", __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this }, "Card Tool Variants"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Default"), /*#__PURE__*/ React.createElement(CardTool, { ...defaultProps, __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-4", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, "Featured"), /*#__PURE__*/ React.createElement(CardTool, { ...defaultProps, isFeatured: true, __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-4", __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }, "With Long Description"), /*#__PURE__*/ React.createElement(CardTool, { ...defaultProps, description: "This is a very long description that demonstrates how the card handles overflow text. It should truncate after a certain length and show the full text on hover.", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 292, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-4", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, "Minimal Features"), /*#__PURE__*/ React.createElement(CardTool, { ...defaultProps, isOpenSource: false, hasVisualEditor: false, allowsOwnLLMKey: false, supportsBackend: false, hasDeploy: false, hasFreePlan: false, __source: { fileName: "", lineNumber: 296, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-4", __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, "Without Report Button"), /*#__PURE__*/ React.createElement(CardTool, { ...defaultProps, onReportClick: null, __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-4", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, "With Title & Meta Description"), /*#__PURE__*/ React.createElement(CardTool, { ...defaultProps, title: "Official Tool Title", description_meta: "This is the meta description from the tool's website.", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }))))); } function FormContact({ title = "Contact Me", contactForm, onContactFormChange, onSubmit, contactMessage, contactLoading, onCancel }) { const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(); }; useEffect(()=>{ const handleEscKey = (event)=>{ if (event.key === "Escape") { onCancel(); } }; window.addEventListener("keydown", handleEscKey); return ()=>{ window.removeEventListener("keydown", handleEscKey); }; }, [ onCancel ]); const isSuccess = contactMessage && contactMessage.type === "success"; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 backdrop-blur-sm border border-purple-500/10 rounded-lg p-8 max-w-lg w-full mx-4 relative", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onCancel, className: "absolute top-4 right-4 text-gray-400 hover:text-white transition-colors", "aria-label": "Close", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, title), !isSuccess && /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-gray-300 text-sm bg-gray-800/50 backdrop-blur-sm border border-purple-500/20 p-4 rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-1 text-gray-300/90", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Feedback and suggestions for the directory"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Partnership or featuring a tool"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Any other questions or ideas"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-300 text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: contactForm.name, onChange: (e)=>onContactFormChange({ ...contactForm, name: e.target.value }), className: "w-full px-3 py-2 bg-gray-900/50 border border-gray-700/50 rounded-md text-white placeholder-gray-400 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50", placeholder: "Your name", required: true, disabled: isSuccess, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-300 text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: contactForm.email, onChange: (e)=>onContactFormChange({ ...contactForm, email: e.target.value }), className: "w-full px-3 py-2 bg-gray-900/50 border border-gray-700/50 rounded-md text-white placeholder-gray-400 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50", placeholder: "your@email.com", required: true, disabled: isSuccess, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-300 text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { name: "message", value: contactForm.message, onChange: (e)=>onContactFormChange({ ...contactForm, message: e.target.value }), className: "w-full px-3 py-2 bg-gray-900/50 border border-gray-700/50 rounded-md text-white placeholder-gray-400 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50 h-32", placeholder: "Your message", required: true, disabled: isSuccess, __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }))), contactMessage && /*#__PURE__*/ React.createElement("div", { className: `mt-4 p-4 rounded-md ${contactMessage.type === "success" ? "bg-green-900/20 text-green-300 border border-green-500/20" : "bg-red-900/20 text-red-300 border border-red-500/20"}`, __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, contactMessage.text), contactMessage.details && /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2 opacity-80", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, contactMessage.details)), (!contactMessage || contactMessage.type !== "success") && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4 mt-6", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onCancel, className: "px-4 py-2 text-gray-300 hover:bg-gray-700/50 rounded-md transition-colors", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Close"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: contactLoading, className: "px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium rounded-md transition-all duration-300 disabled:opacity-50", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, contactLoading ? "Sending..." : "Send Message")), contactMessage && contactMessage.type === "success" && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-6", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onCancel, className: "px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium rounded-md transition-all duration-300", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "Close")))); } function FormContactStory() { const [contactForm, setContactForm] = useState({ name: "", email: "", message: "" }); const [contactMessage, setContactMessage] = useState(null); const [contactLoading, setContactLoading] = useState(false); const handleContactSubmit = async ()=>{ setContactLoading(true); setContactMessage(null); try { const response = await fetch("/api/save-contact-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(contactForm) }); const data = await response.json(); if (!response.ok) { throw new Error(data.message || `Error: ${response.status}`); } setContactMessage({ type: "success", text: data.message, details: data.details }); setContactForm({ name: "", email: "", message: "" }); } catch (error) { console.error("Error sending message:", error); setContactMessage({ type: "error", text: "Error sending message", details: error.message || "Please try again later" }); } finally{ setContactLoading(false); } }; const handleCancel = ()=>{ setContactForm({ name: "", email: "", message: "" }); setContactMessage(null); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-gray-900", __source: { fileName: "", lineNumber: 222, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 223, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-white mb-4", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(FormContact, { contactForm: contactForm, onContactFormChange: setContactForm, onSubmit: handleContactSubmit, contactMessage: contactMessage, contactLoading: contactLoading, onCancel: handleCancel, __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 235, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-white mb-4", __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }, "With Success Message"), /*#__PURE__*/ React.createElement(FormContact, { contactForm: contactForm, onContactFormChange: setContactForm, onSubmit: handleContactSubmit, contactMessage: { type: "success", text: "Message sent successfully", details: "You will receive an email confirmation" }, contactLoading: false, onCancel: handleCancel, __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 253, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-white mb-4", __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this }, "With Error Message"), /*#__PURE__*/ React.createElement(FormContact, { contactForm: contactForm, onContactFormChange: setContactForm, onSubmit: handleContactSubmit, contactMessage: { type: "error", text: "Failed to send message", details: "Please try again later" }, contactLoading: false, onCancel: handleCancel, __source: { fileName: "", lineNumber: 257, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 271, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-white mb-4", __source: { fileName: "", lineNumber: 272, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(FormContact, { contactForm: contactForm, onContactFormChange: setContactForm, onSubmit: handleContactSubmit, contactMessage: null, contactLoading: true, onCancel: handleCancel, __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }))); } const FeaturesContext = React.createContext({ features: [], categories: [], loading: true, error: null, refreshFeatures: ()=>{} }); function FeaturesContext1({ children }) { const [features, setFeatures] = useState([]); const [categories, setCategories] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchFeaturesAndCategories = async ()=>{ try { setLoading(true); setError(null); const response = await fetch("/api/get-features", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error(`Error fetching features: ${response.status}`); } const data = await response.json(); if (!data.features) { throw new Error("Invalid features data"); } const categories = data.features.filter((feature)=>feature.is_category); const featuresList = data.features.filter((feature)=>!feature.is_category); setCategories(categories); setFeatures(featuresList); } catch (error) { console.error("Error fetching features and categories:", error); setError("Failed to load features and categories"); } finally{ setLoading(false); } }; useEffect(()=>{ fetchFeaturesAndCategories(); }, []); const value = { features, categories, loading, error, refreshFeatures: fetchFeaturesAndCategories }; return /*#__PURE__*/ React.createElement(React.Fragment, null); } function FeaturesContext1Story() { const ExampleChild = ()=>{ const { features, categories, loading, error } = useFeatures(); if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-purple-500 mx-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-center mt-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Loading features...")); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-900/20 border border-red-500/20 rounded-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-300", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, error)); } return /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 rounded-lg", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("span", { key: category.id, className: "px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 rounded-lg", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, features.map((feature)=>/*#__PURE__*/ React.createElement("span", { key: feature.id, className: "px-3 py-1 bg-purple-900/50 text-purple-300 rounded-full text-sm", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, feature.name))))); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-8", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, "Features Context Demo"), /*#__PURE__*/ React.createElement(FeaturesContext1, { __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ExampleChild, { __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }))); } function StylizedButton({ text, onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "px-4 py-2 rounded text-black font-semibold bg-[#A3E636] border border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function StylizedButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylizedButton, { text: "Click me!", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylizedButton, { text: "Submit", onClick: ()=>alert('Submitted!'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylizedButton, { text: "Cancel", onClick: ()=>alert('Cancelled!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function FormSubscribeEmail({ subscribeEmail, onEmailChange, onSubmit, subscribeLoading, subscribeMessage, subscribeSuccess }) { // Verificar se devemos mostrar o formulário ou apenas a mensagem de sucesso const showForm = !subscribeSuccess && !(subscribeMessage?.type === "info"); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 backdrop-blur-sm border border-purple-500/10 rounded-lg p-3", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, showForm ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: subscribeEmail, onChange: (e)=>onEmailChange(e), placeholder: "Stay updated with new AI tools", className: "w-full px-3 py-2 bg-gray-900/50 border border-gray-700/50 rounded-md text-white placeholder-gray-400 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50", required: true, __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: subscribeLoading, className: "w-full sm:w-auto px-4 py-2 bg-purple-600/80 hover:bg-purple-600 text-white text-sm font-medium rounded-md transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, subscribeLoading ? "Subscribing..." : "Subscribe")), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-1 text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "once a week max, no spam", subscribeMessage?.type === "error" && /*#__PURE__*/ React.createElement("span", { className: "block mt-2 text-red-400", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, subscribeMessage.text))) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-2", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, subscribeMessage && /*#__PURE__*/ React.createElement("div", { className: ` ${subscribeMessage.type === "success" ? "text-green-400" : ""} ${subscribeMessage.type === "info" ? "text-blue-400" : ""} font-medium text-sm `, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, subscribeMessage.text))); } function FormSubscribeEmailStory() { const [subscribeEmail, setSubscribeEmail] = React.useState(""); const [subscribeLoading, setSubscribeLoading] = React.useState(false); const [subscribeMessage, setSubscribeMessage] = React.useState(null); const [subscribeSuccess, setSubscribeSuccess] = React.useState(false); const handleEmailChange = (e)=>setSubscribeEmail(e.target.value); const handleSubmit = async (e)=>{ e.preventDefault(); setSubscribeLoading(true); setSubscribeMessage(null); try { const response = await fetch("/api/subscribe-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: subscribeEmail }) }); const data = await response.json(); if (data.success) { setSubscribeSuccess(true); setSubscribeMessage({ type: "success", text: "Welcome aboard! 🎉 You're now subscribed to our updates." }); setSubscribeEmail(""); } else if (data.alreadySubscribed) { setSubscribeMessage({ type: "info", text: "Looks like you're already part of our community! You'll continue receiving our updates." }); } else { setSubscribeMessage({ type: "error", text: data.message || "Something went wrong. Please try again." }); } } catch (error) { console.error("Subscribe error:", error); setSubscribeMessage({ type: "error", text: "Connection error. Please check your internet and try again." }); } finally{ setSubscribeLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FormSubscribeEmail, { subscribeEmail: subscribeEmail, onEmailChange: handleEmailChange, onSubmit: handleSubmit, subscribeLoading: subscribeLoading, subscribeMessage: subscribeMessage, subscribeSuccess: subscribeSuccess, __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this })); } function ReportToolForm({ toolId, toolName, categories = [], features = [], onSubmit, onCancel, loading = false, message = null }) { const [formData, setFormData] = useState({ description: "", selectedCategories: [], isOpenSource: false, hasVisualEditor: false, allowsOwnLLMKey: false, supportsBackend: false }); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setFormData((prev)=>({ ...prev, [name]: type === "checkbox" ? checked : value })); }; const handleCategoryChange = (categoryId)=>{ setFormData((prev)=>({ ...prev, selectedCategories: prev.selectedCategories.includes(categoryId) ? prev.selectedCategories.filter((id)=>id !== categoryId) : [ ...prev.selectedCategories, categoryId ] })); }; const handleSubmit = (e)=>{ e.preventDefault(); onSubmit({ toolId, description: formData.description, categories: formData.selectedCategories, is_open_source: formData.isOpenSource, has_visual_editor: formData.hasVisualEditor, allows_own_llm_key: formData.allowsOwnLLMKey, supports_backend: formData.supportsBackend }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#E0E7F1] border border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] rounded-lg p-6 w-full max-w-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Report Tool Issue"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Tool Name"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, toolName)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { name: "description", value: formData.description, onChange: handleChange, className: "w-full px-3 py-2 border border-black rounded-md", placeholder: "Describe the issue or suggestion", required: true, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, type: "button", onClick: ()=>handleCategoryChange(category.id), className: `px-3 py-1 border border-black rounded-md ${formData.selectedCategories.includes(category.id) ? "bg-purple-600 text-white" : "bg-white text-black"}`, __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, features.map((feature)=>/*#__PURE__*/ React.createElement("label", { key: feature.id, className: "flex items-center", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: feature.feature_key, checked: formData[feature.feature_key], onChange: handleChange, className: "mr-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }), feature.name)))), message && /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-md mb-4 ${message.type === "success" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`, __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onCancel, className: "px-4 py-2 border border-black rounded-md bg-white text-black", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "px-4 py-2 border border-black rounded-md bg-[#A3E636] text-black font-semibold", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, loading ? "Submitting..." : "Submit Report")))); } function ReportToolFormStory() { const handleSubmit = (data)=>{ console.log("Report submitted:", data); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-8", __source: { fileName: "", lineNumber: 143, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReportToolForm, { toolId: "1", toolName: "Example Tool", categories: [ { id: "1", name: "Category 1" }, { id: "2", name: "Category 2" } ], features: [ { id: "1", name: "Open Source", feature_key: "isOpenSource" }, { id: "2", name: "Visual Editor", feature_key: "hasVisualEditor" } ], onSubmit: handleSubmit, onCancel: ()=>console.log("Cancelled"), loading: false, message: null, __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ReportToolForm, { toolId: "2", toolName: "Another Tool", categories: [ { id: "1", name: "Category 1" }, { id: "2", name: "Category 2" } ], features: [ { id: "1", name: "Open Source", feature_key: "isOpenSource" }, { id: "2", name: "Visual Editor", feature_key: "hasVisualEditor" } ], onSubmit: handleSubmit, onCancel: ()=>console.log("Cancelled"), loading: true, message: { type: "success", text: "Report submitted successfully!" }, __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tools, setTools] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showSuggestModal, setShowSuggestModal] = useState(false); const [showSubscribeModal, setShowSubscribeModal] = useState(false); const [showContactModal, setShowContactModal] = useState(false); const [showReportModal, setShowReportModal] = useState(false); const [contactForm, setContactForm] = useState({ name: "", email: "", message: "" }); const [contactLoading, setContactLoading] = useState(false); const [contactMessage, setContactMessage] = useState(null); const [suggestUrl, setSuggestUrl] = useState(""); const [suggestMessage, setSuggestMessage] = useState(null); const [suggestLoading, setSuggestLoading] = useState(false); const [suggestFormCategories, setSuggestFormCategories] = useState([]); const [suggestFormFeatures, setSuggestFormFeatures] = useState([]); const [suggestFormFilters, setSuggestFormFilters] = useState({}); const [subscribeEmail, setSubscribeEmail] = useState(""); const [subscribeMessage, setSubscribeMessage] = useState(null); const [subscribeLoading, setSubscribeLoading] = useState(false); const [subscribeSuccess, setSubscribeSuccess] = useState(false); const { data: user, loading: authLoading } = useUser(); const [showAuth, setShowAuth] = useState(false); const [selectedToolForReport, setSelectedToolForReport] = useState(null); const [reportFormData, setReportFormData] = useState({ description: "", categories: [], reporter_email: "" }); const [reportLoading, setReportLoading] = useState(false); const [reportMessage, setReportMessage] = useState(null); const [categories, setCategories] = useState([]); const [features, setFeatures] = useState([]); const [filtersLoading, setFiltersLoading] = useState(true); const [filtersError, setFiltersError] = useState(null); useEffect(()=>{ const params = new URLSearchParams(window.location.search); if (params.get("login") === "1") { setShowAuth(true); } }, []); const loadFilters = async ()=>{ try { setFiltersLoading(true); setFiltersError(null); const response = await fetch("/api/get-features", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error(`Error fetching features: ${response.status}`); } const data = await response.json(); const categoriesList = data.features.filter((f)=>f.is_category); const featuresList = data.features.filter((f)=>!f.is_category); setCategories(categoriesList); setFeatures(featuresList); } catch (error) { console.error("Error loading filters:", error); setFiltersError(error.message); } finally{ setFiltersLoading(false); } }; useEffect(()=>{ loadFilters(); }, []); useEffect(()=>{ const initialReportFormData = { description: "", categories: [], reporter_email: user?.email || "" }; features.forEach((feature)=>{ initialReportFormData[feature.feature_key] = false; }); setReportFormData(initialReportFormData); }, [ features, user ]); const fetchTools = useCallback(async ()=>{ setLoading(true); setError(null); try { const toolsResponse = await fetch("/api/get-tools", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }); if (!toolsResponse.ok) { throw new Error(`Error fetching tools: ${toolsResponse.status}`); } const data = await toolsResponse.json(); const safeTools = (data.tools || []).map((tool)=>({ ...tool, feature_names: tool.feature_names || [], feature_ids: tool.feature_ids || [] })); setTools(safeTools); } catch (error) { console.error("Error fetching tools:", error); setError(error.message || "Failed to load tools. Please try again."); } finally{ setLoading(false); } }, []); useEffect(()=>{ fetchTools(); }, [ fetchTools ]); const handleContactSubmit = async (selectedFeatures)=>{ if (!contactForm.name || !contactForm.email || !contactForm.message) { setContactMessage({ type: "error", text: "All fields are required", details: "Please fill out all fields" }); return; } setContactLoading(true); setContactMessage(null); try { const response = await fetch("/api/save-contact-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: contactForm.name.trim(), email: contactForm.email.trim(), message: contactForm.message.trim(), features: selectedFeatures }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.success) { setContactMessage({ type: "success", text: "Message sent successfully", details: "We'll get back to you soon" }); setContactForm({ name: "", email: "", message: "" }); } else { setContactMessage({ type: "error", text: data.message || "Error sending message", details: data.details || "Please try again later" }); } } catch (error) { console.error("Contact form error:", error); setContactMessage({ type: "error", text: "Error sending message", details: "Could not connect to server. Please check your connection and try again." }); } finally{ setContactLoading(false); } }; const handleCloseContactModal = ()=>{ setShowContactModal(false); if (contactMessage?.type === "success") { setContactForm({ name: "", email: "", message: "" }); } setContactMessage(null); setContactLoading(false); }; const handleCloseSuggestModal = ()=>{ setShowSuggestModal(false); if (suggestMessage?.type === "success") { setSuggestUrl(""); setSuggestFormCategories([]); setSuggestFormFeatures([]); setSuggestFormFilters({}); } setSuggestMessage(null); setSuggestLoading(false); }; const handleSuggestSubmit = async (data)=>{ setSuggestLoading(true); setSuggestMessage(null); try { const response = await fetch("/api/suggest-tool", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...data, features: suggestFormFeatures }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); setSuggestMessage({ type: result.success ? "success" : "error", text: result.message, details: result.details }); if (result.success) { setSuggestUrl(""); setSuggestFormCategories([]); setSuggestFormFeatures([]); setSuggestFormFilters({}); } } catch (error) { console.error("Error suggesting tool:", error); setSuggestMessage({ type: "error", text: "Error processing your request. Please try again later." }); } finally{ setSuggestLoading(false); } }; const handleSubscribeSubmit = async (e)=>{ e.preventDefault(); setSubscribeLoading(true); setSubscribeMessage(null); try { const response = await fetch("/api/subscribe-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: subscribeEmail }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.success) { if (data.alreadySubscribed) { setSubscribeMessage({ type: "info", text: "Looks like you're already part of our community! You'll continue receiving our updates." }); } else { setSubscribeSuccess(true); setSubscribeMessage({ type: "success", text: "Welcome aboard! 🎉 You're now subscribed to our updates." }); } setSubscribeEmail(""); } else { setSubscribeMessage({ type: "error", text: data.message || "Something went wrong. Please try again." }); } } catch (error) { console.error("Subscribe error:", error); setSubscribeMessage({ type: "error", text: "Connection error. Please check your internet and try again." }); } finally{ setSubscribeLoading(false); } }; const handleReportClick = (toolId, name, details)=>{ setSelectedToolForReport({ toolId, name, ...details }); const updatedReportFormData = { description: "", categories: details.categories || [], reporter_email: user?.email || "" }; features.forEach((feature)=>{ updatedReportFormData[feature.feature_key] = details[feature.feature_key] || false; }); setReportFormData(updatedReportFormData); setReportMessage(null); setShowReportModal(true); }; const handleReportSubmit = async (e)=>{ e.preventDefault(); if (!reportFormData.description) { setReportMessage({ type: "error", text: "Please provide a description of the issue or suggested changes." }); return; } setReportLoading(true); setReportMessage(null); try { const response = await fetch("/api/report-tool-issue", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ toolId: selectedToolForReport.toolId, ...reportFormData }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.success) { setReportMessage({ type: "success", text: "Report submitted successfully", details: "Thank you for helping us improve our directory!" }); setReportFormData({ description: "", categories: [], reporter_email: user?.email || "" }); } else { setReportMessage({ type: "error", text: data.message || "Error submitting report", details: data.details || "Please try again later" }); } } catch (error) { console.error("Report submission error:", error); setReportMessage({ type: "error", text: "Error submitting report", details: "Could not connect to server. Please check your connection and try again." }); } finally{ setReportLoading(false); } }; const handleCloseReportModal = ()=>{ setShowReportModal(false); setReportMessage(null); setReportLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900 text-white", __source: { fileName: "", lineNumber: 384, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-gray-900 border-b border-gray-800", __source: { fileName: "", lineNumber: 385, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 386, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-16", __source: { fileName: "", lineNumber: 387, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 388, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 389, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, "Vibe Coding Directory"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 395, columnNumber: 13 }, __self: this }, showAuth && /*#__PURE__*/ React.createElement(React.Fragment, null, authLoading ? /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 text-gray-400", __source: { fileName: "", lineNumber: 399, columnNumber: 21 }, __self: this }, "Loading...") : user ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 402, columnNumber: 23 }, __self: this }, user.email), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors", __source: { fileName: "", lineNumber: 403, columnNumber: 23 }, __self: this }, "Logout")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "px-4 py-2 text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 412, columnNumber: 23 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium rounded-md transition-all duration-300", __source: { fileName: "", lineNumber: 418, columnNumber: 23 }, __self: this }, "Register"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactModal(true), className: "px-4 py-2 text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 428, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSuggestModal(true), className: "px-4 py-2 text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, "Suggest Tool"))))), /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "data:image/svg+xml,", __source: { fileName: "", lineNumber: 444, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[75vh] bg-gray-900 overflow-hidden", __source: { fileName: "", lineNumber: 448, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 449, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 451, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 452, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/9dfa51ab-2f3f-4895-86fb-f399a53b7f03/-/format/auto/", alt: "Cute Robot", className: "w-24 h-24 object-contain", __source: { fileName: "", lineNumber: 453, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold tracking-tight mb-4 text-center", __source: { fileName: "", lineNumber: 460, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 461, columnNumber: 13 }, __self: this }, "Vibe Coding Directory")), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mb-8 leading-relaxed text-center", __source: { fileName: "", lineNumber: 466, columnNumber: 11 }, __self: this }, "Discover the best AI tools to build amazing websites and applications"), /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full px-4", __source: { fileName: "", lineNumber: 471, columnNumber: 11 }, __self: this }, subscribeSuccess ? /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 backdrop-blur-sm border border-purple-500/10 rounded-lg p-6 text-center", __source: { fileName: "", lineNumber: 473, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 474, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-12 h-12 text-green-500 mx-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 475, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7", __source: { fileName: "", lineNumber: 481, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white font-medium", __source: { fileName: "", lineNumber: 489, columnNumber: 17 }, __self: this }, subscribeMessage.text)) : /*#__PURE__*/ React.createElement(FormSubscribeEmail, { subscribeEmail: subscribeEmail, onEmailChange: (e)=>setSubscribeEmail(e.target.value), onSubmit: handleSubscribeSubmit, subscribeLoading: subscribeLoading, subscribeMessage: subscribeMessage, subscribeSuccess: subscribeSuccess, __source: { fileName: "", lineNumber: 494, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12", __source: { fileName: "", lineNumber: 506, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 backdrop-blur-xl rounded-lg p-6 border border-purple-500/20", __source: { fileName: "", lineNumber: 507, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ToolFilters, { className: "mb-6", preventSubmit: true, __source: { fileName: "", lineNumber: 508, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20", __source: { fileName: "", lineNumber: 511, columnNumber: 7 }, __self: this }, error ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20 bg-red-900/20 rounded-lg", __source: { fileName: "", lineNumber: 513, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-12 w-12 mx-auto text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 514, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", __source: { fileName: "", lineNumber: 521, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-red-400 mt-4", __source: { fileName: "", lineNumber: 528, columnNumber: 13 }, __self: this }, "Error loading data"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-red-300", __source: { fileName: "", lineNumber: 531, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setError(null); fetchTools(); }, className: "mt-4 px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 532, columnNumber: 13 }, __self: this }, "Try again")) : loading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 543, columnNumber: 11 }, __self: this }, Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "rounded-xl bg-gray-800/80 border border-gray-700/50 overflow-hidden", __source: { fileName: "", lineNumber: 545, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 549, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 550, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 551, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 w-20 bg-gray-700 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 552, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-6 w-24 bg-gray-700 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 553, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-8 w-3/4 bg-gray-700 rounded animate-pulse mb-4", __source: { fileName: "", lineNumber: 557, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 558, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 w-full bg-gray-700 rounded animate-pulse", __source: { fileName: "", lineNumber: 559, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 w-5/6 bg-gray-700 rounded animate-pulse", __source: { fileName: "", lineNumber: 560, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-4 mb-6", __source: { fileName: "", lineNumber: 563, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 w-28 bg-gray-700 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 564, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-6 w-32 bg-gray-700 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 565, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-10 w-full bg-gray-700 rounded-lg animate-pulse mt-auto", __source: { fileName: "", lineNumber: 568, columnNumber: 19 }, __self: this }))))) : tools.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20 bg-gray-800/50 rounded-lg", __source: { fileName: "", lineNumber: 574, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-12 w-12 mx-auto text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 575, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", __source: { fileName: "", lineNumber: 582, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-300 mt-4", __source: { fileName: "", lineNumber: 589, columnNumber: 13 }, __self: this }, "No tools found"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-400", __source: { fileName: "", lineNumber: 592, columnNumber: 13 }, __self: this }, "Try adjusting your search filters"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ fetchTools(); }, className: "mt-4 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors", __source: { fileName: "", lineNumber: 595, columnNumber: 13 }, __self: this }, "Clear filters")) : /*#__PURE__*/ React.createElement(React.Fragment, null, tools.some((tool)=>tool.is_featured) && /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 607, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 608, columnNumber: 17 }, __self: this }, "Featured Tools"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 611, columnNumber: 17 }, __self: this }, tools.filter((tool)=>tool.is_featured).sort((a, b)=>a.name.localeCompare(b.name)).map((tool)=>/*#__PURE__*/ React.createElement(CardTool, { key: `featured-${tool.id}`, toolId: tool.id, categoryNames: tool.category_names, categoryIcons: tool.category_icons, isOpenSource: tool.is_open_source, name: tool.name, description: tool.description, title: tool.title, description_meta: tool.description_meta, hasVisualEditor: tool.has_visual_editor, allowsOwnLLMKey: tool.allows_own_llm_key, supportsBackend: tool.supports_backend, url: tool.url, isFeatured: true, onReportClick: handleReportClick, __source: { fileName: "", lineNumber: 616, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 638, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 639, columnNumber: 15 }, __self: this }, "All Tools"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 640, columnNumber: 15 }, __self: this }, tools.filter((tool)=>!tool.is_featured).sort((a, b)=>a.name.localeCompare(b.name)).map((tool)=>/*#__PURE__*/ React.createElement(CardTool, { key: `all-${tool.id}`, toolId: tool.id, categoryNames: tool.category_names, categoryIcons: tool.category_icons, isOpenSource: tool.is_open_source, name: tool.name, description: tool.description, title: tool.title, description_meta: tool.description_meta, hasVisualEditor: tool.has_visual_editor, allowsOwnLLMKey: tool.allows_own_llm_key, supportsBackend: tool.supports_backend, url: tool.url, isFeatured: false, onReportClick: handleReportClick, __source: { fileName: "", lineNumber: 645, columnNumber: 21 }, __self: this })))))), showContactModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-50", onClick: (e)=>{ if (e.target === e.currentTarget) { handleCloseContactModal(); } }, __source: { fileName: "", lineNumber: 670, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(FormContact, { contactForm: contactForm, onContactFormChange: setContactForm, onSubmit: handleContactSubmit, contactMessage: contactMessage, contactLoading: contactLoading, onCancel: handleCloseContactModal, __source: { fileName: "", lineNumber: 678, columnNumber: 11 }, __self: this })), showSuggestModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-50", onClick: (e)=>{ if (e.target === e.currentTarget) { handleCloseSuggestModal(); } }, __source: { fileName: "", lineNumber: 690, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(FormSuggestTool, { suggestUrl: suggestUrl, onUrlChange: (e)=>setSuggestUrl(e.target.value), onSubmit: handleSuggestSubmit, suggestMessage: suggestMessage, onCancel: handleCloseSuggestModal, suggestLoading: suggestLoading, selectedCategories: suggestFormCategories, onCategoryChange: (categoryId)=>{ setSuggestFormCategories((prev)=>prev.includes(categoryId) ? prev.filter((id)=>id !== categoryId) : [ ...prev, categoryId ]); }, filters: suggestFormFilters, onFilterChange: (filterName, value)=>setSuggestFormFilters((prev)=>({ ...prev, [filterName]: value })), __source: { fileName: "", lineNumber: 698, columnNumber: 11 }, __self: this })), showSubscribeModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 725, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-8 max-w-lg w-full mx-4", __source: { fileName: "", lineNumber: 726, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 727, columnNumber: 13 }, __self: this }, "Subscribe to Updates"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubscribeSubmit, __source: { fileName: "", lineNumber: 730, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 731, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 732, columnNumber: 17 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", value: subscribeEmail, onChange: (e)=>setSubscribeEmail(e.target.value), placeholder: "you@example.com", className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white", required: true, __source: { fileName: "", lineNumber: 735, columnNumber: 17 }, __self: this })), subscribeMessage && /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-md mb-4 ${subscribeMessage.type === "success" ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300" : "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300"}`, __source: { fileName: "", lineNumber: 745, columnNumber: 17 }, __self: this }, subscribeMessage.text), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 755, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowSubscribeModal(false), className: "px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md", __source: { fileName: "", lineNumber: 756, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: subscribeLoading, className: "px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md disabled:opacity-50", __source: { fileName: "", lineNumber: 763, columnNumber: 17 }, __self: this }, subscribeLoading ? "Subscribing..." : "Subscribe"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-transparent py-8 text-center text-gray-400 border-t border-gray-800", __source: { fileName: "", lineNumber: 776, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 777, columnNumber: 9 }, __self: this }, "© 2025 Vibe Coding Directory - Made by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.linkedin.com/in/calirenato82", className: "underline hover:text-purple-400 transition-colors", __source: { fileName: "", lineNumber: 779, columnNumber: 11 }, __self: this }, "Cali"), " ", "from Brazil with ❤"))); }