Switch out ReachUI's MenuButton for RadixUI's DropDownMenu

[vitokhangnguyen]

Changelog:

• Re-implement Menu with RadixUI's DropDownMenu
• Make Text component implement React.forwardRef
• Revert UserMenu back to asynchronously rendering of MenuItems since Radix UI doesn't have the same bug as Reach UI
• Temporarily disable reactStrictMode in next.config.js. See note below. Ignore the error on development for now (or you can right click on the error and choose to hide all errors from react-dom)

Note:

Currently, in development, react-dom would complain about Radix UI's mismatch id between client and server although IdProvider has wrapped around the entire app as this insturction from Radix suggests. This does not happens in production. The bug has been documented here by someone else.

Fortunately, a PR to resolve this has been merged 2 days ago. We could expect this issue to be fixed soon. A temporary solution to dismiss react-dom's complaining is to disable reactStrictMode. I'll create an urgent issue after this PR is merged to keep track of the fix (and docs) on Radix's side and update on our side asap. The update would also include re-enabling reactStrictMode.

Reflection:

• Life just can't be easy
• Choose lib better next time?

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/andrewnt219/rent-near-me/JB4EJKwzkywtbGTitqpPuT8s8qfS
✅ Preview: https://rent-near-me-git-vitokhangnguyen-issue78menuv2-andrewnt219.vercel.app

[Andrewnt219]

Nice to see we don't have to get around Reach implementation 👍.

[Andrewnt219]

The grouping update is 💯.

[vitokhangnguyen]

The grouping update is 💯.

The only significant change that is visible to the user: I changed shadow to shadow-z8.

Cost: testng out 2 libraries, filing 1 open source issue, tracking 1 on-going open source PR, multiple code refactorings and sleeping schedule.

Worth it :)