crawled-result-item.tsx 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. 'use client'
  2. import type { FC } from 'react'
  3. import React, { useCallback } from 'react'
  4. import { useTranslation } from 'react-i18next'
  5. import cn from '@/utils/classnames'
  6. import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
  7. import Checkbox from '@/app/components/base/checkbox'
  8. type Props = {
  9. payload: CrawlResultItemType
  10. isChecked: boolean
  11. isPreview: boolean
  12. onCheckChange: (checked: boolean) => void
  13. onPreview: () => void
  14. }
  15. const CrawledResultItem: FC<Props> = ({
  16. isPreview,
  17. payload,
  18. isChecked,
  19. onCheckChange,
  20. onPreview,
  21. }) => {
  22. const { t } = useTranslation()
  23. const handleCheckChange = useCallback(() => {
  24. onCheckChange(!isChecked)
  25. }, [isChecked, onCheckChange])
  26. return (
  27. <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
  28. <div className='flex items-center h-5'>
  29. <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
  30. <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
  31. <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
  32. </div>
  33. <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
  34. </div>
  35. )
  36. }
  37. export default React.memo(CrawledResultItem)