Add Tabs component and LibraryPage with Overview, Components, and Hooks

[Linn-Devoteam]

Pull Request

Description

This PR introduces a new Tabs component and restructures the app to include a LibraryPage that serves as the main entry point for exploring the component library.

Key changes:

• Added a reusable Tabs component with keyboard navigation and ARIA roles (tablist, tab, tabpanel).
• Styled Tabs with theme tokens, including active indicator and divider.
• Added LibraryPage with three tabs: Overview, Components, Hooks.
• Updated routing: LibraryPage is now the default route.
• Refined App.tsx to delegate content rendering to LibraryPage.

How to test

1. Install and start the project:

   • npm install
   • npm run dev

2. Open localhost

   • Verify that the Tabs work:
   • Click between Overview, Components, Hooks.
   • Correct content should show for the active tab.
   • Use the keyboard to navigate:
   • ArrowRight / ArrowLeft moves focus and changes active tab.
   • Home jumps to the first tab, End to the last.

3. Check accessibility:

   • When tabbing, the active tab shows a visible outline.
   • Inactive tab panels are hidden from screen readers (aria-hidden).

4. Verify design:

   • Active tab is styled with primary color and underline indicator.
   • Inactive tabs show default text color.

Type of Change

• feature: New feature
• chore: Maintenance, dependency updates, or refactoring
• test: Adding or improving tests
• bug: Bug fix
• docs: Documentation updates
• Other (please specify):

Shortcut story

Related Issues

Testing Performed

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed

Screenshots/Recordings

Checklist

• My code follows the project's coding style guidelines
• I have updated the documentation accordingly
• I have added tests that prove my fix/feature works
• All existing and new tests pass
• I have checked for and resolved any merge conflicts
• I have made corresponding changes to the README (if applicable)

Additional Notes

[JasminePRA]

the name of the file is LiberyPage, should be LibraryPage

[Linn-Devoteam]

Done

[JasminePRA]

use token for margin

[Linn-Devoteam]

Done

[JasminePRA]

same as above

[Linn-Devoteam]

Done

[JasminePRA]

is this file needed?

[Linn-Devoteam]

Deleted