1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- import { useState } from 'react'
- import type { FC } from 'react'
- import { useTranslation } from 'react-i18next'
- import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
- } from '@/app/components/base/portal-to-follow-elem'
- type ProgressTooltipProps = {
- data: number
- }
- const ProgressTooltip: FC<ProgressTooltipProps> = ({
- data,
- }) => {
- const { t } = useTranslation()
- const [open, setOpen] = useState(false)
- return (
- <PortalToFollowElem
- open={open}
- onOpenChange={setOpen}
- placement='top-start'
- >
- <PortalToFollowElemTrigger
- onMouseEnter={() => setOpen(true)}
- onMouseLeave={() => setOpen(false)}
- >
- <div className='grow flex items-center'>
- <div className='mr-1 w-16 h-1.5 rounded-[3px] border border-gray-400 overflow-hidden'>
- <div className='bg-gray-400 h-full' style={{ width: `${data * 100}%` }}></div>
- </div>
- {data}
- </div>
- </PortalToFollowElemTrigger>
- <PortalToFollowElemContent style={{ zIndex: 1001 }}>
- <div className='p-3 bg-white text-xs font-medium text-gray-500 rounded-lg shadow-lg'>
- {t('common.chat.citation.hitScore')} {data}
- </div>
- </PortalToFollowElemContent>
- </PortalToFollowElem>
- )
- }
- export default ProgressTooltip
|