|
|
|
|
@ -2,33 +2,20 @@ import { Fragment } from 'react'
|
|
|
|
|
import { useContext } from 'use-context-selector'
|
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
|
import { Menu, Transition } from '@headlessui/react'
|
|
|
|
|
import s from './index.module.css'
|
|
|
|
|
import { RiArrowDownSLine } from '@remixicon/react'
|
|
|
|
|
import cn from '@/utils/classnames'
|
|
|
|
|
import { switchWorkspace } from '@/service/common'
|
|
|
|
|
import { useWorkspacesContext } from '@/context/workspace-context'
|
|
|
|
|
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
|
|
|
|
|
import { Check } from '@/app/components/base/icons/src/vender/line/general'
|
|
|
|
|
import HeaderBillingBtn from '@/app/components/billing/header-billing-btn'
|
|
|
|
|
import { useProviderContext } from '@/context/provider-context'
|
|
|
|
|
import { ToastContext } from '@/app/components/base/toast'
|
|
|
|
|
|
|
|
|
|
const itemClassName = `
|
|
|
|
|
flex items-center px-3 py-2 h-10 cursor-pointer
|
|
|
|
|
`
|
|
|
|
|
const itemIconClassName = `
|
|
|
|
|
shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600
|
|
|
|
|
`
|
|
|
|
|
const itemNameClassName = `
|
|
|
|
|
grow mr-2 text-sm text-gray-700 text-left
|
|
|
|
|
`
|
|
|
|
|
const itemCheckClassName = `
|
|
|
|
|
shrink-0 w-4 h-4 text-primary-600
|
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
const WorkplaceSelector = () => {
|
|
|
|
|
const { t } = useTranslation()
|
|
|
|
|
const { notify } = useContext(ToastContext)
|
|
|
|
|
const { workspaces } = useWorkspacesContext()
|
|
|
|
|
const { enableBilling } = useProviderContext()
|
|
|
|
|
const currentWorkspace = workspaces.find(v => v.current)
|
|
|
|
|
|
|
|
|
|
const handleSwitchWorkspace = async (tenant_id: string) => {
|
|
|
|
|
try {
|
|
|
|
|
if (currentWorkspace?.id === tenant_id)
|
|
|
|
|
@ -49,13 +36,13 @@ const WorkplaceSelector = () => {
|
|
|
|
|
<>
|
|
|
|
|
<Menu.Button className={cn(
|
|
|
|
|
`
|
|
|
|
|
${itemClassName} w-full
|
|
|
|
|
group hover:bg-gray-50 cursor-pointer ${open && 'bg-gray-50'} rounded-lg
|
|
|
|
|
flex items-center p-0.5 gap-1.5 w-full
|
|
|
|
|
group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px]
|
|
|
|
|
`,
|
|
|
|
|
)}>
|
|
|
|
|
<div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
|
|
|
|
|
<div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div>
|
|
|
|
|
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
|
|
|
|
|
<div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
|
|
|
|
|
<div className={'truncate max-w-[80px] line-clamp-1 overflow-hidden text-text-secondary text-ellipsis system-sm-medium'}>{currentWorkspace?.name}</div>
|
|
|
|
|
<RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
|
|
|
|
|
</Menu.Button>
|
|
|
|
|
<Transition
|
|
|
|
|
as={Fragment}
|
|
|
|
|
@ -69,19 +56,24 @@ const WorkplaceSelector = () => {
|
|
|
|
|
<Menu.Items
|
|
|
|
|
className={cn(
|
|
|
|
|
`
|
|
|
|
|
absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
|
|
|
|
|
divide-y divide-gray-100 origin-top-right rounded-xl
|
|
|
|
|
flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg
|
|
|
|
|
`,
|
|
|
|
|
s.popup,
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
<div className="px-1 py-1">
|
|
|
|
|
<div className="flex flex-col p-1 pb-2 items-start self-stretch w-full rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadows-shadow-lg ">
|
|
|
|
|
<div className='flex px-3 pt-1 pb-0.5 items-start self-stretch'>
|
|
|
|
|
<span className='flex-1 text-text-tertiary system-xs-medium-uppercase'>{t('common.userProfile.workspace')}</span>
|
|
|
|
|
</div>
|
|
|
|
|
{
|
|
|
|
|
workspaces.map(workspace => (
|
|
|
|
|
<div className={itemClassName} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
|
|
|
|
|
<div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
|
|
|
|
|
<div className={itemNameClassName}>{workspace.name}</div>
|
|
|
|
|
{workspace.current && <Check className={itemCheckClassName} />}
|
|
|
|
|
<div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
|
|
|
|
|
<div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
|
|
|
|
|
<div className='line-clamp-1 flex-grow overflow-hidden text-text-secondary text-ellipsis system-md-regular'>{workspace.name}</div>
|
|
|
|
|
{enableBilling && (
|
|
|
|
|
<div className='select-none'>
|
|
|
|
|
<HeaderBillingBtn isDisplayOnly={true} />
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
|
Yi
2 years ago
