| | |
| | | RiMoreFill, |
| | | RiStickyNoteAddLine, |
| | | } from '@remixicon/react' |
| | | import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' |
| | | import { Menu, Transition } from '@headlessui/react' |
| | | import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common' |
| | | import Toast from '@/app/components/base/toast' |
| | | import cn from '@/utils/classnames' |
| | | |
| | | type OperateProps = { |
| | | payload: { |
| | |
| | | payload, |
| | | onAuthAgain, |
| | | }: OperateProps) { |
| | | const itemClassName = ` |
| | | flex px-3 py-2 hover:bg-gray-50 text-sm text-gray-700 |
| | | cursor-pointer |
| | | ` |
| | | const itemIconClassName = ` |
| | | mr-2 mt-[2px] w-4 h-4 text-gray-500 |
| | | ` |
| | | const { t } = useTranslation() |
| | | const { mutate } = useSWRConfig() |
| | | |
| | |
| | | { |
| | | ({ open }) => ( |
| | | <> |
| | | <MenuButton className={cn('flex h-8 w-8 items-center justify-center rounded-lg hover:bg-state-base-hover', open && 'bg-state-base-hover')}> |
| | | <RiMoreFill className='h-4 w-4 text-text-secondary' /> |
| | | </MenuButton> |
| | | <Menu.Button 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> |
| | | <Transition |
| | | as={Fragment} |
| | | enter="transition ease-out duration-100" |
| | |
| | | leaveFrom="transform opacity-100 scale-100" |
| | | leaveTo="transform opacity-0 scale-95" |
| | | > |
| | | <MenuItems className="absolute right-0 top-9 w-60 max-w-80 origin-top-right rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm"> |
| | | <Menu.Items |
| | | className=" |
| | | absolute right-0 top-9 w-60 max-w-80 |
| | | divide-y divide-gray-100 origin-top-right rounded-lg bg-white |
| | | shadow-lg |
| | | " |
| | | > |
| | | <div className="px-1 py-1"> |
| | | <MenuItem> |
| | | <Menu.Item> |
| | | <div |
| | | className='flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover' |
| | | className={itemClassName} |
| | | onClick={onAuthAgain} |
| | | > |
| | | <RiStickyNoteAddLine className='mr-2 mt-[2px] h-4 w-4 text-text-tertiary' /> |
| | | <RiStickyNoteAddLine className={itemIconClassName} /> |
| | | <div> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('common.dataSource.notion.changeAuthorizedPages')}</div> |
| | | <div className='system-xs-regular text-text-tertiary'> |
| | | <div className='leading-5'>{t('common.dataSource.notion.changeAuthorizedPages')}</div> |
| | | <div className='leading-5 text-xs text-gray-500'> |
| | | {payload.total} {t('common.dataSource.notion.pagesAuthorized')} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </MenuItem> |
| | | <MenuItem> |
| | | <div className='flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover' onClick={handleSync}> |
| | | <RiLoopLeftLine className='mr-2 mt-[2px] h-4 w-4 text-text-tertiary' /> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('common.dataSource.notion.sync')}</div> |
| | | </Menu.Item> |
| | | <Menu.Item> |
| | | <div className={itemClassName} onClick={handleSync}> |
| | | <RiLoopLeftLine className={itemIconClassName} /> |
| | | <div className='leading-5'>{t('common.dataSource.notion.sync')}</div> |
| | | </div> |
| | | </MenuItem> |
| | | </Menu.Item> |
| | | </div> |
| | | <MenuItem> |
| | | <div className='border-t border-divider-subtle p-1'> |
| | | <div className='flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover' onClick={handleRemove}> |
| | | <RiDeleteBinLine className='mr-2 mt-[2px] h-4 w-4 text-text-tertiary' /> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('common.dataSource.notion.remove')}</div> |
| | | <Menu.Item> |
| | | <div className='p-1'> |
| | | <div className={itemClassName} onClick={handleRemove}> |
| | | <RiDeleteBinLine className={itemIconClassName} /> |
| | | <div className='leading-5'>{t('common.dataSource.notion.remove')}</div> |
| | | </div> |
| | | </div> |
| | | </MenuItem> |
| | | </MenuItems> |
| | | </Menu.Item> |
| | | </Menu.Items> |
| | | </Transition> |
| | | </> |
| | | ) |