progress-tooltip.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import { useState } from 'react'
  2. import type { FC } from 'react'
  3. import { useTranslation } from 'react-i18next'
  4. import {
  5. PortalToFollowElem,
  6. PortalToFollowElemContent,
  7. PortalToFollowElemTrigger,
  8. } from '@/app/components/base/portal-to-follow-elem'
  9. type ProgressTooltipProps = {
  10. data: number
  11. }
  12. const ProgressTooltip: FC<ProgressTooltipProps> = ({
  13. data,
  14. }) => {
  15. const { t } = useTranslation()
  16. const [open, setOpen] = useState(false)
  17. return (
  18. <PortalToFollowElem
  19. open={open}
  20. onOpenChange={setOpen}
  21. placement='top-start'
  22. >
  23. <PortalToFollowElemTrigger
  24. onMouseEnter={() => setOpen(true)}
  25. onMouseLeave={() => setOpen(false)}
  26. >
  27. <div className='grow flex items-center'>
  28. <div className='mr-1 w-16 h-1.5 rounded-[3px] border border-gray-400 overflow-hidden'>
  29. <div className='bg-gray-400 h-full' style={{ width: `${data * 100}%` }}></div>
  30. </div>
  31. {data}
  32. </div>
  33. </PortalToFollowElemTrigger>
  34. <PortalToFollowElemContent style={{ zIndex: 1001 }}>
  35. <div className='p-3 bg-white text-xs font-medium text-gray-500 rounded-lg shadow-lg'>
  36. {t('common.chat.citation.hitScore')} {data}
  37. </div>
  38. </PortalToFollowElemContent>
  39. </PortalToFollowElem>
  40. )
  41. }
  42. export default ProgressTooltip