chore: change headlessui api to new

This commit is contained in:
Joel
2025-01-26 15:02:31 +08:00
parent c044cc5160
commit fd5028da5b
22 changed files with 305 additions and 220 deletions

View File

@ -8,7 +8,7 @@ import {
RiMoreFill,
RiStickyNoteAddLine,
} from '@remixicon/react'
import { Menu, Transition } from '@headlessui/react'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
import Toast from '@/app/components/base/toast'
@ -54,9 +54,9 @@ export default function Operate({
{
({ open }) => (
<>
<Menu.Button className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
<MenuButton className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
<RiMoreFill className='w-4 h-4' />
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@ -66,7 +66,7 @@ export default function Operate({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="
absolute right-0 top-9 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@ -74,7 +74,7 @@ export default function Operate({
"
>
<div className="px-1 py-1">
<Menu.Item>
<MenuItem>
<div
className={itemClassName}
onClick={onAuthAgain}
@ -87,23 +87,23 @@ export default function Operate({
</div>
</div>
</div>
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
<div className={itemClassName} onClick={handleSync}>
<RiLoopLeftLine className={itemIconClassName} />
<div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
</div>
</Menu.Item>
</MenuItem>
</div>
<Menu.Item>
<MenuItem>
<div className='p-1'>
<div className={itemClassName} onClick={handleRemove}>
<RiDeleteBinLine className={itemIconClassName} />
<div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
</div>
</div>
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</>
)