Tab Switcher

Create a React component named TabSwitcher that displays multiple tabs and allows users to switch between them. Each tab should display corresponding content when selected.

Features

• Displays multiple tab buttons with clear labels.
• Highlights the currently active tab visually.
• Updates the displayed content dynamically when a user clicks a tab.
• Maintains the active tab state internally using React hooks.
• Provides meaningful attributes to facilitate automated testing.

🧾 Functionality Requirements

✅ Initial State

• The component should load with the "Home" tab active by default.
• The content area should display:
  "Welcome to the Home tab!"

✅ Tabs

The following tabs must be rendered as horizontal buttons:

• Home: Displays "Welcome to the Home tab!"
• Profile: Displays "This is your Profile."
• Settings: Displays "Adjust your Settings here."

✅ Switching Tabs

• Clicking on a tab button switches the active tab.
• The content area updates immediately to reflect the selected tab’s content.
• The active tab button should have a distinct visual style (highlighted).

✅ Active Tab Styling

• The active tab button should:
  • Use a different background color and text color.
• Non-active tabs should:
  • Have default styling.
  • Include a subtle hover effect.

✅ Repeated Clicks on Active Tab

• Clicking an already active tab:
  • Should not change the state or content.
  • Should retain the current content and style.

🔍 Edge Cases & Constraints

• Gracefully handle:
  • Unexpected tab IDs.
  • Empty or malformed tab arrays.
• Must not cause page reloads or unexpected side effects.
• Must maintain state properly when tabs are clicked rapidly.
• Styling should clearly distinguish between active and inactive tabs.
• Component should be easily extendable to support additional tabs.

Examples of Input and Output

• Initial render
  ➤ Content: "Welcome to the Home tab!"

• Click on "Profile" tab
  ➤ Content: "This is your Profile."

• Click on "Settings" tab
  ➤ Content: "Adjust your Settings here."

• Click "Settings" tab again
  ➤ Content remains "Adjust your Settings here."

✅ Testing Requirements

• Verify all tab buttons render correctly.
• Verify default active tab is Home.
• Verify clicking each tab updates the content correctly.
• Verify the active tab button has the proper active styling.
• Verify clicking the same tab multiple times retains content and active style.
• Use data-testid attributes to reliably select elements during tests.

🏷️ Data Test IDs for Testing

• tab-button-home — for the Home tab button
• tab-button-profile — for the Profile tab button
• tab-button-settings — for the Settings tab button
• tab-content — for the content display area

💡 Solution Approach

• Use React functional components with the useState hook to track the currently active tab.
• Store tab data (id, label, content) in an array for easy mapping and rendering.
• Render tab buttons dynamically using Array.map(), assigning the active class conditionally based on the active tab state.
• Handle button clicks to update the active tab state, causing a re-render of the content.
• Display content by finding the active tab object from the array.
• Add meaningful data-testid attributes to support reliable automated testing.
• Style active/inactive tabs distinctly using CSS classes.
• Write tests using @testing-library/react to simulate user interaction and ensure UI updates correctly.
• Use semantic HTML and ensure usability for keyboard navigation and screen readers.