tjdify/web/app/components/skill/log/list.tsx

'use client'
import Pagination, { type Props as PaginationProps } from '@/app/components/base/pagination'
import type { FC } from 'react'
import Button from '@/app/components/base/button'
import cn from '@/utils/classnames'

type PageListProps = {
  list: []
  pagination: PaginationProps
  onUpdate: () => void
}

const LogPageList: FC<PageListProps> = ({
  list = [],
  pagination,
  onUpdate,
}) => {
  return (
    <div className='relative flex h-full w-full flex-col'>
      <div className='relative grow overflow-x-auto'>
        <table className={'mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm'}>
          <thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
            <tr>
              <td>训练语料数据集版本</td>
              <td>训练时间</td>
              <td>训练模型结果版本</td>
              <td className="w-[120px] text-center">操作</td>
            </tr>
          </thead>
          <tbody className="text-text-secondary">
            {list.map((item: any, index) => (
              <tr
                key={item.id}
                className={'h-8 border-b border-divider-subtle hover:bg-background-default-hover'}
              >
                <td>{item.version}</td>
                <td>{item.time}</td>
                <td>{item.version}</td>
                <td>
                  <Button variant='ghost-accent' size='small' className={cn('shrink-0')}>
                    下载
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* Show Pagination only if the total is more than the limit */}
      {pagination.total && (
        <Pagination
          {...pagination}
          className='w-full shrink-0 px-0 pb-0'
        />
      )}
    </div>
  )
}
export default LogPageList