"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Instructions: Real-time Dashboard" }), "\n", _jsx(_components.p, { children: "Follow these step-by-step instructions to build a professional real-time dashboard that demonstrates mastery of all useEffect concepts from Module 7. This exercise will reinforce effect organization, dependencies, cleanup, and coordination concepts while guiding you through creating a sophisticated application that showcases your React development skills." }), "\n", _jsx(_components.h2, { children: "Concept Reinforcement" }), "\n", _jsx(_components.p, { children: "Before we start coding, let's review the key React concepts you'll be applying in this comprehensive dashboard project:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "useEffect Fundamentals" }), ": You'll use useEffect for side effects like data fetching, document title updates, and browser API integration. This demonstrates how professional React applications interact with external systems and manage component lifecycle."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Effect Dependencies" }), ": You'll implement multiple effects with carefully crafted dependency arrays to control when effects run for optimal performance. This shows how to prevent unnecessary effect executions while ensuring effects run when needed."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Cleanup and Memory Management" }), ": You'll implement systematic cleanup across multiple effects, managing timers, intervals, and simulated connections with proper resource disposal. This demonstrates how to build applications that can run for extended periods without performance degradation."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Multiple Effect Organization" }), ": You'll organize multiple effects by concern, each with specific responsibilities and appropriate dependencies. This shows how to coordinate multiple concurrent operations while maintaining effect independence and professional code organization."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Real-World Application Patterns" }), ": You'll build the same effect coordination patterns used by Google Analytics (real-time metrics), GitHub Insights (activity feeds), and business intelligence platforms (dashboard coordination)."] }), "\n", _jsx(_components.h2, { children: "The Challenge" }), "\n", _jsx(_components.p, { children: "Create a comprehensive real-time dashboard application that demonstrates professional useEffect mastery:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Live metrics that update at different intervals with realistic data simulation" }), "\n", _jsx(_components.li, { children: "Activity feed system with timestamp tracking and auto-scroll management" }), "\n", _jsx(_components.li, { children: "Status monitoring with connection health and data freshness indicators" }), "\n", _jsx(_components.li, { children: "Interactive controls for manual refresh and metric customization" }), "\n", _jsx(_components.li, { children: "Professional dashboard interface with multiple effects working together seamlessly" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Success Criteria:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Dashboard uses multiple useEffect hooks, each organized by concern with clear responsibilities" }), "\n", _jsx(_components.li, { children: "✅ Effects demonstrate proper dependency management for optimal performance and correct behavior" }), "\n", _jsx(_components.li, { children: "✅ All effects implement systematic cleanup preventing memory leaks and resource conflicts" }), "\n", _jsx(_components.li, { children: "✅ Live metrics update at realistic intervals with visual feedback and smooth animations" }), "\n", _jsx(_components.li, { children: "✅ Activity feed shows timestamped events with professional formatting and auto-scroll" }), "\n", _jsx(_components.li, { children: "✅ Status indicators provide clear feedback about system health and data freshness" }), "\n", _jsx(_components.li, { children: "✅ User interactions trigger appropriate updates with immediate visual feedback" }), "\n", _jsx(_components.li, { children: "✅ Components are organized in separate files with proper imports and professional structure" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Independent Learning Opportunity" }), "\n", _jsx(_components.p, { children: "Before looking at the step-by-step guide below, try building this real-time dashboard yourself! Use these React concepts you've learned:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "React Concepts to Use:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Functional components with JSX and proper file organization" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useState" }), " hook for managing metrics, activity data, status indicators, and user interaction state"] }), "\n", _jsxs(_components.li, { children: ["Multiple ", _jsx(_components.code, { children: "useEffect" }), " hooks, each organized by concern and responsibility"] }), "\n", _jsxs(_components.li, { children: ["Effect cleanup with ", _jsx(_components.code, { children: "clearInterval" }), " and ", _jsx(_components.code, { children: "clearTimeout" }), " to prevent memory leaks"] }), "\n", _jsx(_components.li, { children: "Component composition with separate Dashboard, MetricCard, ActivityFeed, and StatusIndicator components" }), "\n", _jsx(_components.li, { children: "Event handling for user interactions like refresh buttons and metric toggles" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Conceptual Hints:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Think about what different operations your dashboard needs to perform simultaneously" }), "\n", _jsx(_components.li, { children: "Consider what data needs to change over time (metrics, activity feed, status indicators, timestamps)" }), "\n", _jsx(_components.li, { children: "Remember that each effect should have a single, clear responsibility" }), "\n", _jsx(_components.li, { children: "Use different dependency arrays for effects that respond to different state changes" }), "\n", _jsx(_components.li, { children: "Each effect should manage its own cleanup to prevent memory leaks" }), "\n", _jsx(_components.li, { children: "Effects can coordinate through shared state without being directly dependent on each other" }), "\n"] }), "\n", _jsx(_components.p, { children: "Try building it yourself first - it's okay if you get stuck! The step-by-step guide below will help you understand each React concept as you implement professional dashboard patterns." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Step-by-Step React Implementation Guide" }), "\n", _jsx(_components.p, { children: "If you need help or want to understand each React concept in detail, follow these steps:" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the StatusIndicator Component File" }), "\n", _jsxs(_components.p, { children: ["Create a new file called ", _jsx(_components.code, { children: "StatusIndicator.js" }), " and set up a component that demonstrates focused effect management for system status tracking. This shows how to organize effects by specific concern."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState", _jsx(_components.span, { className: "token punctuation", children: "," }), " useEffect ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "StatusIndicator" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "connectionStatus", _jsx(_components.span, { className: "token punctuation", children: "," }), " setConnectionStatus", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connecting'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "lastUpdate", _jsx(_components.span, { className: "token punctuation", children: "," }), " setLastUpdate", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "systemHealth", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSystemHealth", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'excellent'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 1: Connection status simulation with independent lifecycle" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Initializing connection status monitoring...'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "11", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Simulate connection establishment" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " connectionTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connected'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Dashboard connection established'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "2000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "17", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Simulate occasional connection fluctuations" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fluctuationTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " shouldFluctuate ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0.9" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 10% chance" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "shouldFluctuate", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'reconnecting'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'connected'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Check every 15 seconds" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "28", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token function", children: "clearTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "connectionTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fluctuationTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token function", children: "setConnectionStatus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'disconnected'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Connection status effect cleaned up'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// No dependencies - connection management only" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "36", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 2: System health monitoring with health-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "connectionStatus ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'connected'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " healthTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " healthLevels ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'excellent'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'good'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'fair'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'poor'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " weights ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0.6" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.25" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.05" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Weighted toward better health" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "43", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " random ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " selectedHealth ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'excellent'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "46", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "for" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "let" }), " i ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " i ", _jsx(_components.span, { className: "token operator", children: "<" }), " healthLevels", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " i", _jsx(_components.span, { className: "token operator", children: "++" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "random ", _jsx(_components.span, { className: "token operator", children: "<" }), " weights", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" selectedHealth ", _jsx(_components.span, { className: "token operator", children: "=" }), " healthLevels", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" random ", _jsx(_components.span, { className: "token operator", children: "-=" }), " weights", _jsx(_components.span, { className: "token punctuation", children: "[" }), "i", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "54", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token function", children: "setSystemHealth" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "selectedHealth", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token function", children: "setLastUpdate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'System health updated:'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " selectedHealth", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "8000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Update every 8 seconds" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "healthTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'System health monitoring cleaned up'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "connectionStatus", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends only on connection status" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "66", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "formatLastUpdate" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "date" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " now ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " diffSeconds ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "now ", _jsx(_components.span, { className: "token operator", children: "-" }), " date", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "70", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffSeconds ", _jsx(_components.span, { className: "token operator", children: "<" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'Just now'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffSeconds ", _jsx(_components.span, { className: "token operator", children: "<" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "diffSeconds", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "s ago" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " diffMinutes ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffSeconds ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffMinutes ", _jsx(_components.span, { className: "token operator", children: "<" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "diffMinutes", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "m ago" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "75", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " date", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleTimeString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "77", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getStatusColor" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "status" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "status", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "80", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'connected'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "81", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#10b981'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "82", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'connecting'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "83", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#f59e0b'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'reconnecting'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#f97316'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'disconnected'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#ef4444'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "88", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#6b7280'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "92", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getHealthColor" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "health" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "health", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'excellent'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#10b981'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'good'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "98", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#22c55e'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "99", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'fair'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#f59e0b'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "101", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'poor'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#ef4444'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "103", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "104", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#6b7280'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "105", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "106", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "107", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "108", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "109", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-indicator", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "110", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-section", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "111", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "112", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-dot", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "113", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "114", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "backgroundColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "getStatusColor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "connectionStatus", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "115", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "116", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "117", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-info", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "118", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-label", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Connection" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "119", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-value", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "connectionStatus", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "120", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "121", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "122", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "123", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-section", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "124", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "125", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "health-indicator", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "126", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "backgroundColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "getHealthColor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "systemHealth", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "127", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "128", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-info", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "129", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-label", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "System Health" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "130", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "status-value", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "systemHealth", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "131", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "132", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "133", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "134", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "last-update", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "135", children: [_jsx(_components.span, { className: "token plain-text", children: " Last updated: " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token function", children: "formatLastUpdate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "lastUpdate", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "136", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "137", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "138", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "139", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "140", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "141", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "StatusIndicator" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import React, { useState, useEffect }" }), " imports the React hooks needed for state and effect management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "const [connectionStatus, setConnectionStatus] = useState('connecting')" }), " manages connection state with realistic initial value"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [])" }), " creates connection effect that runs independently with its own timer and cleanup"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [connectionStatus])" }), " creates health monitoring effect that depends only on connection state"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "return () => { clearTimeout(connectionTimer); clearInterval(fluctuationTimer) }" }), " provides systematic cleanup to prevent memory leaks"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates focused effect organization where each effect has a single responsibility (connection vs. health monitoring) with appropriate dependencies and independent cleanup requirements."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your status indicator component! Notice how connection and health status update independently with proper cleanup."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the MetricCard Component with Animation Effects" }), "\n", _jsxs(_components.p, { children: ["Create a new file called ", _jsx(_components.code, { children: "MetricCard.js" }), " and implement a reusable metric display component that demonstrates effect coordination for visual updates and animations."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState", _jsx(_components.span, { className: "token punctuation", children: "," }), " useEffect ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "MetricCard" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: _jsxs(_components.span, { className: "token parameter", children: [" title", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: _jsxs(_components.span, { className: "token parameter", children: [" initialValue", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: _jsxs(_components.span, { className: "token parameter", children: [" updateInterval", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: _jsxs(_components.span, { className: "token parameter", children: [" formatValue", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: _jsxs(_components.span, { className: "token parameter", children: [" icon", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token parameter", children: _jsx(_components.span, { className: "token punctuation", children: "}" }) }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentValue", _jsx(_components.span, { className: "token punctuation", children: "," }), " setCurrentValue", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "initialValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "previousValue", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPreviousValue", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "initialValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isUpdating", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsUpdating", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "trend", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTrend", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'stable'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "14", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 1: Metric value updates with interval-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " updateTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token function", children: "setPreviousValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "currentValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "19", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Simulate realistic metric changes" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " changePercent ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "0.2" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// ±10% change" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " newValue ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "max" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "currentValue ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " changePercent", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token function", children: "setCurrentValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "newValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsUpdating" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "29", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Determine trend" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "newValue ", _jsx(_components.span, { className: "token operator", children: ">" }), " currentValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token function", children: "setTrend" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'up'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "newValue ", _jsx(_components.span, { className: "token operator", children: "<" }), " currentValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token function", children: "setTrend" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'down'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token function", children: "setTrend" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'stable'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "38", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "title", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: " updated:" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " newValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " updateInterval", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "41", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "updateTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "title", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: " metric updates cleaned up" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentValue", _jsx(_components.span, { className: "token punctuation", children: "," }), " title", _jsx(_components.span, { className: "token punctuation", children: "," }), " updateInterval", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends on current value and configuration" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "47", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 2: Animation state management with animation-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isUpdating", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " animationTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsUpdating" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "600" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Animation duration" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "54", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token function", children: "clearTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animationTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "title", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: " animation cleanup completed" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isUpdating", _jsx(_components.span, { className: "token punctuation", children: "," }), " title", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends only on animation state" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "61", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getTrendIcon" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "trend", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'up'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'↗️'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'down'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'↘️'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'➡️'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "72", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getTrendColor" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "trend", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "75", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'up'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#10b981'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'down'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#ef4444'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "80", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#6b7280'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "81", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "82", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "83", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getChangeAmount" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " change ", _jsx(_components.span, { className: "token operator", children: "=" }), " currentValue ", _jsx(_components.span, { className: "token operator", children: "-" }), " previousValue", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " changePercent ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [" previousValue ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "change ", _jsx(_components.span, { className: "token operator", children: "/" }), " previousValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "88", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " change", _jsx(_components.span, { className: "token punctuation", children: "," }), " changePercent ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "90", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " change", _jsx(_components.span, { className: "token punctuation", children: "," }), " changePercent ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "getChangeAmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "92", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "metric-card " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "isUpdating ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'updating'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metric-header", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metric-icon", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "icon", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metric-title", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "title", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "98", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "99", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metric-value", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "101", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "formatValue\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token function", children: "formatValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "currentValue", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "103", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " currentValue", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "104", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "105", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "106", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metric-trend", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "107", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "span"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "108", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "trend-indicator", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "109", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "getTrendColor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "110", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "111", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token function", children: "getTrendIcon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "112", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "113", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "span"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "trend-text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "114", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "change ", _jsx(_components.span, { className: "token operator", children: "!==" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "115", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token punctuation", children: "<" }) }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "116", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "change ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'+'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "117", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "change", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "change ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'+'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "118", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "changePercent", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "%)\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "119", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "120", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "121", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "change ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token string", children: "'No change'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "122", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "123", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "124", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "125", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metric-timestamp", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "126", children: [_jsx(_components.span, { className: "token plain-text", children: " Updated: " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleTimeString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "127", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "128", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "129", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "130", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "131", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "132", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "MetricCard" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "function MetricCard({ title, initialValue, updateInterval, formatValue, icon })" }), " accepts props for customizable metric display"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "const [currentValue, setCurrentValue] = useState(initialValue)" }), " manages the main metric value with prop-based initialization"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [currentValue, title, updateInterval])" }), " creates metric update effect with appropriate dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [isUpdating, title])" }), " creates animation effect that depends only on animation state"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "const updateTimer = setInterval(() => { ... }, updateInterval)" }), " creates customizable update intervals for different metrics"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates reusable component design with multiple effects that have different responsibilities (data updates vs. animations) and appropriate dependency management for performance optimization."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your metric card component! Notice how values update at specified intervals with smooth animations and trend indicators."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the ActivityFeed Component with Auto-scroll Management" }), "\n", _jsxs(_components.p, { children: ["Create a new file called ", _jsx(_components.code, { children: "ActivityFeed.js" }), " and implement a live activity stream that demonstrates effect coordination for data management and user experience optimization."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState", _jsx(_components.span, { className: "token punctuation", children: "," }), " useEffect", _jsx(_components.span, { className: "token punctuation", children: "," }), " useRef ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ActivityFeed" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "activities", _jsx(_components.span, { className: "token punctuation", children: "," }), " setActivities", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isAutoScroll", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsAutoScroll", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " feedRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 1: Activity generation with activity-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " activityTypes ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'user_login'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'👤'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "message" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'User logged in'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'data_update'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'📊'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "message" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Dashboard data refreshed'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'alert'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'⚠️'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "message" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'System alert triggered'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'export'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'📤'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "message" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Report exported'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'config'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'⚙️'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "message" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Settings updated'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'backup'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "icon" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'💾'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "message" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Data backup completed'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "22", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " activityTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " randomActivity ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" activityTypes", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " activityTypes", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " newActivity ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "now" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "randomActivity", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "timestamp" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "user" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "User" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "random" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "32", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token function", children: "setActivities" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prev" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " updated ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), "prev", _jsx(_components.span, { className: "token punctuation", children: "," }), " newActivity", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Keep only last 20 activities for performance" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " updated", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "38", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'New activity added:'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " newActivity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "message" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "4000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// New activity every 4 seconds" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "41", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "activityTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Activity generation cleaned up'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// No dependencies - continuous activity generation" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "47", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 2: Auto-scroll management with scroll-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isAutoScroll ", _jsx(_components.span, { className: "token operator", children: "&&" }), " feedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " activities", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " scrollTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" feedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "scrollTop" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " feedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "scrollHeight" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Small delay to ensure DOM update" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "54", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token function", children: "clearTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "scrollTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Auto-scroll cleanup completed'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "activities", _jsx(_components.span, { className: "token punctuation", children: "," }), " isAutoScroll", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends on activities and scroll preference" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "61", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 3: Scroll behavior detection with user interaction dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " feedElement ", _jsx(_components.span, { className: "token operator", children: "=" }), " feedRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "feedElement", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "66", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleScroll" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " scrollTop", _jsx(_components.span, { className: "token punctuation", children: "," }), " scrollHeight", _jsx(_components.span, { className: "token punctuation", children: "," }), " clientHeight ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " feedElement", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " isAtBottom ", _jsx(_components.span, { className: "token operator", children: "=" }), " scrollTop ", _jsx(_components.span, { className: "token operator", children: "+" }), " clientHeight ", _jsx(_components.span, { className: "token operator", children: ">=" }), " scrollHeight ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 10px tolerance" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "70", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Auto-enable scroll when user scrolls to bottom" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isAtBottom ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "isAutoScroll", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsAutoScroll" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "75", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Auto-disable scroll when user scrolls up" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isAtBottom ", _jsx(_components.span, { className: "token operator", children: "&&" }), " isAutoScroll", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsAutoScroll" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "80", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "81", children: [" feedElement", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'scroll'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleScroll", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "82", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "83", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [" feedElement", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "removeEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'scroll'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleScroll", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Scroll behavior detection cleaned up'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isAutoScroll", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends on current auto-scroll state" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "88", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "formatTimestamp" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "timestamp" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " now ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " diffSeconds ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "now ", _jsx(_components.span, { className: "token operator", children: "-" }), " timestamp", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "92", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffSeconds ", _jsx(_components.span, { className: "token operator", children: "<" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "diffSeconds", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "s ago" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " diffMinutes ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "floor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffSeconds ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "diffMinutes ", _jsx(_components.span, { className: "token operator", children: "<" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "diffMinutes", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "m ago" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " timestamp", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleTimeString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "98", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "99", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getActivityColor" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "type" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "type", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "101", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'user_login'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#10b981'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "103", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'data_update'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "104", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#3b82f6'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "105", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'alert'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "106", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#f59e0b'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "107", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'export'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "108", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#8b5cf6'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "109", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'config'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "110", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#6b7280'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "111", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'backup'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "112", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#06b6d4'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "113", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "114", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token string", children: "'#6b7280'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "115", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "116", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "117", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "118", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "119", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-feed", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "120", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-header", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "121", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h3"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Live Activity Feed" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "122", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "scroll-controls", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "123", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "124", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setIsAutoScroll" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isAutoScroll", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "125", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "scroll-toggle " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "\n"] })] })] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "126", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" isAutoScroll ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'active'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "127", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [_jsxs(_components.span, { className: "token template-string", children: [_jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "128", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "129", children: [_jsx(_components.span, { className: "token plain-text", children: " Auto-scroll: " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isAutoScroll ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'ON'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'OFF'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "130", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "131", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "132", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "133", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "134", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-list", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "ref" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "feedRef", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "135", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "activities", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "activity" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "136", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "activity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-item", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "137", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "138", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-icon", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "139", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "140", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "backgroundColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "getActivityColor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "141", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" activity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "142", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "143", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "144", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "145", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "activity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "icon" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "146", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "147", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-content", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "148", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-message", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "149", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "activity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "message" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "150", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "151", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-meta", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "152", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "span"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-user", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "153", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "activity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "user" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "154", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "155", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "span"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-time", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "156", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token function", children: "formatTimestamp" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "activity", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "timestamp" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "157", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "158", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "159", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "160", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "161", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "162", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "163", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "activities", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "164", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "activity-empty", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "165", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "empty-icon", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "📊" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "166", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "empty-message", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "167", children: _jsx(_components.span, { className: "token plain-text", children: " Waiting for activity...\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "168", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "169", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "170", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "171", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "172", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "173", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "174", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "175", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "176", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ActivityFeed" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "const feedRef = useRef(null)" }), " creates a ref to access the DOM element for scroll management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [])" }), " creates activity generation effect that runs continuously with its own cleanup"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [activities, isAutoScroll])" }), " creates auto-scroll effect that depends on activities and scroll preference"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [isAutoScroll])" }), " creates scroll detection effect that manages user interaction behavior"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "feedElement.addEventListener('scroll', handleScroll)" }), " adds scroll listener with proper cleanup in effect return function"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates sophisticated effect coordination where multiple effects handle different concerns (data generation, auto-scroll, user interaction) while working together to create smooth user experience."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your activity feed component! Notice how activities appear automatically, auto-scroll works intelligently, and user interactions are handled smoothly."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the Main Dashboard Component with Multiple Effect Coordination" }), "\n", _jsxs(_components.p, { children: ["Create a new file called ", _jsx(_components.code, { children: "Dashboard.js" }), " and implement the main dashboard that demonstrates professional multiple effect organization and coordination."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState", _jsx(_components.span, { className: "token punctuation", children: "," }), " useEffect ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "MetricCard" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./MetricCard'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ActivityFeed" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./ActivityFeed'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "StatusIndicator" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./StatusIndicator'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Dashboard" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "dashboardTitle", _jsx(_components.span, { className: "token punctuation", children: "," }), " setDashboardTitle", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Analytics Dashboard'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsLoading", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "lastRefresh", _jsx(_components.span, { className: "token punctuation", children: "," }), " setLastRefresh", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "refreshCount", _jsx(_components.span, { className: "token punctuation", children: "," }), " setRefreshCount", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "11", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 1: Dashboard initialization with initialization-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Initializing dashboard...'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "15", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Simulate dashboard loading" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " initTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsLoading" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Dashboard initialization completed'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "1500" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token function", children: "clearTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "initTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Dashboard initialization cleanup completed'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// No dependencies - runs once on mount" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "27", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 2: Document title management with title-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " originalTitle ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "title" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "31", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "title" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'Loading Dashboard...'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "title" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "dashboardTitle", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: " - Live Metrics" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "title" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " originalTitle", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Document title restored'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "dashboardTitle", _jsx(_components.span, { className: "token punctuation", children: "," }), " isLoading", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends on title and loading state" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "43", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 3: Auto-refresh functionality with refresh-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " refreshTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token function", children: "setLastRefresh" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token function", children: "setRefreshCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prev" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " prev ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Dashboard auto-refreshed'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "30000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Auto-refresh every 30 seconds" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "52", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [" ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "refreshTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Auto-refresh cleanup completed'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends only on loading state" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Effect 4: Performance monitoring with monitoring-specific dependencies" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " performanceTimer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " memoryInfo ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "performance" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "memory" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "used" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "performance" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "memory" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "usedJSHeapSize" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1024" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1024" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Math" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "round" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "performance" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "memory" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "totalJSHeapSize" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1024" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1024" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "74", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "75", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Dashboard performance check:'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" refreshCount", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "memoryUsage" }), _jsx(_components.span, { className: "token operator", children: ":" }), " memoryInfo", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "timestamp" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toISOString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "80", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "60000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Performance check every minute" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "81", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "82", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "83", children: [" ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "performanceTimer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Performance monitoring cleanup completed'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: "," }), " refreshCount", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Depends on loading state and refresh count" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "88", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleManualRefresh" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [" ", _jsx(_components.span, { className: "token function", children: "setLastRefresh" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token function", children: "setRefreshCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prev" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " prev ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "92", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Manual refresh triggered'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "94", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "formatValue" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "value" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "value ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "1000000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1000000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "M" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "98", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "99", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "value ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "1000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "K" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "101", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " value", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "103", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "104", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "105", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isLoading", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "106", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "107", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dashboard-loading", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "108", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "loading-spinner", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "109", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "loading-text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Loading Dashboard..." }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "110", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "111", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "112", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "113", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "114", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "115", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dashboard", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "116", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dashboard-header", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "117", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "header-content", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "118", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "dashboardTitle", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "119", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "header-controls", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "120", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "121", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleManualRefresh", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "122", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "refresh-button", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "123", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "124", children: _jsx(_components.span, { className: "token plain-text", children: " 🔄 Refresh\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "125", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "126", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "refresh-info", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "127", children: [_jsx(_components.span, { className: "token plain-text", children: " Last updated: " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "lastRefresh", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLocaleTimeString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "128", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "129", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "130", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "131", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "StatusIndicator" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "132", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "133", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "134", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dashboard-content", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "135", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "metrics-grid", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "136", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "MetricCard" })] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "137", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "title" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Active Users", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "138", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "initialValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "1247" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "139", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "updateInterval" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "3000" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "140", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "formatValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "formatValue", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "141", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "👥", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "142", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "143", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "MetricCard" })] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "144", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "title" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Page Views", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "145", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "initialValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "15420" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "146", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "updateInterval" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "2000" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "147", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "formatValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "formatValue", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "148", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "📊", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "149", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "150", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "MetricCard" })] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "151", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "title" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Revenue", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "152", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "initialValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "8750" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "153", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "updateInterval" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "5000" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "154", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "formatValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "value" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "$" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token function", children: "formatValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "155", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "💰", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "156", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "157", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "MetricCard" })] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "158", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "title" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Conversion Rate", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "159", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "initialValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "3.2" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "160", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "updateInterval" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "4000" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "161", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "formatValue" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "value" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "value", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toFixed" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "%" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "162", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "icon" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "📈", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "163", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "164", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "165", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "166", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dashboard-sidebar", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "167", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "ActivityFeed" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "168", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "169", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "170", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "171", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dashboard-footer", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "172", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "footer-stats", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "173", children: [_jsx(_components.span, { className: "token plain-text", children: " Dashboard refreshed " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "refreshCount", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " times\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "174", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "175", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "footer-info", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "176", children: _jsx(_components.span, { className: "token plain-text", children: " Real-time Analytics Dashboard - Powered by React useEffect\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "177", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "178", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "179", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "180", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "181", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "182", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "183", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Dashboard" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import MetricCard from './MetricCard'" }), " imports the reusable metric component for composition"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [])" }), " creates initialization effect that runs once with loading simulation"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [dashboardTitle, isLoading])" }), " creates document title effect with appropriate dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [isLoading])" }), " creates auto-refresh effect that depends only on loading state"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect(() => { ... }, [isLoading, refreshCount])" }), " creates performance monitoring effect with monitoring-specific dependencies"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates professional dashboard architecture with multiple effects organized by concern, each handling specific responsibilities while coordinating through shared state to create sophisticated user experience."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your complete dashboard! Notice how multiple effects coordinate seamlessly while maintaining independence and professional organization."] }), "\n", _jsx(_components.h3, { children: "Step 5: Update the App Component and Add Professional Styling" }), "\n", _jsxs(_components.p, { children: ["Update your ", _jsx(_components.code, { children: "App.js" }), " file to import and use your Dashboard component, then add comprehensive CSS styling for a professional dashboard appearance."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "React" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Dashboard" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./Dashboard'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./styles.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "App" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "App", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Dashboard" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "12", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "App" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import Dashboard from './Dashboard'" }), " imports your complex dashboard component with multiple effects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import './styles.css'" }), " imports the CSS file for professional dashboard styling"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "" }), " renders your sophisticated dashboard component as a JSX element"] }), "\n", _jsx(_components.li, { children: "The App component acts as the root component that renders the complete dashboard application" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates React's component composition - how complex components with multiple organized effects integrate seamlessly into larger application architectures."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your complete React dashboard application! The Dashboard component with its multiple organized effects is now rendered in the App."] }), "\n", _jsx(_components.h3, { children: "Step 6: Test Multiple Effect Coordination and Professional Quality" }), "\n", _jsx(_components.p, { children: "Let's verify that your multiple effects are working correctly and demonstrating professional dashboard patterns." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Testing Steps:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Dashboard Initialization" }), ": Watch the loading state transition to the full dashboard"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Live Metrics" }), ": Observe metrics updating at different intervals with smooth animations"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Activity Feed" }), ": See activities appearing automatically with timestamps and auto-scroll"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Status Monitoring" }), ": Notice connection and health status updating independently"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "User Interactions" }), ": Test manual refresh button and auto-scroll toggle"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Document Title" }), ": Check browser tab title changes during loading and operation"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Console Monitoring" }), ": Review console logs showing each effect operating independently"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "What's Happening Behind the Scenes:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Effect 1 (Initialization)" }), ": Simulates dashboard loading with cleanup when component unmounts"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Effect 2 (Document Title)" }), ": Updates browser tab title based on loading state and dashboard title"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Effect 3 (Auto-refresh)" }), ": Triggers periodic dashboard refreshes with cleanup when loading changes"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Effect 4 (Performance Monitoring)" }), ": Monitors dashboard performance with memory usage tracking"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Component Effects" }), ": MetricCard, ActivityFeed, and StatusIndicator each manage their own effects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Effect Coordination" }), ": All effects coordinate through shared state while maintaining independence"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates the complete React multiple effect lifecycle - how different effects with different purposes, dependencies, and cleanup requirements work together to create sophisticated dashboard experiences."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " and thoroughly test your dashboard! Try interacting with it while watching how multiple effects coordinate seamlessly across all components."] }), "\n", _jsx(_components.h3, { children: "Step 7: Observe Professional Dashboard Architecture" }), "\n", _jsx(_components.p, { children: "Let's examine how your dashboard demonstrates professional React development patterns used in real-world applications." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Effect Organization Analysis:" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Dashboard Component Effects:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Initialization Effect" }), ": Handles dashboard loading simulation and cleanup"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Document Title Effect" }), ": Manages browser tab title with appropriate dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Auto-refresh Effect" }), ": Coordinates periodic updates with loading state dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Monitoring Effect" }), ": Tracks dashboard performance with systematic cleanup"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "MetricCard Component Effects:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Metric Update Effect" }), ": Manages value updates with interval-specific dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Animation Effect" }), ": Handles visual feedback with animation-specific cleanup"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "ActivityFeed Component Effects:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Activity Generation Effect" }), ": Creates realistic activity stream with continuous operation"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Auto-scroll Effect" }), ": Manages scroll behavior with activity and preference dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scroll Detection Effect" }), ": Handles user interaction with scroll behavior coordination"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "StatusIndicator Component Effects:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Connection Status Effect" }), ": Simulates connection management with independent lifecycle"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "System Health Effect" }), ": Monitors system health with connection-dependent updates"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why This Organization is Professional:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Single Responsibility" }), ": Each effect handles one specific dashboard concern"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Independent Lifecycle" }), ": Effects can be modified, debugged, or optimized independently"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Appropriate Dependencies" }), ": Each effect depends only on the state it actually uses"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Systematic Cleanup" }), ": Each effect manages its own resources with proper cleanup"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Coordinated Operation" }), ": Effects work together through shared state without tight coupling"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Real-World Application" }), ": This exact effect organization pattern is used by:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Google Analytics" }), ": For real-time metrics, activity tracking, and dashboard coordination"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "GitHub Insights" }), ": For repository analytics, activity feeds, and performance monitoring"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Vercel Analytics" }), ": For deployment metrics, performance tracking, and real-time updates"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Business Intelligence Platforms" }), ": For data visualization, user interaction, and system coordination"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " and observe how multiple effects create a sophisticated dashboard experience! Each effect operates independently while contributing to the overall professional user experience."] }), "\n", _jsx(_components.h2, { children: "Congratulations!" }), "\n", _jsx(_components.p, { children: "You've successfully built your first professional React dashboard with comprehensive useEffect mastery! You've applied crucial React component architecture concepts:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "React Concepts Mastered:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "useEffect Fundamentals" }), ": Applied effects for side effects like data fetching, document title updates, and browser API integration"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Effect Dependencies" }), ": Implemented multiple effects with carefully crafted dependency arrays for optimal performance"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Cleanup and Memory Management" }), ": Systematic cleanup across all effects preventing memory leaks and resource conflicts"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Multiple Effect Organization" }), ": Professional effect organization by concern with clear responsibilities and coordination"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Component Composition" }), ": Built sophisticated functionality using focused, reusable components with independent effects"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Real-World Application Patterns" }), ": Applied the same effect coordination used by major dashboard and analytics platforms"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Real-World Applications:" }) }), "\n", _jsx(_components.p, { children: "This dashboard demonstrates patterns you'll use in every complex React application:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Analytics Platforms" }), ": Google Analytics, Adobe Analytics, Mixpanel - real-time metric updates and user activity tracking"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Development Tools" }), ": GitHub Insights, Vercel Analytics, Netlify Dashboard - live deployment metrics and performance monitoring"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Business Intelligence" }), ": Tableau, Power BI, Looker - interactive dashboards with multiple data sources and real-time updates"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Social Media Platforms" }), ": Twitter Analytics, Facebook Insights, LinkedIn Analytics - engagement metrics and activity feeds"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "E-commerce Applications" }), ": Shopify Analytics, WooCommerce Reports, Amazon Seller Central - sales metrics and customer activity"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "What You've Built:" }) }), "\n", _jsx(_components.p, { children: "Your dashboard showcases React's multiple effect strengths:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional Effect Organization" }), ": Multiple effects organized by concern with clear separation and coordination"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Systematic Resource Management" }), ": All effects properly clean up resources preventing memory leaks and performance issues"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-time Data Coordination" }), ": Live metrics, activity feeds, and status monitoring working together seamlessly"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Interactive User Experience" }), ": Manual refresh, auto-scroll management, and responsive visual feedback"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scalable Architecture" }), ": Pattern works for simple dashboards or complex enterprise analytics platforms"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Professional Development Patterns:" }) }), "\n", _jsx(_components.p, { children: "You've learned industry-standard React practices:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Component Architecture" }), ": Organizing complex functionality into focused, maintainable components with independent effects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Effect Organization" }), ": Professional patterns for separating concerns and managing dependencies across multiple effects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Resource Management" }), ": Systematic approach to cleanup and memory management in long-running applications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "State Coordination" }), ": Modern patterns for coordinating multiple effects through shared state while maintaining independence"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": Effect dependency management for optimal performance in real-time applications"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "The Power of Professional Effect Organization:" }) }), "\n", _jsx(_components.p, { children: "You've experienced how organized effects transform React applications:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Maintainable Code" }), ": Each effect can be understood, modified, and debugged independently without affecting others"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scalable Architecture" }), ": Can add new effects and functionality without disrupting existing dashboard operations"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional Quality" }), ": Clean separation of concerns and systematic cleanup matching industry standards"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Excellence" }), ": Effects run only when necessary with appropriate dependencies and resource management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Predictable Behavior" }), ": Clear responsibilities and dependencies create reliable, professional application behavior"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Dashboard Impact Visualization:" }) }), "\n", _jsx(_components.p, { children: "Your real-time dashboard demonstrates the benefits of professional effect organization:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Independent Operation" }), ": Each effect operates on its own schedule and dependencies without conflicts"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Seamless Coordination" }), ": Effects share state efficiently while maintaining clean separation of concerns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Systematic Cleanup" }), ": All resources are properly managed preventing memory leaks in long-running applications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional User Experience" }), ": Smooth animations, real-time updates, and responsive interactions"] }), "\n"] }), "\n", _jsx(_components.p, { children: "You're now ready to build sophisticated React applications with multiple effects, real-time features, and professional-quality component architectures. Every React concept you'll learn builds on these effect organization fundamentals you've just mastered!" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Professional Development Skills:" }) }), "\n", _jsx(_components.p, { children: "You've learned essential skills for React career advancement:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Senior Developer Expertise" }), ": Effect organization and coordination skills essential for complex application development"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Technical Leadership" }), ": Understanding of component architecture patterns valued by employers and technical teams"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Production Application Experience" }), ": Skills for building applications that handle real-world complexity and scale"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Problem Solving Abilities" }), ": Expertise for debugging and optimizing complex React applications with multiple effects"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Real-World Application Impact:" }) }), "\n", _jsx(_components.p, { children: "Your effect organization skills apply directly to professional React development:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Dashboard Applications" }), ": Real-time analytics, business intelligence, and monitoring systems"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-Time Applications" }), ": Chat systems, collaboration tools, and live data visualization"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Gaming Applications" }), ": Animation loops, game state management, and user interaction coordination"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Enterprise Applications" }), ": Complex business applications with multiple data sources and user interactions"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Career Development Benefits:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Senior React Developer Roles" }), ": Multiple effect organization expertise essential for advanced positions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Technical Architecture" }), ": Ability to design and review complex component architectures for development teams"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Production Readiness" }), ": Experience with patterns used in real-world dashboard and analytics platforms"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": Skills for building efficient, scalable React applications that handle enterprise complexity"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Welcome to professional-grade React dashboard development. You now have the skills to build maintainable, scalable applications that coordinate multiple effects while maintaining clean, organized code!" }), "\n", _jsx(_components.p, { children: "The effect organization patterns you've mastered are the foundation for every advanced React concept you'll encounter - from custom hooks and performance optimization to real-time applications and enterprise architectures. Master these fundamentals, and you'll be ready to build any React application you can imagine!" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Next Steps in Your React Journey:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Custom Hooks" }), ": Extract your dashboard effect patterns into reusable hooks for multiple applications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": Learn advanced techniques for optimizing complex applications with multiple effects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-Time Integration" }), ": Apply these patterns to actual WebSocket connections and API integrations"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Enterprise Architecture" }), ": Scale these patterns to applications with hundreds of components and complex state management"] }), "\n"] }), "\n", _jsx(_components.p, { children: "You're now equipped with the essential skills for building professional React applications that manage complex state and effects while maintaining excellent code quality and user experience!" }), "\n", _jsx(_components.p, { children: "The smooth dashboard experience you've created might seem straightforward, but you've just implemented the same effect organization patterns used in the most sophisticated React applications worldwide. When you see multiple effects working together seamlessly - metrics updating, activities flowing, status indicators changing, and user interactions responding instantly - you're experiencing the power of React's organized effect system." }), "\n", _jsx(_components.p, { children: "Your useEffect mastery journey culminates here with a professional dashboard that demonstrates your readiness for senior React development roles and complex application architecture challenges!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };