| | |
| | | payload, |
| | | isShowAll, |
| | | }) => { |
| | | const { score, content, position } = payload |
| | | const { id, score, content, position } = payload |
| | | return ( |
| | | <div |
| | | className={!isShowAll ? 'line-clamp-2 break-all' : ''} |
| | | > |
| | | <div className='relative top-[-2px] inline-flex items-center'> |
| | | <div className='system-2xs-semibold-uppercase flex h-[20.5px] items-center bg-state-accent-solid px-1 text-text-primary-on-surface'>C-{position}</div> |
| | | <div className='inline-flex items-center relative top-[-2px]'> |
| | | <div className='flex items-center h-[20.5px] bg-state-accent-solid system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{position}</div> |
| | | <Score value={score} besideChunkName /> |
| | | </div> |
| | | <SliceContent className='bg-state-accent-hover py-0.5 text-sm font-normal text-text-secondary group-hover:bg-state-accent-hover'>{content}</SliceContent> |
| | | <SliceContent className='py-0.5 bg-state-accent-hover group-hover:bg-state-accent-hover text-sm text-text-secondary font-normal'>{content}</SliceContent> |
| | | </div> |
| | | ) |
| | | } |