function InsightCard({ title, description, timestamp, onShare, onAction }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-lg bg-white shadow-lg p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-500", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, timestamp)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700 mb-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onShare, className: "inline-flex items-center text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt mr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), "Share"), /*#__PURE__*/ React.createElement("button", { onClick: onAction, className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Take Action"))); } function InsightCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 space-y-8", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InsightCard, { title: "Revenue Growth Detected", description: "Your revenue has grown by 25% compared to last month. This trend suggests strong business performance.", timestamp: "2024-01-15 09:30 AM", onShare: ()=>{}, onAction: ()=>{}, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(InsightCard, { title: "New Market Opportunity", description: "Analysis shows potential for expansion in the Asian market with an estimated 40% growth opportunity.", timestamp: "2024-01-14 02:15 PM", onShare: ()=>{}, onAction: ()=>{}, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function ActionMenu({ onShare }) { const [isOpen, setIsOpen] = useState(false); const handleShare = (type)=>{ if (onShare) { onShare(type); } setIsOpen(false); }; return /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "flex items-center gap-2 px-4 py-2 text-sm bg-[#f8f9fa] hover:bg-[#e9ecef] rounded-md border border-[#dee2e6]", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), "Share"), isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShare("slack"), className: "flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-slack", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), "Share to Slack"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShare("email"), className: "flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }), "Share via Email"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShare("jira"), className: "flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-jira", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), "Create Jira Ticket")))); } function ActionMenuStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ActionMenu, { onShare: (type)=>console.log(`Sharing via ${type}`), __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function SearchBar({ placeholder = "Ask anything about your experiments...", exampleQueries = [ "What was the temperature in experiment A?", "Compare results between test 1 and 2", "Show me failed experiments from last week" ] }) { const [query, setQuery] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: placeholder, className: "w-full px-6 py-4 text-lg rounded-full border-2 border-gray-200 focus:outline-none focus:border-blue-500 shadow-sm font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-6 top-1/2 -translate-y-1/2 text-gray-400 text-xl", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, exampleQueries.map((query, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-xs mr-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), query)))); } function SearchBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchBar, { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function ExperimentCard({ title = "", status = "", variants = [], performance = 0, startDate = "", totalUsers = 0 }) { const statusColors = { active: "bg-[#4CAF50]", paused: "bg-[#FFC107]", completed: "bg-[#9E9E9E]" }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 max-w-[480px]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-inter", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("span", { className: `${statusColors[status.toLowerCase()] || "bg-[#9E9E9E]"} px-3 py-1 rounded-full text-white text-sm`, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, status)), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#666] font-inter", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Start Date"), /*#__PURE__*/ React.createElement("span", { className: "font-medium font-inter", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, startDate)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium font-inter mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Variants"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, variants.map((variant, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center bg-[#F5F5F5] p-3 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-inter", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, variant.name), /*#__PURE__*/ React.createElement("span", { className: "font-medium font-inter", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, variant.traffic, "%"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium font-inter mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Performance"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#E0E0E0] rounded-full h-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2196F3] h-2 rounded-full", style: { width: `${performance}%` }, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "ml-3 font-medium font-inter", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, performance, "%"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center pt-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#666] font-inter", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Total Users"), /*#__PURE__*/ React.createElement("span", { className: "font-medium font-inter", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, totalUsers.toLocaleString())))); } function ExperimentCardStory() { const sampleData = { title: "Homepage Redesign", status: "Active", startDate: "2024-01-15", variants: [ { name: "Control", traffic: 50 }, { name: "Variant A", traffic: 25 }, { name: "Variant B", traffic: 25 } ], performance: 76, totalUsers: 15420 }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#F5F5F5]", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ExperimentCard, { ...sampleData, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchQuery, setSearchQuery] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f8f9fa] to-white", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-[#1a1a1a] mb-4 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Welcome to AI Insights"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-[#4a5568] max-w-2xl mx-auto font-crimson-text", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Discover real-time insights and experiments powered by advanced AI algorithms, helping you make data-driven decisions faster.")), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 font-roboto text-[#2d3748]", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Latest Insights"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 font-roboto text-[#2d3748]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Active Experiments"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)))))); }