| | |
| | | |
| | | export const ChunkLabel: FC<ChunkLabelProps> = (props) => { |
| | | const { label, characterCount } = props |
| | | return <div className='flex items-center text-xs font-medium text-text-tertiary'> |
| | | return <div className='flex items-center text-text-tertiary text-xs font-medium'> |
| | | <SelectionMod className='size-[10px]' /> |
| | | <p className='ml-0.5 flex gap-2'> |
| | | <span> |
| | | {label} |
| | | </span> |
| | | <span> |
| | | <p className='flex gap-2 ml-0.5'><span> |
| | | {label} |
| | | </span> |
| | | <span> |
| | | · |
| | | </span> |
| | | <span> |
| | | {`${characterCount} characters`} |
| | | </span> |
| | | </p> |
| | | </span> |
| | | <span> |
| | | {`${characterCount} characters`} |
| | | </span></p> |
| | | </div> |
| | | } |
| | | |
| | |
| | | const { label, characterCount, children } = props |
| | | return <div className='space-y-2'> |
| | | <ChunkLabel label={label} characterCount={characterCount} /> |
| | | <div className='body-md-regular text-text-secondary'> |
| | | <div className='text-text-secondary body-md-regular'> |
| | | {children} |
| | | </div> |
| | | </div> |
| | |
| | | const { qa } = props |
| | | return <div className='flex flex-col gap-y-2'> |
| | | <div className='flex gap-x-1'> |
| | | <label className='shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</label> |
| | | <p className='body-md-regular text-text-secondary'>{qa.question}</p> |
| | | <label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>Q</label> |
| | | <p className='text-text-secondary body-md-regular'>{qa.question}</p> |
| | | </div> |
| | | <div className='flex gap-x-1'> |
| | | <label className='shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</label> |
| | | <p className='body-md-regular text-text-secondary'>{qa.answer}</p> |
| | | <label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>A</label> |
| | | <p className='text-text-secondary body-md-regular'>{qa.answer}</p> |
| | | </div> |
| | | </div> |
| | | } |