Replace @radix-ui/react-tabs with the Tabs component from Headless UI

[huyenltnguyen]

Description

We are using @radix-ui/react-tabs as the base of the Tabs component:

ui/src/tabs/tabs.tsx

Line 2 in 5b612c4

import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";

Since we build other components with Headless UI and this library also provides Tabs, I think we should update our Tabs to use Headless UI, too, to remove an extra dependency.

The Tabs component is using radix-ui/react-tabs props interface, so switching to Headless UI and use its props interface would be a breaking change. We might want to take this opportunity to define a prop interface for the component, so that the interface doesn't depend on the external library.

Note

This change should be made after we have upgraded Headless UI to v2, which requires a React upgrade (#232).