"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Instructions: Build a Button Theme Showcase" }), "\n", _jsx(_components.p, { children: "In this hands-on exercise, you'll create an interactive Button Theme Showcase that demonstrates all the React styling approaches you learned in the lesson. This project will help you master inline styles, CSS classes, style objects, and conditional styling while building a professional-looking component library preview." }), "\n", _jsx(_components.h2, { children: "Concept Reinforcement" }), "\n", _jsx(_components.p, { children: "Before you start coding, let's reinforce the key React styling concepts you'll be applying:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Inline Styles" }), ": You'll use JavaScript objects to create dynamic styling that responds to component state and user interactions. Remember that React inline styles use camelCase property names and can include JavaScript expressions for dynamic values."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "CSS Classes with className" }), ": You'll apply CSS classes using React's className attribute to provide foundation styling, animations, and hover effects. These classes will be defined in your CSS file and applied conditionally based on component state."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Style Objects" }), ": You'll create reusable JavaScript objects that define consistent styling patterns for different button themes and sizes. These objects can be combined and reused across multiple components."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Conditional Styling" }), ": You'll make your buttons respond to user interactions and application state by changing their appearance based on different conditions like hover, active states, and theme preferences."] }), "\n", _jsx(_components.p, { children: "This exercise connects theory to practice by showing you how professional React developers combine all these styling approaches to create polished, interactive user interfaces that feel responsive and intuitive." }), "\n", _jsx(_components.h2, { children: "The Challenge: Interactive Button Showcase" }), "\n", _jsx(_components.p, { children: "Your goal is to build a complete Button Theme Showcase that includes:" }), "\n", _jsx(_components.h3, { children: "Core Requirements" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Multiple Button Themes" }), ": Create buttons with different visual themes (primary, secondary, success, warning, danger)"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Interactive States" }), ": Buttons should respond to hover, active/pressed, and disabled states with smooth visual feedback"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Theme Toggle" }), ": Include a toggle switch that changes the entire showcase between light and dark themes"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Size Variations" }), ": Demonstrate buttons in different sizes (small, medium, large) using the same styling system"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Animations" }), ": Smooth transitions and hover effects that make interactions feel polished and responsive"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Component Architecture" }), ": Separate components in individual files with proper import/export patterns"] }), "\n", _jsx(_components.h3, { children: "Success Criteria" }), "\n", _jsx(_components.p, { children: "Your completed showcase should demonstrate:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inline styles" }), " for dynamic state changes (hover, pressed, theme-dependent colors)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "CSS classes" }), " for foundation styling, animations, and layout"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Style objects" }), " for reusable theme and size patterns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Conditional logic" }), " that changes appearance based on state and props"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional appearance" }), " with smooth transitions and intuitive interactions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Clean component architecture" }), " with each component in its own file"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Component Logic Requirements" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "ButtonShowcase Component" }), ": Main container that manages the theme toggle and displays all button variations"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "StyledButton Component" }), ": Reusable button component that accepts props for theme, size, and state, demonstrating all styling approaches"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Theme Management" }), ": Use React state to manage light/dark theme preference and apply it consistently across all components"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Interactive Feedback" }), ": Buttons should provide immediate visual feedback for all user interactions (hover, click, focus)"] }), "\n", _jsx(_components.h2, { children: "Try It Yourself First!" }), "\n", _jsx(_components.p, { children: "Before looking at the step-by-step guide, try building this showcase yourself! Use the React concepts you've learned:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "React Concepts to Apply:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useState" }), " hook for managing theme state and button interaction states"] }), "\n", _jsx(_components.li, { children: "Component props for passing theme, size, and variant information" }), "\n", _jsx(_components.li, { children: "Event handlers for user interactions (onClick, onMouseEnter, onMouseLeave)" }), "\n", _jsx(_components.li, { children: "Conditional rendering and styling based on state and props" }), "\n", _jsx(_components.li, { children: "Component composition with proper import/export patterns" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Styling Approaches to Use:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "CSS classes for layout, transitions, and base styling" }), "\n", _jsx(_components.li, { children: "Style objects for theme colors and size variations" }), "\n", _jsx(_components.li, { children: "Inline styles for dynamic state-dependent styling" }), "\n", _jsx(_components.li, { children: "Conditional class application based on component state" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Suggested Approach:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Start with the basic component structure and file organization" }), "\n", _jsx(_components.li, { children: "Create the CSS foundation with classes for layout and animations" }), "\n", _jsx(_components.li, { children: "Build style objects for themes and sizes" }), "\n", _jsx(_components.li, { children: "Add interactive state management with useState" }), "\n", _jsx(_components.li, { children: "Implement conditional styling that responds to state changes" }), "\n", _jsx(_components.li, { children: "Add the theme toggle functionality" }), "\n", _jsx(_components.li, { children: "Polish with smooth transitions and professional styling" }), "\n"] }), "\n", _jsx(_components.p, { children: "Take 10-15 minutes to attempt this on your own. It's perfectly fine if you get stuck - that's part of the learning process! When you're ready for guidance, continue to the step-by-step implementation below." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Step-by-Step React Implementation Guide" }), "\n", _jsx(_components.p, { children: "If you tried the challenge above and want guidance, or if you prefer to follow along step-by-step, here's how to build the Button Theme Showcase:" }), "\n", _jsx(_components.h3, { children: "Step 1: Set Up the Component Architecture" }), "\n", _jsx(_components.p, { children: "First, let's create the proper file structure with separate components. This demonstrates professional React development patterns where each component has its own file." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Create the main App component:" }) }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token 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" }), " ", _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 imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ButtonShowcase" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./ButtonShowcase'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./styles.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "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: "7", 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: "8", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "app", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "ButtonShowcase" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", 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: "12", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "13", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "14", 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: "Why this structure matters" }), ": We're separating concerns by having App.js serve as the root container while ButtonShowcase handles all the button-related functionality. This makes our code more maintainable and follows React best practices."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your code" }), " to see the basic structure. You should see a simple app container (though ButtonShowcase doesn't exist yet, so you'll see an error - that's expected!)."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the Foundation CSS Classes" }), "\n", _jsx(_components.p, { children: "Before building React components, let's establish our CSS foundation. This demonstrates how CSS classes provide the stable foundation for React styling." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Add these styles to your styles.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: "/* styles.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: ".app" }) }), " ", _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: "min-height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "vh" }), _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: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "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: "5", 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: "6", children: [" sans-serif", _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: "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: "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: ".showcase-container" }) }), " ", _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: "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: "12", 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: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "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: "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: "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: "15", 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: "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: ".showcase-header" }) }), " ", _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: "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: "20", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _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: "21", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "22", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".showcase-title" }) }), " ", _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: "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: "25", children: [" ", _jsx(_components.span, { className: "token property", children: "font-weight" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "700" }), _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: "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: "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: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".showcase-subtitle" }) }), " ", _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: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.125" }), _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: "31", children: [" ", _jsx(_components.span, { className: "token property", children: "opacity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.8" }), _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: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "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: "33", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "34", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".theme-toggle" }) }), " ", _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: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " inline-flex", _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: "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: "38", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.75" }), _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: "39", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.75" }), _jsx(_components.span, { className: "token unit", children: "rem" }), " ", _jsx(_components.span, { className: "token number", children: "1.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: "40", 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" }), " solid", _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: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "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: "42", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _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: "43", 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: "44", 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: "45", 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: "46", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "47", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".theme-toggle" }), _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: "49", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "translateY" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "-2" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token 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: "4" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _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.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: "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: ".button-grid" }) }), " ", _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: ":" }), " grid", _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: "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: "200" }), _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: "56", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "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: "57", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-top" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _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: "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: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".button-section" }) }), " ", _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: "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: "62", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "63", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".section-title" }) }), " ", _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: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.25" }), _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: "66", 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: "67", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _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: "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: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".button-group" }) }), " ", _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: "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: "72", children: [" ", _jsx(_components.span, { className: "token property", children: "flex-direction" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _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: "74", 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: "75", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "76", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".styled-button" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", 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: "79", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.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: "80", 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: "81", 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: "82", 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: "83", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " inline-flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", 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: "85", 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: "86", children: [" ", _jsx(_components.span, { className: "token property", children: "text-decoration" }), _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: "87", children: [" ", _jsx(_components.span, { className: "token property", children: "outline" }), _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: "88", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "89", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".styled-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: "91", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "translateY" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "-2" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "92", children: [" ", _jsx(_components.span, { className: "token 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: "4" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _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.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: "93", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "94", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".styled-button" }), _jsx(_components.span, { className: "token pseudo-class", children: ":active" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "translateY" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", 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: "4" }), _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.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: "98", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "99", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".styled-button" }), _jsx(_components.span, { className: "token pseudo-class", children: ":disabled" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "101", children: [" ", _jsx(_components.span, { className: "token property", children: "cursor" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " not-allowed", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [" ", _jsx(_components.span, { className: "token property", children: "opacity" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.6" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "103", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none ", _jsx(_components.span, { className: "token important", children: "!important" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "104", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none ", _jsx(_components.span, { className: "token important", children: "!important" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "105", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why we start with CSS" }), ": These classes provide the foundation and performance-optimized animations. CSS transitions are much more efficient than JavaScript-driven animations, and by defining them first, we ensure smooth interactions."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create Style Objects for Themes and Sizes" }), "\n", _jsx(_components.p, { children: "Now let's create reusable style objects that demonstrate how to organize styling patterns in React." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Create the ButtonShowcase component:" }) }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// ButtonShowcase.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 imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "StyledButton" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./StyledButton'" }), _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: "// Style objects for reusable theme patterns" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " themes ", _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 literal-property property", children: "light" }), _jsx(_components.span, { className: "token operator", 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: "background" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#ffffff'" }), _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: "text" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#333333'" }), _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: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#e0e0e0'" }), _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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "dark" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "background" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#1a1a1a'" }), _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: "text" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#ffffff'" }), _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: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#404040'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token 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: [_jsx(_components.span, { className: "token comment", children: "// Style objects for button color schemes" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " buttonThemes ", _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 literal-property property", children: "primary" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "base" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#007bff'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "hover" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#0056b3'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "active" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#004085'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "secondary" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "base" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#6c757d'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "hover" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#545b62'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "active" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#3d4142'" }), " ", _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 literal-property property", children: "success" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "base" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#28a745'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "hover" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#1e7e34'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "active" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#155724'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "warning" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "base" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#ffc107'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "hover" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#d39e00'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "active" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#b08800'" }), " ", _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 literal-property property", children: "danger" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "base" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#dc3545'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "hover" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#bd2130'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "active" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'#a71e2a'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "27", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [_jsx(_components.span, { className: "token comment", children: "// Style objects for size variations" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " buttonSizes ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "small" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'0.5rem 1rem'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "fontSize" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'0.875rem'" }), " ", _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 literal-property property", children: "medium" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'0.75rem 1.5rem'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "fontSize" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'1rem'" }), " ", _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 literal-property property", children: "large" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'1rem 2rem'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "fontSize" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'1.125rem'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "34", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "35", 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: "ButtonShowcase" }) }), _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: "36", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setCurrentTheme", _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: "'light'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Calculate dynamic styles based on current theme" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " showcaseStyle ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "backgroundColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " themes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " themes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "1px solid " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "themes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "border" }), _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: "43", 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: "44", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "toggleTheme" }), " ", _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: "46", children: [" ", _jsx(_components.span, { className: "token function", children: "setCurrentTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "currentTheme ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'light'" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'dark'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'light'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token punctuation", 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 keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "showcase-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "showcaseStyle", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "showcase-header", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "showcase-title", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Button Theme Showcase" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "showcase-subtitle", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "54", children: _jsx(_components.span, { className: "token plain-text", children: " Demonstrating React styling approaches with interactive\n" }) }), _jsx(_components.span, { className: "code-line line-number", line: "55", children: _jsx(_components.span, { className: "token plain-text", children: " buttons\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "58", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "theme-toggle", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "toggleTheme", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "60", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "61", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " themes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "text" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "62", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "borderColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " themes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "border" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "63", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [_jsx(_components.span, { className: "token plain-text", children: " 🌙 Switch to " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "currentTheme ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'light'" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'Dark'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Light'" }), _jsx(_components.span, { className: "token punctuation", 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 plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "66", children: _jsx(_components.span, { className: "token plain-text", children: " Theme\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "69", children: _jsx(_components.span, { className: "token plain-text", children: "\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "button-grid", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Object" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "keys" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "buttonThemes", _jsx(_components.span, { className: "token punctuation", children: ")" }), _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: "variant" }), " ", _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: "72", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "variant", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "button-section", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h3"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "section-title", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "variant", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "charAt" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toUpperCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " variant", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _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 string", children: "' '" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "75", children: _jsx(_components.span, { className: "token plain-text", children: " Buttons\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "button-group", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token known-class-name class-name", children: "Object" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "keys" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "buttonSizes", _jsx(_components.span, { className: "token punctuation", children: ")" }), _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: "size" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "StyledButton" })] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "80", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "size", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "81", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "variant" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "variant", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "82", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "size" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "size", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "83", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "theme" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "84", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "buttonThemes" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "buttonThemes", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "85", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "buttonSizes" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "buttonSizes", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "size", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "charAt" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toUpperCase" }), _jsx(_components.span, { className: "token punctuation", 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: "88", children: [" size", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "slice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _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 string", children: "' '" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "variant", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "92", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "98", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "99", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "100", 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: "ButtonShowcase" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why we use style objects" }), ": The ", _jsx(_components.code, { children: "themes" }), ", ", _jsx(_components.code, { children: "buttonThemes" }), ", and ", _jsx(_components.code, { children: "buttonSizes" }), " objects create reusable patterns that keep our styling consistent and maintainable. We can easily add new themes or sizes by updating these objects."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your code" }), " to see the showcase structure. You'll see an error about StyledButton not existing - that's our next step!"] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the Interactive StyledButton Component" }), "\n", _jsx(_components.p, { children: "Now let's build the StyledButton component that demonstrates all React styling approaches working together." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Create the StyledButton component:" }) }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// StyledButton.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"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", 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: "StyledButton" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" variant ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'primary'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" size ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'medium'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" theme ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'light'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" buttonThemes", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" buttonSizes", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" 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 spread operator", children: "..." }), "props\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: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isHovered", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsHovered", _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: "14", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isPressed", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsPressed", _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"] }), _jsx(_components.span, { className: "code-line line-number", line: "15", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Get theme colors for this button variant" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " colors ", _jsx(_components.span, { className: "token operator", children: "=" }), " buttonThemes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "variant", _jsx(_components.span, { className: "token punctuation", 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: [" ", _jsx(_components.span, { className: "token comment", children: "// Get size styles for this button" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " sizeStyles ", _jsx(_components.span, { className: "token operator", children: "=" }), " buttonSizes", _jsx(_components.span, { className: "token punctuation", children: "[" }), "size", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Calculate dynamic background color based on interaction state" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "getBackgroundColor" }), " ", _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: "24", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isPressed", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "active" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "isHovered", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "hover" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " colors", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "base" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "28", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Combine all styling approaches" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " buttonStyle ", _jsx(_components.span, { className: "token operator", 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 comment", children: "// From style objects - size and base styling" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "sizeStyles", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Inline styles - dynamic colors and states" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "backgroundColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "getBackgroundColor" }), _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: "35", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'white'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Dynamic transform based on interaction state" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " isPressed ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'scale(0.95)'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'scale(1)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Ensure smooth transitions work with inline styles" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transition" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'all 0.3s ease'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "41", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "44", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "styled-button", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "45", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "buttonStyle", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "46", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onMouseEnter" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setIsHovered" }), _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: "47", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onMouseLeave" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "48", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsHovered" }), _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"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "49", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsPressed" }), _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"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "50", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "51", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onMouseDown" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setIsPressed" }), _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: "52", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onMouseUp" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setIsPressed" }), _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"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "53", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsxs(_components.span, { className: "token spread", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), "props", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "StyledButton" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this approach works" }), ": This component demonstrates all React styling approaches:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "CSS classes" }), " (", _jsx(_components.code, { children: ".styled-button" }), ") provide foundation styling and transitions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Style objects" }), " (", _jsx(_components.code, { children: "sizeStyles" }), ") provide reusable size patterns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inline styles" }), " handle dynamic colors and state-dependent transforms"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Conditional logic" }), " determines colors based on interaction state"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your code" }), " now! You should see a fully functional button showcase with interactive buttons that respond to hover and click events."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add Professional Polish and Refinements" }), "\n", _jsx(_components.p, { children: "Let's add some final touches that make the showcase feel more professional and demonstrate advanced React styling patterns." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Update your ButtonShowcase component to include disabled state examples:" }) }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Add this to the button-group in ButtonShowcase.js, after the existing buttons" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "StyledButton" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "size", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "-disabled" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "variant" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "variant", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "size" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "size", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "theme" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "currentTheme", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "buttonThemes" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "buttonThemes", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "buttonSizes" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "buttonSizes", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "disabled" }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token punctuation", children: ">" }) }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token plain-text", children: " Disabled " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "size", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token plain-text" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Update your StyledButton to handle disabled state:" }) }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// In StyledButton.js, update the buttonStyle calculation" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " buttonStyle ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "sizeStyles", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "backgroundColor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'#cccccc'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "getBackgroundColor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'#666666'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'white'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " isPressed ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'scale(0.95)'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'scale(1)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transition" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'all 0.3s ease'" }), _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: "cursor" }), _jsx(_components.span, { className: "token operator", children: ":" }), " props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'not-allowed'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'pointer'" }), _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 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 comment", children: "// Update the event handlers to respect disabled state" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleMouseEnter" }), " ", _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: "13", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "setIsHovered" }), _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: "14", 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: "15", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleMouseLeave" }), " ", _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: "17", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsHovered" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsPressed" }), _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: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "22", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleMouseDown" }), " ", _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: "24", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "setIsPressed" }), _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: "25", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleMouseUp" }), " ", _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: "28", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "disabled" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "setIsPressed" }), _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: "29", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your final code" }), " to see the complete showcase with all button states and interactions working smoothly!"] }), "\n", _jsx(_components.h2, { children: "Understanding What You Built" }), "\n", _jsx(_components.p, { children: "Congratulations! You've successfully created a professional Button Theme Showcase that demonstrates all major React styling approaches. Let's review what you accomplished:" }), "\n", _jsx(_components.h3, { children: "React Concepts You Mastered" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Component Architecture" }), ": You created a multi-component application with proper separation of concerns, where each component has a specific responsibility and lives in its own file."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "State Management" }), ": You used the ", _jsx(_components.code, { children: "useState" }), " hook to manage theme preferences and button interaction states, demonstrating how React state drives visual changes."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Props and Component Communication" }), ": Your components communicate through props, passing theme information, styling objects, and configuration data between parent and child components."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Event Handling" }), ": You implemented multiple event handlers that respond to user interactions and update component state accordingly."] }), "\n", _jsx(_components.h3, { children: "Styling Approaches You Applied" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "CSS Classes" }), ": Your foundation styles, animations, and layout are handled by CSS classes, providing optimal performance and browser-optimized transitions."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Style Objects" }), ": You created reusable JavaScript objects for themes, sizes, and color schemes that can be easily maintained and extended."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Inline Styles" }), ": Dynamic styling that responds to component state and user interactions is handled through inline styles, providing maximum flexibility."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Conditional Styling" }), ": Your buttons change appearance based on hover, active, disabled, and theme states, creating an intuitive and responsive user experience."] }), "\n", _jsx(_components.h3, { children: "Professional Development Patterns" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Reusable Components" }), ": Your StyledButton component can be used anywhere in an application with different props, demonstrating the power of component-based architecture."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Theme System" }), ": You built a theme system that can be easily extended with new color schemes and applied consistently across components."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": By combining CSS classes for static styles with inline styles for dynamic values, you achieved both flexibility and performance."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "User Experience" }), ": Your buttons provide immediate visual feedback for all interactions, creating a polished and professional feel."] }), "\n", _jsx(_components.h2, { children: "Real-World Applications" }), "\n", _jsx(_components.p, { children: "The patterns you learned in this exercise are used in professional React development every day:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Component Libraries" }), ": Companies like Airbnb, Netflix, and Facebook use similar patterns to build reusable component libraries that maintain consistency across their applications."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Design Systems" }), ": The theme and styling patterns you implemented are the foundation of design systems used by major tech companies to ensure visual consistency."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Interactive Interfaces" }), ": The state-driven styling you mastered is essential for creating responsive, interactive user interfaces that feel natural and intuitive."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Scalable Architecture" }), ": The component separation and styling organization you practiced are crucial for building applications that can grow and evolve over time."] }), "\n", _jsx(_components.p, { children: "You've built more than just a button showcase - you've mastered the fundamental styling patterns that power modern React applications. These skills will serve you well as you continue building more complex and sophisticated React interfaces!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };