50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { blue } from '../../lib/constant';
|
|
import { HighlightSegment } from '../../lib/types';
|
|
import SectionTitle from './SectionTitle';
|
|
|
|
export default function HighlightedText({
|
|
segments,
|
|
}: {
|
|
segments: HighlightSegment[];
|
|
}) {
|
|
return (
|
|
<>
|
|
<SectionTitle>Matn ko'rish</SectionTitle>
|
|
<div
|
|
className="rounded-lg p-4 text-sm leading-relaxed mb-5"
|
|
style={{
|
|
background: blue[50],
|
|
border: `0.5px solid ${blue[100]}`,
|
|
color: blue[900],
|
|
lineHeight: '1.8',
|
|
}}
|
|
>
|
|
{segments.map((seg, i) =>
|
|
seg.plagiarized ? (
|
|
<mark
|
|
key={i}
|
|
style={{
|
|
background: '#FEE2E2',
|
|
color: '#991B1B',
|
|
borderRadius: '3px',
|
|
padding: '1px 2px',
|
|
}}
|
|
>
|
|
{seg.text}
|
|
</mark>
|
|
) : (
|
|
<span key={i}>{seg.text}</span>
|
|
),
|
|
)}
|
|
<p className="mt-3 text-[11px]" style={{ color: blue[400] }}>
|
|
<span
|
|
className="inline-block w-3 h-3 rounded-sm mr-1 align-middle"
|
|
style={{ background: '#FEE2E2', border: '1px solid #FCA5A5' }}
|
|
/>
|
|
Qizil bilan belgilangan qismlar plagiat deb topilgan.
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|