index.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import { Fragment } from 'react'
  2. import { useContext } from 'use-context-selector'
  3. import { useTranslation } from 'react-i18next'
  4. import { Menu, Transition } from '@headlessui/react'
  5. import cn from 'classnames'
  6. import s from './index.module.css'
  7. import { switchWorkspace } from '@/service/common'
  8. import { useWorkspacesContext } from '@/context/workspace-context'
  9. import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
  10. import { Check } from '@/app/components/base/icons/src/vender/line/general'
  11. import { ToastContext } from '@/app/components/base/toast'
  12. const itemClassName = `
  13. flex items-center px-3 py-2 h-10 cursor-pointer
  14. `
  15. const itemIconClassName = `
  16. shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600
  17. `
  18. const itemNameClassName = `
  19. grow mr-2 text-sm text-gray-700 text-left
  20. `
  21. const itemCheckClassName = `
  22. shrink-0 w-4 h-4 text-primary-600
  23. `
  24. const WorkplaceSelector = () => {
  25. const { t } = useTranslation()
  26. const { notify } = useContext(ToastContext)
  27. const { workspaces } = useWorkspacesContext()
  28. const currentWrokspace = workspaces.filter(item => item.current)?.[0]
  29. const handleSwitchWorkspace = async (tenant_id: string) => {
  30. try {
  31. await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
  32. notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
  33. location.assign(`${location.origin}`)
  34. }
  35. catch (e) {
  36. notify({ type: 'error', message: t('common.provider.saveFailed') })
  37. }
  38. }
  39. return (
  40. <Menu as="div" className="relative w-full h-full">
  41. {
  42. ({ open }) => (
  43. <>
  44. <Menu.Button className={cn(
  45. `
  46. ${itemClassName} w-full
  47. group hover:bg-gray-50 cursor-pointer ${open && 'bg-gray-50'} rounded-lg
  48. `,
  49. )}>
  50. <div className={itemIconClassName}>{currentWrokspace?.name[0].toLocaleUpperCase()}</div>
  51. <div className={`${itemNameClassName} truncate`}>{currentWrokspace?.name}</div>
  52. <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
  53. </Menu.Button>
  54. <Transition
  55. as={Fragment}
  56. enter="transition ease-out duration-100"
  57. enterFrom="transform opacity-0 scale-95"
  58. enterTo="transform opacity-100 scale-100"
  59. leave="transition ease-in duration-75"
  60. leaveFrom="transform opacity-100 scale-100"
  61. leaveTo="transform opacity-0 scale-95"
  62. >
  63. <Menu.Items
  64. className={cn(
  65. `
  66. absolute top-[1px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200
  67. divide-y divide-gray-100 origin-top-right rounded-xl
  68. `,
  69. s.popup,
  70. )}
  71. >
  72. <div className="px-1 py-1">
  73. {
  74. workspaces.map(workspace => (
  75. <div className={itemClassName} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
  76. <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
  77. <div className={itemNameClassName}>{workspace.name}</div>
  78. {workspace.current && <Check className={itemCheckClassName} />}
  79. </div>
  80. ))
  81. }
  82. </div>
  83. </Menu.Items>
  84. </Transition>
  85. </>
  86. )
  87. }
  88. </Menu>
  89. )
  90. }
  91. export default WorkplaceSelector