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

@ -2,7 +2,7 @@
import { useTranslation } from 'react-i18next'
import { Fragment, useState } from 'react'
import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
import { Menu, Transition } from '@headlessui/react'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { useRouter } from 'next/navigation'
import Indicator from '../indicator'
import type { AppDetailResponse } from '@/models/app'
@ -30,7 +30,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
<div className="">
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button
<MenuButton
className="
inline-flex items-center w-full h-7 justify-center
rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
@ -42,7 +42,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
className="w-3 h-3 ml-1"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
</div>
<Transition
as={Fragment}
@ -53,7 +53,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@ -63,7 +63,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
{!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
{
appItems.map((app: AppDetailResponse) => (
<Menu.Item key={app.id}>
<MenuItem key={app.id}>
<div className={itemClassName} onClick={() =>
router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)
}>
@ -75,11 +75,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
</div>
{app.name}
</div>
</Menu.Item>
</MenuItem>
))
}
</div>)}
{isCurrentWorkspaceEditor && <Menu.Item>
{isCurrentWorkspaceEditor && <MenuItem>
<div className='p-1' onClick={() => setShowNewAppDialog(true)}>
<div
className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
@ -96,15 +96,15 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
<div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div>
</div>
</div>
</Menu.Item>
</MenuItem>
}
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
<CreateAppDialog
show={showNewAppDialog}
onClose={() => setShowNewAppDialog(false)}
onSuccess={() => {}}
onSuccess={() => { }}
/>
</div>
)