"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Instructions: Build a Social Media Feed with Performance Optimization" }), "\n", _jsx(_components.p, { children: "In this exercise, you'll apply the performance optimization concepts you've learned by building a realistic social media feed application. You'll create an engaging social platform that demonstrates React.memo, useMemo, and useEffect cleanup through features that users actually want to interact with - posts, likes, search, and smooth scrolling." }), "\n", _jsx(_components.h2, { children: "Concept Reinforcement: What You're Building" }), "\n", _jsx(_components.p, { children: "Before diving into implementation, let's reinforce the key React concepts you'll be applying:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React.memo for Post Optimization" }), ": You'll create post components that only re-render when their specific content changes, not when other posts are liked or updated. This demonstrates how social media platforms keep feeds smooth and responsive."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "useMemo for Search and Filtering" }), ": You'll implement fast post search and hashtag filtering that doesn't recalculate results unnecessarily, showing how platforms like Twitter handle real-time search efficiently."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "useEffect Cleanup for Social Features" }), ": You'll properly manage resources like scroll listeners and auto-refresh timers, demonstrating the memory management techniques used in production social applications."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance Through Real Features" }), ": This exercise shows the same optimization techniques used by major social platforms to handle millions of posts and users efficiently."] }), "\n", _jsx(_components.h2, { children: "Challenge: Build a Professional Social Media Feed" }), "\n", _jsx(_components.p, { children: "Your goal is to create a social media feed application with the following requirements:" }), "\n", _jsx(_components.h3, { children: "Social Feed Specifications" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Post Feed Interface" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Clean, modern social media layout with scrollable post feed" }), "\n", _jsx(_components.li, { children: "Individual post components with user avatars, content, timestamps, and interaction buttons" }), "\n", _jsx(_components.li, { children: "Like button functionality with immediate visual feedback" }), "\n", _jsx(_components.li, { children: "Professional social media styling that looks like a real platform" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance Optimization Features" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Posts that don't re-render unnecessarily when other posts change" }), "\n", _jsx(_components.li, { children: "Fast search functionality that filters posts by content or hashtags" }), "\n", _jsx(_components.li, { children: "Smooth scrolling without memory leaks or performance degradation" }), "\n", _jsx(_components.li, { children: "Efficient like/unlike interactions that don't affect other posts" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Interactive Social Features" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create new posts with a simple form interface" }), "\n", _jsx(_components.li, { children: "Like and unlike posts with real-time count updates" }), "\n", _jsx(_components.li, { children: "Search posts by content with instant results" }), "\n", _jsx(_components.li, { children: "Hashtag filtering for discovering related content" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Professional User Experience" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Responsive design that works on different screen sizes" }), "\n", _jsx(_components.li, { children: "Smooth animations and transitions for social interactions" }), "\n", _jsx(_components.li, { children: "Loading states and visual feedback for user actions" }), "\n", _jsx(_components.li, { children: "Clean, modern interface suitable for portfolio presentation" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Social Media Interface" }), ": Professional feed layout with posts, avatars, and interaction buttons\n✅ ", _jsx(_components.strong, { children: "Performance Optimization" }), ": Posts optimized with React.memo, search optimized with useMemo\n✅ ", _jsx(_components.strong, { children: "Interactive Features" }), ": Like buttons, post creation, search functionality all working smoothly\n✅ ", _jsx(_components.strong, { children: "Memory Management" }), ": Proper cleanup of scroll listeners and timers\n✅ ", _jsx(_components.strong, { children: "Professional Design" }), ": Modern social media styling suitable for portfolio use\n✅ ", _jsx(_components.strong, { children: "Code Organization" }), ": Each component in its own file with proper imports and exports"] }), "\n", _jsx(_components.h2, { children: "Independent Learning Challenge" }), "\n", _jsx(_components.p, { children: "Before looking at the step-by-step guide, try building the social media feed yourself! This is an excellent opportunity to apply your React performance knowledge to a realistic application." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concepts to Use" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "React.memo for post components to prevent unnecessary re-renders" }), "\n", _jsx(_components.li, { children: "useMemo for search results and post filtering calculations" }), "\n", _jsx(_components.li, { children: "useEffect with cleanup for scroll handling and auto-refresh features" }), "\n", _jsx(_components.li, { children: "useState for managing likes, posts, and search state" }), "\n", _jsx(_components.li, { children: "Component composition for clean social media architecture" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Implementation Hints" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Start with a main App component that manages the overall feed state" }), "\n", _jsx(_components.li, { children: "Create separate components for Post, Header, CreatePost, and SearchBar" }), "\n", _jsx(_components.li, { children: "Use React.memo on Post components to optimize feed scrolling" }), "\n", _jsx(_components.li, { children: "Implement search with useMemo to avoid recalculating results" }), "\n", _jsx(_components.li, { children: "Add proper cleanup for any scroll listeners or timers" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Expected Behavior" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Smooth scrolling through multiple posts without lag" }), "\n", _jsx(_components.li, { children: "Instant search results as you type" }), "\n", _jsx(_components.li, { children: "Like buttons that update immediately without affecting other posts" }), "\n", _jsx(_components.li, { children: "Professional social media appearance and interactions" }), "\n"] }), "\n", _jsx(_components.p, { children: "Take 15-20 minutes to attempt this independently. If you get stuck or want to see the complete implementation, continue to the step-by-step guide below." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Step-by-Step React Implementation Guide" }), "\n", _jsx(_components.p, { children: "If you attempted the challenge above or want to see a complete implementation, follow these detailed steps to build your social media feed application." }), "\n", _jsx(_components.h3, { children: "Step 1: Set Up the Main Social Feed App" }), "\n", _jsx(_components.p, { children: "Let's start by creating the foundation of our social media application with a clean, modern interface." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": The main App component manages the overall social feed state and provides the structure for our social media features. This demonstrates how performance optimization integrates with real social application architecture."] }), "\n", _jsx(_components.p, { children: "Create your main App component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// App.js" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./App.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Header" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./Header'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "CreatePost" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./CreatePost'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "PostFeed" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./PostFeed'" }), _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 module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchBar" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./SearchBar'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "9", 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: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPosts", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", 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: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "user" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Sarah Chen'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "avatar" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'👩‍💻'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "username" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'@sarahdev'" }), " ", _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 literal-property property", children: "content" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token string", children: "'Just deployed my first React app! The performance optimizations made such a difference. #ReactJS #WebDev'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "likes" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "24" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "timestamp" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'2 hours ago'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "hashtags" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'ReactJS'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'WebDev'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token 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 literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "user" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Mike Rodriguez'" }), _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: "avatar" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'👨‍🎨'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "username" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'@mikedesigns'" }), _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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "content" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token string", children: "'Working on a new UI design system. Clean components make everything so much easier to maintain! #Design #React'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "likes" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "18" }), _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: "timestamp" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'4 hours ago'" }), _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: "hashtags" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'Design'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'React'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "user" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Alex Kim'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "avatar" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'👨‍💼'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "username" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'@alextech'" }), " ", _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 literal-property property", children: "content" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token string", children: "'Performance optimization tip: Use React.memo for components that receive stable props. Game changer! #ReactTips'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "likes" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "42" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "timestamp" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'6 hours ago'" }), _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: "hashtags" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'ReactTips'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "43", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSearchTerm", _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: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "45", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "addPost" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "newPost" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " post ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "now" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "user" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'You'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "avatar" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'😊'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "username" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'@you'" }), " ", _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 literal-property property", children: "content" }), _jsx(_components.span, { className: "token operator", children: ":" }), " newPost", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "likes" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "timestamp" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'now'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "hashtags" }), _jsx(_components.span, { className: "token operator", children: ":" }), " newPost", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "match" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: ["#", _jsx(_components.span, { className: "token char-set class-name", children: "\\w" }), _jsx(_components.span, { className: "token quantifier number", children: "+" })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsx(_components.span, { className: "token regex-flags", children: "g" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", 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: "55", children: [" ", _jsx(_components.span, { className: "token function", children: "setPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "post", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "posts", _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 punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "57", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "toggleLike" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "postId" }), " ", _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: "59", children: [" ", _jsx(_components.span, { className: "token function", children: "setPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" posts", _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: "post" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " postId ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "post", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "likes" }), _jsx(_components.span, { className: "token operator", children: ":" }), " post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "likes" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " post\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "65", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "66", 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: "67", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"social-app\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Header" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "main className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"main-content\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "CreatePost" }), " onCreatePost", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "addPost", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "SearchBar" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [" searchTerm", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" onSearchChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "setSearchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [" ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "75", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "PostFeed" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" posts", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [" searchTerm", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" onToggleLike", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "toggleLike", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "80", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "main", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "81", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "82", 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: "83", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "84", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "App" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code accomplishes" }), ": We're creating a realistic social media application with posts, likes, search, and post creation. The state management handles typical social media interactions while setting up the foundation for performance optimization."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Run your app" }), " to see the basic structure. You should see the layout, but the individual components will show errors since we haven't created them yet."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the Optimized Post Component" }), "\n", _jsx(_components.p, { children: "Now let's create the core Post component that demonstrates React.memo optimization for social media feeds." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": This component shows how React.memo prevents unnecessary re-renders in social feeds. When one post is liked, other posts won't re-render, creating the smooth experience users expect from social platforms."] }), "\n", _jsx(_components.p, { children: "Create the Post component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Post.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: "{" }), " memo ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./Post.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " post", _jsx(_components.span, { className: "token punctuation", children: "," }), " onToggleLike ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleLike" }), " ", _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: "7", children: [" ", _jsx(_components.span, { className: "token function", children: "onToggleLike" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "article className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-header\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"user-info\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"avatar\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "user" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "avatar" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"user-details\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h3 className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"user-name\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "user" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"username\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "user" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "username" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"timestamp\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "timestamp" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "22", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-content\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "content" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-actions\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"like-button\"" }), " onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleLike", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ❤️ ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "likes" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"comment-button\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "💬 ", _jsx(_components.span, { className: "token maybe-class-name", children: "Comment" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"share-button\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "🔄 ", _jsx(_components.span, { className: "token maybe-class-name", children: "Share" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "article", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [_jsx(_components.span, { className: "token comment", children: "// Export memoized version to prevent unnecessary re-renders" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token function", children: "memo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code demonstrates" }), ": This Post component is wrapped with React.memo, so it only re-renders when its specific post data changes. When you like one post, other posts won't re-render, creating smooth social media performance."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Test the post component" }), " by creating a few posts and liking them. Notice how the interface stays smooth and responsive."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the Optimized Post Feed" }), "\n", _jsx(_components.p, { children: "Let's create the PostFeed component that uses useMemo to optimize search and filtering operations." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": This component demonstrates how useMemo optimizes expensive operations like searching and filtering posts. Social media platforms use these techniques to handle thousands of posts efficiently."] }), "\n", _jsx(_components.p, { children: "Create the PostFeed component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// PostFeed.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: "{" }), " useMemo ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./PostFeed.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./Post'" }), _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: "PostFeed" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " posts", _jsx(_components.span, { className: "token punctuation", children: "," }), " searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " onToggleLike ", _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 comment", children: "// Optimize post filtering with useMemo" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filteredPosts ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useMemo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", 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: "!" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " posts", _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 keyword control-flow", children: "return" }), " posts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token parameter", children: "post" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "content" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "user" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "hashtags" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "some" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "tag" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" tag", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "posts", _jsx(_components.span, { className: "token punctuation", children: "," }), " searchTerm", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "22", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "23", 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: "24", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-feed\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "filteredPosts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"no-posts\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "No" }), " posts found", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Try" }), " a different search term", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", 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 operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"posts-container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "filteredPosts", _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: "post" }), " ", _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: "33", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" post", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "post", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" onToggleLike", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "onToggleLike", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", 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: "39", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", 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: "41", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", 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: "43", 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 module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "PostFeed" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What this React code demonstrates" }), ": The useMemo hook optimizes post filtering so search results are only recalculated when posts or searchTerm actually change. This creates the instant search experience users expect from social media platforms."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Test the feed optimization" }), " by typing in the search bar. The filtering should be instant and smooth, demonstrating useMemo's performance benefits."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the Header and CreatePost Components" }), "\n", _jsx(_components.p, { children: "Now let's add the remaining components to complete our social media application." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": These components complete the social media experience while demonstrating proper component organization and resource management with useEffect cleanup."] }), "\n", _jsx(_components.p, { children: "Create the Header component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Header.js" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "React" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./Header.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Header" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "header className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"app-header\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"header-content\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"logo\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "📱 ", _jsx(_components.span, { className: "token maybe-class-name", children: "SocialFeed" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"user-menu\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"current-user\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "😊 ", _jsx(_components.span, { className: "token maybe-class-name", children: "You" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "header", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "19", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Header" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create the CreatePost component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// CreatePost.js" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./CreatePost.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "CreatePost" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " onCreatePost ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "postContent", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPostContent", _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: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleSubmit" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "e" }), " ", _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: "9", children: [" e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "postContent", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "trim" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token function", children: "onCreatePost" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "postContent", _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 function", children: "setPostContent" }), _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 punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token 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 control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"create-post\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "form onSubmit", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleSubmit", _jsx(_components.span, { className: "token punctuation", children: "}" }), " className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-form\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "textarea\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "postContent", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" onChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "e" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setPostContent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _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: [" placeholder", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"What's happening?\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-input\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" rows", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"3\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"submit\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"post-button\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" disabled", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token operator", children: "!" }), "postContent", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "trim" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "form", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "CreatePost" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create the SearchBar component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// SearchBar.js" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "React" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./SearchBar.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchBar" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " onSearchChange ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"search-bar\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "input\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" onChange", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "e" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "onSearchChange" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _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: [" placeholder", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"Search posts, users, or hashtags...\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"search-input\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"search-icon\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "🔍", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", 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: "18", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "19", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "SearchBar" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "What these React components demonstrate" }), ": These components complete the social media experience with post creation, search, and navigation. Each component has a focused responsibility and works together to create a professional social platform."] }), "\n", _jsx(_components.h3, { children: "Step 5: Style Your Social Media Feed" }), "\n", _jsx(_components.p, { children: "Now let's add professional social media styling to make our application look like a real social platform." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Why this step matters" }), ": Professional styling creates an engaging user experience and makes the performance optimizations feel natural within a realistic social media context."] }), "\n", _jsx(_components.p, { children: "Create the main App.css file:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* App.css */" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".social-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: "max-width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "600" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " auto", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#f8f9fa" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", 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: "7", 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: "8", children: [" sans-serif", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".main-content" }) }), " ", _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: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create Header.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* Header.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-header" }) }), " ", _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: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "linear-gradient" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "135" }), _jsx(_components.span, { className: "token unit", children: "deg" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#667eea" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#764ba2" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".header-content" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token property", children: "max-width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "600" }), _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: "11", 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: "12", 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: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "justify-content" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " space-between", _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: "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: "15", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "16", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".logo" }), " h1"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _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: "20", 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 selector", children: _jsx(_components.span, { className: "token class", children: ".current-user" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create Post.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* Post.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: ".post" }) }), " ", _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: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", 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: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " transform ", _jsx(_components.span, { className: "token number", children: "0.2" }), _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: "9", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".post" }), _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: "12", 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: "13", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "14", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".post-header" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token property", children: "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: "17", children: [" ", _jsx(_components.span, { className: "token property", children: "justify-content" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " space-between", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token property", children: "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: "19", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", 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 selector", children: _jsx(_components.span, { className: "token class", children: ".user-info" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token property", children: "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: "24", 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: "25", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", 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 selector", children: _jsx(_components.span, { className: "token class", children: ".avatar" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _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: "30", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "31", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".user-name" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".username" }) }), " ", _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: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.9" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".timestamp" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#95a5a6" }), _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: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.85" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "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: ".post-content" }), " p"] }), " ", _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: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token property", children: "line-height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.5" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#2c3e50" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "53", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".post-actions" }) }), " ", _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: "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: "56", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "58", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".post-actions" }), " button"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " none", _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: "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: "62", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", 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: "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: "0.9" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" ", _jsx(_components.span, { className: "token property", children: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " background ", _jsx(_components.span, { className: "token number", children: "0.2" }), _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: "67", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "68", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".like-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: "70", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#ffe6e6" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "72", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".comment-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: "74", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#e6f3ff" }), _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: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".share-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: "78", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#e6ffe6" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create CreatePost.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* CreatePost.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: ".create-post" }) }), " ", _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: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", 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: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "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: ".post-form" }) }), " ", _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: "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: "12", 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: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "gap" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", 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 selector", children: _jsx(_components.span, { className: "token class", children: ".post-input" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token property", children: "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 hexcode color", children: "#ecf0f1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token property", children: "font-family" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " inherit", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token property", children: "resize" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " vertical", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token property", children: "min-height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "80" }), _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: "24", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "25", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".post-input" }), _jsx(_components.span, { className: "token pseudo-class", children: ":focus" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token property", children: "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: "28", children: [" ", _jsx(_components.span, { className: "token property", children: "border-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#667eea" }), _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: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "30", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".post-button" }) }), " ", _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: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#667eea" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", 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: "35", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "24" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", 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: "39", children: [" ", _jsx(_components.span, { className: "token property", children: "align-self" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex-end", _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: "transition" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " background ", _jsx(_components.span, { className: "token number", children: "0.2" }), _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: "41", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".post-button" }), _jsx(_components.span, { className: "token pseudo-class", children: ":hover" }), _jsx(_components.span, { className: "token pseudo-class", children: ":not" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token pseudo-class", 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: "44", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#5a67d8" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "46", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".post-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: "48", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#bdc3c7" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", 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: "50", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create SearchBar.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* SearchBar.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: ".search-bar" }) }), " ", _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: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " relative", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-bottom" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".search-input" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "50" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", 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 hexcode color", children: "#ecf0f1" }), _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: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "25" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", 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: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "16", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".search-input" }), _jsx(_components.span, { className: "token pseudo-class", children: ":focus" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token property", children: "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: "19", children: [" ", _jsx(_components.span, { className: "token property", children: "border-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#667eea" }), _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"] }), _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 selector", children: _jsx(_components.span, { className: "token class", children: ".search-icon" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token property", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " absolute", _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: "right" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token property", children: "top" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "50" }), _jsx(_components.span, { className: "token unit", 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 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: "-50" }), _jsx(_components.span, { className: "token unit", 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: "27", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.2" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Create PostFeed.css:" }), "\n", _jsx(_components.pre, { className: "language-css", children: _jsxs(_components.code, { className: "language-css code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/* PostFeed.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: ".post-feed" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token property", children: "max-width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".posts-container" }) }), " ", _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: "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: "8", 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: "9", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".no-posts" }) }), " ", _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: "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: "13", children: [" ", _jsx(_components.span, { className: "token property", children: "padding" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#7f8c8d" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "white" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", 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: "8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsxs(_components.span, { className: "token color", children: [_jsx(_components.span, { className: "token function", children: "rgba" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.1" }), _jsx(_components.span, { className: "token punctuation", children: ")" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "19", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".no-posts" }), " p"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [" ", _jsx(_components.span, { className: "token property", children: "margin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.1" }), _jsx(_components.span, { className: "token unit", children: "rem" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Test your complete social media feed" }), " by:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Creating new posts and seeing them appear at the top" }), "\n", _jsx(_components.li, { children: "Liking posts and watching the counts update" }), "\n", _jsx(_components.li, { children: "Searching for content and seeing instant filtered results" }), "\n", _jsx(_components.li, { children: "Scrolling through the feed and experiencing smooth performance" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Learning Reinforcement: What You've Accomplished" }), "\n", _jsx(_components.p, { children: "Congratulations! You've successfully built a professional social media feed that demonstrates advanced React performance optimization. Let's review what you've mastered:" }), "\n", _jsx(_components.h3, { children: "React Concepts You've Applied" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React.memo Mastery" }), ": You've implemented optimized post components that only re-render when their specific content changes, creating smooth social media interactions."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "useMemo Optimization" }), ": You've created fast search and filtering functionality that doesn't recalculate results unnecessarily, demonstrating the techniques used by real social platforms."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Component Architecture" }), ": You've organized your social media application into focused, reusable components that work together efficiently."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "State Management" }), ": You've combined performance optimization with realistic social media state management, showing how optimization integrates with real applications."] }), "\n", _jsx(_components.h3, { children: "Real-World Skills You've Developed" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Social Media Development" }), ": You can now build and optimize social media features like feeds, search, and user interactions."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": You understand how to identify and fix performance issues in content-heavy applications like social platforms."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "User Experience Design" }), ": You've created smooth, responsive interactions that meet user expectations for modern social applications."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Professional Development" }), ": You've built a portfolio-worthy social media application that demonstrates both technical skills and user experience understanding."] }), "\n", _jsx(_components.h3, { children: "Professional Impact" }), "\n", _jsx(_components.p, { children: "The social media feed you've built demonstrates several key professional development skills:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Consumer Application Development" }), ": Understanding how to build engaging, user-facing applications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": Demonstrating skills essential for applications with large amounts of dynamic content"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Social Media Expertise" }), ": Showing knowledge of patterns used by major social platforms"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Portfolio Quality" }), ": Creating an impressive application that showcases both technical and design skills"] }), "\n"] }), "\n", _jsx(_components.p, { children: "This social media feed is portfolio-worthy and demonstrates the kind of performance optimization skills that are essential for building modern, engaging React applications. You've mastered optimization techniques through building something genuinely useful and impressive." }), "\n", _jsx(_components.p, { children: "Your React applications will never perform the same way again – you now have the knowledge and skills to build social media applications that are fast, responsive, and provide excellent user experiences that keep users engaged." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };