"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", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Instructions: Build a Multi-Tab Dashboard with Code Splitting" }), "\n", _jsx(_components.p, { children: "In this exercise, you'll apply the code splitting concepts you've learned by building a professional multi-tab dashboard that demonstrates React.lazy() and Suspense in action. You'll create a realistic business dashboard where each tab loads its content lazily, providing immediate visual feedback about performance optimization benefits." }), "\n", _jsx(_components.h2, { children: "Concept Reinforcement: What You're Building" }), "\n", _jsx(_components.p, { children: "Before diving into implementation, let's reinforce the key React concepts you'll be applying:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Code Splitting with React.lazy()" }), ": You'll create separate components for each dashboard tab that load only when users click on them. This demonstrates how React.lazy() reduces initial bundle size and improves loading performance."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Suspense for Loading States" }), ": You'll implement smooth loading experiences using React's Suspense component, showing users professional loading indicators while tab content loads dynamically."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Dynamic Imports" }), ": You'll see how modern JavaScript's dynamic import syntax works with React.lazy() to load components on demand, just like professional business applications."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": This exercise demonstrates the same patterns used by major platforms like Google Analytics, Shopify Admin, and Salesforce to create fast, responsive dashboard experiences."] }), "\n", _jsx(_components.h2, { children: "Challenge: Build a Professional Dashboard" }), "\n", _jsx(_components.p, { children: "Your goal is to create a multi-tab dashboard with the following requirements:" }), "\n", _jsx(_components.h3, { children: "Dashboard Specifications" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Tab Navigation System" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Clean, professional tab interface with three sections: Analytics, Reports, and Settings" }), "\n", _jsx(_components.li, { children: "Active tab highlighting with smooth visual transitions" }), "\n", _jsx(_components.li, { children: "Tab switching should be instant and responsive" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Lazy Loading Implementation" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Each tab's content should load only when clicked for the first time" }), "\n", _jsx(_components.li, { children: "Subsequent clicks should show content immediately (cached)" }), "\n", _jsx(_components.li, { children: "Loading states should be smooth and informative" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Professional Loading Experience" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Loading spinners or indicators while tab content loads" }), "\n", _jsx(_components.li, { children: "Loading messages that match your dashboard's design" }), "\n", _jsx(_components.li, { children: "No jarring transitions or broken layouts during loading" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Interactive Dashboard Content" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Analytics tab: Simple metrics display with numbers and labels" }), "\n", _jsx(_components.li, { children: "Reports tab: Data list or table showing business information" }), "\n", _jsx(_components.li, { children: "Settings tab: Form controls for user preferences" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Visual Design Requirements" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Professional appearance suitable for a business application" }), "\n", _jsx(_components.li, { children: "Responsive design that works on different screen sizes" }), "\n", _jsx(_components.li, { children: "Consistent styling across all tabs and loading states" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Tab Navigation" }), ": Clicking tabs switches content smoothly\n✅ ", _jsx(_components.strong, { children: "Lazy Loading" }), ": Tab content loads only when first clicked\n✅ ", _jsx(_components.strong, { children: "Loading States" }), ": Professional loading indicators during content loading\n✅ ", _jsx(_components.strong, { children: "Performance" }), ": Initial page load is fast, with content loading on demand\n✅ ", _jsx(_components.strong, { children: "Professional Design" }), ": Dashboard looks like a real business application\n✅ ", _jsx(_components.strong, { children: "Code Organization" }), ": Each tab component is in its own file with proper imports"] }), "\n", _jsx(_components.h2, { children: "Independent Learning Challenge" }), "\n", _jsx(_components.p, { children: "Before looking at the step-by-step guide, try building the dashboard yourself! This is an excellent opportunity to apply your React.lazy() and Suspense knowledge independently." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concepts to Use" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "React.lazy() for creating lazy-loaded tab components" }), "\n", _jsx(_components.li, { children: "Suspense for handling loading states" }), "\n", _jsx(_components.li, { children: "useState for managing active tab state" }), "\n", _jsx(_components.li, { children: "Dynamic imports for component loading" }), "\n", _jsx(_components.li, { children: "Component composition for clean architecture" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Implementation Hints" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Start with a main App component that manages tab state" }), "\n", _jsx(_components.li, { children: "Create separate components for each tab (Analytics, Reports, Settings)" }), "\n", _jsx(_components.li, { children: "Wrap lazy components with Suspense boundaries" }), "\n", _jsx(_components.li, { children: "Design loading states that match your dashboard theme" }), "\n", _jsx(_components.li, { children: "Use conditional rendering to show the active tab" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Expected Behavior" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Dashboard loads immediately with tab navigation visible" }), "\n", _jsx(_components.li, { children: "Clicking a tab for the first time shows a loading state, then content" }), "\n", _jsx(_components.li, { children: "Clicking previously visited tabs shows content immediately" }), "\n", _jsx(_components.li, { children: "Loading states are smooth and professional" }), "\n"] }), "\n", _jsx(_components.p, { children: "Take 10-15 minutes to attempt this independently. If you get stuck or want to see the complete implementation, continue to the step-by-step guide below." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Step-by-Step React Implementation Guide" }), "\n", _jsx(_components.p, { children: "If you attempted the challenge above or want to see a complete implementation, follow these detailed steps to build your code-splitting dashboard." }), "\n", _jsx(_components.h3, { children: "Step 1: Set Up the Main App Component" }), "\n", _jsx(_components.p, { children: "Let's start by creating the foundation of our dashboard with tab navigation and state management." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": The main App component manages which tab is active and provides the structure for our lazy-loaded content. This demonstrates how code splitting integrates with normal React state management."] }), "\n", _jsx(_components.p, { children: "Create your main App component with tab navigation:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// App.js" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", 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: "," }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Suspense" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " lazy ", _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: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./App.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 comment", children: "// Lazy load tab components - they'll load only when needed" }), "\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 maybe-class-name", children: "Analytics" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "lazy" }), _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 keyword module", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./Analytics'" }), _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 maybe-class-name", children: "Reports" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "lazy" }), _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 keyword module", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./Reports'" }), _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: "8", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Settings" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "lazy" }), _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 keyword module", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./Settings'" }), _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: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", 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: "11", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "activeTab", _jsx(_components.span, { className: "token punctuation", children: "," }), " setActiveTab", _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'" }), _jsx(_components.span, { className: "token punctuation", 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", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "renderTabContent" }), " ", _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: "14", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "activeTab", _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 keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'analytics'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Analytics" }), " ", _jsx(_components.span, { className: "token operator", 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: "17", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'reports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Reports" }), " ", _jsx(_components.span, { className: "token operator", 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: "19", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'settings'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Settings" }), " ", _jsx(_components.span, { className: "token operator", 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: "21", 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: "22", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Analytics" }), " ", _jsx(_components.span, { className: "token operator", 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: "23", 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 punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "25", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "26", 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: "27", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"dashboard\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "header className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"dashboard-header\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Business" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Dashboard" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "header", _jsx(_components.span, { className: "token operator", 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 operator", children: "<" }), "nav className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"tab-navigation\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" className", _jsx(_components.span, { className: "token operator", 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: "tab-button " }), _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: "35", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" activeTab ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'analytics'" }), " ", _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"] }) }) }), _jsxs(_components.span, { className: "code-line line-number", line: "36", 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: "37", children: [" onClick", _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 punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setActiveTab" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'analytics'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Analytics" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" className", _jsx(_components.span, { className: "token operator", 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: "tab-button " }), _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: "43", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" activeTab ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'reports'" }), " ", _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"] }) }) }), _jsxs(_components.span, { className: "code-line line-number", line: "44", 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: "45", children: [" onClick", _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 punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setActiveTab" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'reports'" }), _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 operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Reports" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" className", _jsx(_components.span, { className: "token operator", 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: "tab-button " }), _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: "51", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" activeTab ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'settings'" }), " ", _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"] }) }) }), _jsxs(_components.span, { className: "code-line line-number", line: "52", 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: "53", children: [" onClick", _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 punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setActiveTab" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'settings'" }), _jsx(_components.span, { className: "token punctuation", 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 operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Settings" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "nav", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "58", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "main className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"tab-content\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Suspense" }), " fallback", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"loading\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Loading" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token function", children: "renderTabContent" }), _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: "62", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Suspense" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "main", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", 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: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "67", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "68", 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", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code accomplishes" }), ": We're using React.lazy() to create lazy-loaded components for each tab. The Suspense component wraps our tab content and shows a loading message while components load. The useState hook manages which tab is currently active."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your app" }), " to see the basic structure. You should see tab buttons, but clicking them will show loading states since we haven't created the tab components yet."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the Analytics Tab Component" }), "\n", _jsx(_components.p, { children: "Now let's create our first lazy-loaded tab component with realistic analytics content." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": This demonstrates how to create components that work with React.lazy(). Each component must be in its own file and use default export for lazy loading to work properly."] }), "\n", _jsx(_components.p, { children: "Create the Analytics component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Analytics.js" }), "\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: "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: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./Analytics.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: "Analytics" }) }), _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" }), " metrics ", _jsx(_components.span, { className: "token operator", 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 punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "label" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Total Users'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'12,847'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "change" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'+12%'" }), " ", _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 punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "label" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Revenue'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'$45,230'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "change" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'+8%'" }), " ", _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 punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "label" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Conversion Rate'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'3.2%'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "change" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'+0.5%'" }), " ", _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 punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "label" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Page Views'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'89,432'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "change" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'+15%'" }), " ", _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: "]" }), _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 control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"analytics-container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Analytics" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Overview" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"metrics-grid\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "metrics", _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 punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["metric", _jsx(_components.span, { className: "token punctuation", children: "," }), " index"] }), _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 operator", children: "<" }), "div key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "index", _jsx(_components.span, { className: "token punctuation", children: "}" }), " className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"metric-card\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "metric", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "label" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"metric-value\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "metric", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"metric-change positive\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "metric", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "change" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", 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 punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"chart-placeholder\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "📊 ", _jsx(_components.span, { className: "token maybe-class-name", children: "Chart" }), " visualization would go here", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", 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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "33", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "34", 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: "Analytics" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Default export required for React.lazy()" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code demonstrates" }), ": This component shows realistic analytics data in a professional layout. The default export is crucial for React.lazy() to work properly. When users click the Analytics tab for the first time, this component will load dynamically."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your app" }), " and click the Analytics tab. You should see a brief loading state, then the analytics content appears."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the Reports Tab Component" }), "\n", _jsx(_components.p, { children: "Let's create the Reports component with a data table to show different content loading lazily." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": This shows how different types of content can be lazy-loaded, demonstrating the flexibility of code splitting for various UI patterns."] }), "\n", _jsx(_components.p, { children: "Create the Reports component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Reports.js" }), "\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: "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: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./Reports.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: "Reports" }) }), _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" }), " reportData ", _jsx(_components.span, { className: "token operator", 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 punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Monthly Sales Report'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "date" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'2024-01-15'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Complete'" }), _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: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", 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 literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _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: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'User Engagement Analysis'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "date" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'2024-01-14'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'In Progress'" }), _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 punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", 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 literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Marketing Campaign Results'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "date" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'2024-01-13'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Complete'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", 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: "25", 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 literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), _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: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Customer Satisfaction Survey'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "date" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'2024-01-12'" }), _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: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Pending'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", 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: "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 keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"reports-container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Reports" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Dashboard" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"reports-table\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "table", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "thead", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "tr", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "th", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Report" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Name" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "th", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "th", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Date" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "th", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "th", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Status" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "th", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "tr", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "thead", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "tbody", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "reportData", _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: "report" }), " ", _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: "47", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "tr key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "report", _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 operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "td", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "report", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "td", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "td", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "report", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "date" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "td", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "td", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" className", _jsx(_components.span, { className: "token operator", 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: "status " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "report", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "status" }), "\n"] })] })] }), _jsx(_components.span, { className: "code-line line-number", line: "53", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [_jsxs(_components.span, { className: "token template-string", children: [_jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "replace" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "' '" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'-'" }), _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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "report", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "status" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "td", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "tr", _jsx(_components.span, { className: "token operator", 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: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "tbody", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "table", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"generate-report-btn\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Generate" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "New" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Report" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", 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: "67", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "68", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "69", 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: "Reports" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code demonstrates" }), ": This component shows how tabular data can be lazy-loaded. The component only loads when users click the Reports tab, reducing the initial bundle size while providing rich functionality when needed."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Test the lazy loading" }), " by clicking between tabs. Notice how the first click on Reports shows a loading state, but subsequent clicks are instant."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the Settings Tab Component" }), "\n", _jsx(_components.p, { children: "Let's create the final tab component with form controls to complete our dashboard." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": This demonstrates how interactive forms can be lazy-loaded, showing that code splitting works with all types of React components, not just display components."] }), "\n", _jsx(_components.p, { children: "Create the Settings component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Settings.js" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", 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: "}" })] }), " ", _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: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./Settings.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: "Settings" }) }), _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: "[" }), "notifications", _jsx(_components.span, { className: "token punctuation", children: "," }), " setNotifications", _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: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "darkMode", _jsx(_components.span, { className: "token punctuation", children: "," }), " setDarkMode", _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: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "autoSave", _jsx(_components.span, { className: "token punctuation", children: "," }), " setAutoSave", _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"] }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", 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: "11", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"settings-container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Dashboard" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Settings" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"settings-form\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"setting-group\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "input\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"checkbox\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" checked", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "notifications", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" onChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "e" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setNotifications" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "checked" }), _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 operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Enable" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Notifications" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"setting-description\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Receive" }), " alerts about important dashboard updates\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\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 operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"setting-group\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "input\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"checkbox\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" checked", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "darkMode", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" onChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "e" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setDarkMode" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "checked" }), _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 operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Dark" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Mode" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"setting-description\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Switch" }), " to dark theme ", _jsx(_components.span, { className: "token keyword control-flow", children: "for" }), " better viewing ", _jsx(_components.span, { className: "token keyword", children: "in" }), " low light\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", 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 operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"setting-group\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "input\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"checkbox\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" checked", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "autoSave", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" onChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "e" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setAutoSave" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "checked" }), _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 operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Auto" }), _jsx(_components.span, { className: "token operator", children: "-" }), "save ", _jsx(_components.span, { className: "token maybe-class-name", children: "Changes" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "label", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"setting-description\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Automatically" }), " save your dashboard preferences\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "55", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"save-settings-btn\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Save" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Settings" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "59", 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: "60", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\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 module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Settings" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code demonstrates" }), ": This component shows how interactive forms with state management can be lazy-loaded. The Settings component includes its own useState hooks and only loads when needed, keeping the initial bundle focused on essential functionality."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Test all three tabs" }), " to see the complete lazy loading experience. Each tab should load smoothly with professional loading states."] }), "\n", _jsx(_components.h3, { children: "Step 5: Style Your Dashboard with Professional CSS" }), "\n", _jsx(_components.p, { children: "Now let's add professional styling to make our dashboard look like a real business application." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": Professional styling makes the loading states smooth and creates a polished user experience that demonstrates the quality possible with code splitting."] }), "\n", _jsx(_components.p, { children: "Create the main App.css file:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* App.css */" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", 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 property", children: "max-width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1200" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " auto", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token property", children: "font-family" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " -apple-system", _jsx(_components.span, { className: "token punctuation", children: "," }), " BlinkMacSystemFont", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'Segoe UI'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " Roboto", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" sans-serif", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".dashboard-header" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token property", children: "text-align" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", 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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".dashboard-header" }), " h1"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2.5" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", 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: "19", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "20", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".tab-navigation" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token property", children: "border-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " solid ", _jsx(_components.span, { className: "token hexcode color", children: "#ecf0f1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _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: "}" }), "\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 selector", children: _jsx(_components.span, { className: "token class", children: ".tab-button" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token property", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token property", children: "cursor" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " pointer", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token property", children: "border-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token unit", children: "px" }), " solid ", _jsx(_components.span, { className: "token color", children: "transparent" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " all ", _jsx(_components.span, { className: "token number", children: "0.3" }), _jsx(_components.span, { className: "token unit", children: "s" }), " ease", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".tab-button" }), _jsx(_components.span, { className: "token pseudo-class", children: ":hover" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f8f9fa" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _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: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".tab-button" }), _jsx(_components.span, { className: "token class", children: ".active" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#3498db" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token property", children: "border-bottom-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#3498db" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f8f9fa" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "48", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".tab-content" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token property", children: "min-height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "400" }), _jsx(_components.span, { className: "token unit", children: "px" }), _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"] }), _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 selector", children: _jsx(_components.span, { className: "token class", children: ".loading" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token property", children: "justify-content" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token property", children: "align-items" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.2" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _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: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this CSS accomplishes" }), ": Creates a professional dashboard appearance with smooth tab transitions and a clean loading state that maintains layout stability while components load."] }), "\n", _jsx(_components.h3, { children: "Step 6: Add Component-Specific Styling" }), "\n", _jsx(_components.p, { children: "Let's add specific styling for each tab component to create a cohesive, professional design." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": Component-specific styling demonstrates how CSS organization works with code splitting, keeping styles modular and loading only when needed."] }), "\n", _jsx(_components.p, { children: "Create Analytics.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* Analytics.css */" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".analytics-container" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _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: "4", children: [_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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".analytics-container" }), " h2"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".metrics-grid" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "grid-template-columns" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "repeat" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "auto-fit", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token function", children: "minmax" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "250" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "fr" }), _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: "14", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _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: "}" }), "\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 selector", children: _jsx(_components.span, { className: "token class", children: ".metric-card" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _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 number", children: "0" }), _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 number", children: "0.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: "23", children: [" ", _jsx(_components.span, { className: "token property", children: "text-align" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "25", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".metric-card" }), " h3"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.9" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _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: "30", children: [" ", _jsx(_components.span, { className: "token property", children: "text-transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " uppercase", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token property", children: "letter-spacing" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "33", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".metric-value" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2.5" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " bold", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "40", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".metric-change" }), _jsx(_components.span, { className: "token class", children: ".positive" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#27ae60" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " bold", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "45", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".chart-placeholder" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f8f9fa" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token property", children: "text-align" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token property", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " dashed ", _jsx(_components.span, { className: "token hexcode color", children: "#bdc3c7" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create Reports.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* Reports.css */" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".reports-container" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _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: "4", children: [_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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".reports-container" }), " h2"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".reports-table" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token property", children: "overflow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " hidden", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _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 number", children: "0" }), _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 number", children: "0.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: "16", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _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: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "18", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".reports-table" }), " table"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", 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 property", children: "border-collapse" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " collapse", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "23", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".reports-table" }), " th"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#34495e" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token property", children: "text-align" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " left", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "600" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [_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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".reports-table" }), " td"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token property", children: "border-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "px" }), " solid ", _jsx(_components.span, { className: "token hexcode color", children: "#ecf0f1" }), _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: "}" }), "\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 selector", children: _jsx(_components.span, { className: "token class", children: ".status" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.85" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " bold", _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: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "43", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".status" }), _jsx(_components.span, { className: "token class", children: ".complete" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#d5f4e6" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#27ae60" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "48", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".status" }), _jsx(_components.span, { className: "token class", children: ".in-progress" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#fef9e7" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f39c12" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "53", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".status" }), _jsx(_components.span, { className: "token class", children: ".pending" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#fadbd8" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#e74c3c" }), _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"] }), _jsx(_components.span, { className: "code-line line-number", line: "58", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".generate-report-btn" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#3498db" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token property", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "24" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "6" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token property", children: "cursor" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " pointer", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " background ", _jsx(_components.span, { className: "token number", children: "0.3" }), _jsx(_components.span, { className: "token unit", children: "s" }), " ease", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "69", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".generate-report-btn" }), _jsx(_components.span, { className: "token pseudo-class", children: ":hover" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2980b9" }), _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"] })] }) }), "\n", _jsx(_components.p, { children: "Create Settings.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* Settings.css */" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".settings-container" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _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: "4", children: [_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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".settings-container" }), " h2"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".settings-form" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _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 number", children: "0" }), _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 number", children: "0.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: "16", 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 selector", children: _jsx(_components.span, { className: "token class", children: ".setting-group" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token property", children: "padding-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token property", children: "border-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "px" }), " solid ", _jsx(_components.span, { className: "token hexcode color", children: "#ecf0f1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "23", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".setting-group" }), _jsx(_components.span, { className: "token pseudo-class", children: ":last-child" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token property", children: "border-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", 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: "27", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "28", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".setting-group" }), " label"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token property", children: "align-items" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token property", children: "cursor" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " pointer", _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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".setting-group" }), " input", _jsxs(_components.span, { className: "token attribute", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token attr-value", children: "'checkbox'" }), _jsx(_components.span, { className: "token punctuation", 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 property", children: "margin-right" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "scale" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1.2" }), _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: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".setting-description" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "32" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.9" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "48", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".save-settings-btn" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#27ae60" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" ", _jsx(_components.span, { className: "token property", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "24" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "6" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token property", children: "cursor" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " pointer", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " background ", _jsx(_components.span, { className: "token number", children: "0.3" }), _jsx(_components.span, { className: "token unit", children: "s" }), " ease", _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: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".save-settings-btn" }), _jsx(_components.span, { className: "token pseudo-class", children: ":hover" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#229954" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Test your complete dashboard" }), " by clicking through all tabs. You should see:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Professional styling that looks like a real business application" }), "\n", _jsx(_components.li, { children: "Smooth loading states when clicking tabs for the first time" }), "\n", _jsx(_components.li, { children: "Instant loading for previously visited tabs" }), "\n", _jsx(_components.li, { children: "Responsive design that works on different screen sizes" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Learning Reinforcement: What You've Accomplished" }), "\n", _jsx(_components.p, { children: "Congratulations! You've successfully built a professional multi-tab dashboard that demonstrates advanced React performance optimization. Let's review what you've mastered:" }), "\n", _jsx(_components.h3, { children: "React Concepts You've Applied" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Code Splitting Mastery" }), ": You've implemented React.lazy() to load components only when needed, reducing initial bundle size and improving loading performance."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Suspense Integration" }), ": You've used React's Suspense component to provide smooth loading states while components load dynamically."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Component Architecture" }), ": You've organized your application into separate, focused components that load independently, demonstrating professional React development patterns."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "State Management" }), ": You've combined lazy loading with React state management, showing how performance optimization integrates with normal React functionality."] }), "\n", _jsx(_components.h3, { children: "Real-World Skills You've Developed" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": You can now identify opportunities for code splitting and implement solutions that make applications load faster."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Professional Development Patterns" }), ": You've learned the same techniques used by major platforms like Google Analytics, Shopify Admin, and Salesforce."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "User Experience Design" }), ": You understand how to create smooth loading experiences that keep users engaged while content loads."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Scalable Architecture" }), ": You can build applications that remain fast and responsive as they grow in complexity."] }), "\n", _jsx(_components.h3, { children: "Professional Impact" }), "\n", _jsx(_components.p, { children: "The dashboard you've built demonstrates several key professional development skills:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Advanced React Knowledge" }), ": Understanding code splitting shows you can optimize applications for production use"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Awareness" }), ": You can identify and solve real-world performance bottlenecks"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "User-Centered Design" }), ": You create applications that prioritize user experience and perceived performance"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scalable Thinking" }), ": You build applications that can grow without sacrificing performance"] }), "\n"] }), "\n", _jsx(_components.p, { children: "This dashboard is portfolio-worthy and demonstrates the kind of performance optimization skills that separate junior from senior React developers. You've mastered one of the most important techniques for building fast, professional React applications." }), "\n", _jsx(_components.p, { children: "Your applications will never load the same way again – you now have the knowledge and skills to create React applications that load intelligently, perform efficiently, and provide excellent user experiences at any scale." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };