64 lines
1.9 KiB
TypeScript
Raw Normal View History

2025-06-30 16:16:16 +08:00
import { memo } from 'react'
import {
RiAddLine,
RiEqualizer2Line,
} from '@remixicon/react'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Button from '@/app/components/base/button'
const Configure = () => {
return (
<>
<PortalToFollowElem
placement='bottom-end'
offset={{
mainAxis: 4,
crossAxis: -4,
}}
>
<PortalToFollowElemTrigger>
<Button
variant='secondary-accent'
>
<RiAddLine className='h-4 w-4' />
Configure
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[61]'>
<div className='w-[240px] space-y-1.5 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg'>
<Button
variant='primary'
className='w-full px-0'
>
<div className='grow'>
use oauth
</div>
<div className='h-4 w-[1px] bg-text-primary-on-surface opacity-[0.15]'></div>
<div className='flex h-8 w-8 shrink-0 items-center justify-center'>
<RiEqualizer2Line className='h-4 w-4' />
</div>
</Button>
<div className='system-2xs-medium-uppercase flex h-4 items-center p-2 text-text-quaternary'>
<div className='mr-2 h-[1px] grow bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
OR
<div className='ml-2 h-[1px] grow bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
</div>
<Button
className='w-full'
variant='secondary-accent'
>
Use API Key
</Button>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</>
)
}
export default memo(Configure)