Fix: Selected framework in Code component

[gkettani]

☕️ Reasoning

The Code component currently uses the Tabs component from the Nextra UI library to display different code examples for various frameworks. The Tabs component achieves synchronization across all instances by storing the selected tab's index in local storage. However, relying on an index introduces limitations when the tabs differ in content or order between components.

This PR refactors the Code component to handle tab synchronization and local storage management directly, decoupling this logic from the Tabs component. Instead of storing an index, the name of the framework is stored in local storage. This implementation:

1. Stores the framework name in local storage instead of the index.
2. Checks whether the stored framework name is valid for the current context.
3. Displays the valid framework's tab or defaults to the first tab if no valid value is found.
4. Synchronizes tabs across components using a StorageEvent, ensuring updates are propagated immediately.

🧢 Checklist

• Documentation
• Tests
• Ready to be merged

🎫 Affected issues

Fixes: #12451

📌 Resources

• Security guidelines
• Contributing guidelines
• Code of conduct
• Contributing to Open Source

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
auth-docs	❌ Failed (Inspect)			Jan 12, 2025 0:51am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-auth-docs	⬜️ Ignored (Inspect)	Visit Preview		Jan 12, 2025 0:51am

[vercel]

@gkettani is attempting to deploy a commit to the authjs Team on Vercel.

A member of the Team first needs to authorize it.