Tabs that become a menu

// apps/docs/examples/ui/responsive-tabs.tsx'use client';
import {useState} from 'react';import {FileTextIcon, HistoryIcon, UserIcon} from 'lucide-react';
import {  ResponsiveTabs,  TabPanel,} from '@workspace/active-ui/components/composed/responsive-tabs';
const TABS = [  {value: 'person', label: 'Person', icon: UserIcon},  {value: 'documents', label: 'Documents', icon: FileTextIcon},  {value: 'history', label: 'History', icon: HistoryIcon},];
/** * Tabs on a wide screen, a menu on a narrow one: make the window narrower * than 1024 px to see the menu. The panels are the same in both forms. */export default function ResponsiveTabsExample() {  const [tab, setTab] = useState('person');  return (    <div className="w-full max-w-xl">      <ResponsiveTabs        value={tab}        onValueChange={setTab}        tabs={TABS}        mobilePlaceholder="Choose a section"        desktopContentClassName="pt-4"      >        <TabPanel id="person">Name, date of birth and address.</TabPanel>        <TabPanel id="documents">Statements and letters.</TabPanel>        <TabPanel id="history">Every change, newest first.</TabPanel>      </ResponsiveTabs>    </div>  );}