complate detail page

src/widgets/detail/ui/components/HighlightedText.tsx

@@ -0,0 +1,49 @@
+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&apos;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>
+    </>
+  );
+}