function Chart({ data, title, height = 400, width = 600, lineColor = "#3B82F6" }) { const [hover, setHover] = useState(null); const svgRef = useRef(null); useEffect(()=>{ if (!data || !data.length || !svgRef.current) return; const margin = { top: 20, right: 30, bottom: 30, left: 40 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const xScale = d3.scaleLinear().domain([ 0, data.length - 1 ]).range([ 0, innerWidth ]); const yScale = d3.scaleLinear().domain([ 0, d3.max(data) ]).range([ innerHeight, 0 ]); const line = d3.line().x((d, i)=>xScale(i)).y((d)=>yScale(d)); const svg = d3.select(svgRef.current); svg.selectAll("*").remove(); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); g.append("path").datum(data).attr("fill", "none").attr("stroke", lineColor).attr("stroke-width", 2).attr("d", line); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); g.append("g").attr("transform", `translate(0,${innerHeight})`).call(xAxis); g.append("g").call(yAxis); const dots = g.selectAll(".dot").data(data).enter().append("circle").attr("class", "dot").attr("cx", (d, i)=>xScale(i)).attr("cy", (d)=>yScale(d)).attr("r", 5).attr("fill", lineColor).on("mouseenter", (event, d)=>{ setHover({ value: d, x: event.pageX, y: event.pageY }); }).on("mouseleave", ()=>setHover(null)); }, [ data, width, height, lineColor ]); return /*#__PURE__*/ React.createElement("div", { className: "font-inter", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, title && /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { ref: svgRef, width: width, height: height, className: "bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), hover && /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white p-2 rounded shadow-lg text-sm", style: { left: hover.x + 10, top: hover.y - 10, transform: "translateY(-100%)" }, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Value: ", hover.value))); } function ChartStory() { const sampleData1 = [ 10, 45, 30, 60, 25, 80, 40 ]; const sampleData2 = [ 20, 15, 40, 35, 55, 45, 60 ]; const sampleData3 = [ 50, 30, 20, 40, 60, 50, 70 ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Chart, { data: sampleData1, title: "Weekly Sales Trend", lineColor: "#3B82F6", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Chart, { data: sampleData2, title: "Monthly Revenue", lineColor: "#10B981", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Chart, { data: sampleData3, title: "User Growth", lineColor: "#F59E0B", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this })); } function SideNav() { return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-64 bg-[#1a1a1a] text-white p-6 flex flex-col", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Company logo", className: "w-32", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "flex-1", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a2a2a]", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, "Dashboard"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a2a2a]", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a2a2a]", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-bar", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, "Analytics"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a2a2a]", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "Settings")))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#f5f5f5] p-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Main Content Area"))); } function SideNavStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SideNav, { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); } function StatCard({ icon, title, value }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md w-[250px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-3 rounded-full", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-blue-500 text-xl`, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-600 font-medium font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, value)))); } function StatCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StatCard, { icon: "fas fa-users", title: "Total Users", value: "1,234", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatCard, { icon: "fas fa-chart-bar", title: "Revenue", value: "$45,678", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatCard, { icon: "fas fa-shopping-cart", title: "Orders", value: "892", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userName] = useState("Sarah"); return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-[#f5f6fa]", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-8", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-8", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-inter text-3xl font-bold text-[#1a1c1e]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Welcome back, ", userName, " 👋"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-[#64748b] mt-2", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Here's what's happening with your projects today")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-xl font-semibold text-[#1a1c1e]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Performance Overview"), /*#__PURE__*/ React.createElement("select", { className: "font-inter text-sm border rounded-lg px-3 py-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Last 7 days"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Last 30 days"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Last 90 days"))), /*#__PURE__*/ React.createElement(React.Fragment, null)))); }