update paragraph constructor

Author: Ivan Strilets

src/shared/paragraphConstructor/ui/index.tsx

@@ -1,37 +1,16 @@
 import styles from "./styles.module.css";
 import type { ParagraphConstructorRow } from "../api/types";
+import { Row } from "./row";
 
 interface ParagraphConstructorProps {
   rows: ParagraphConstructorRow[];
 }
 
-const createRow = (row: ParagraphConstructorRow) => {
-  const rowClassName = row.accentColor ? styles[row.accentColor] : "";
-
-  if (row.isTag) {
-    return <span className={rowClassName}>&lt;{row.text}&gt;</span>;
-  }
-
-  if (row.accentSubstring) {
-    const [firstChunk, lastChunk] = row.text.split(row.accentSubstring);
-
-    return (
-      <span>
-        {firstChunk}
-        <span className={rowClassName}>{row.accentSubstring}</span>
-        {lastChunk}
-      </span>
-    );
-  }
-
-  return <span>{row.text}</span>;
-};
-
 export const ParagraphConstructor = ({ rows }: ParagraphConstructorProps) => {
   return (
     <p className={styles.paragraph}>
       {rows.map((row, rowIndex) => {
-        return <span key={rowIndex}>{createRow(row)}</span>;
+        return <Row key={rowIndex} data={row} />;
       })}
     </p>
   );

src/shared/paragraphConstructor/ui/row/index.tsx

@@ -0,0 +1,28 @@
+import styles from "./styles.module.css";
+import type { ParagraphConstructorRow } from "../../api/types";
+
+interface RowProps {
+  data: ParagraphConstructorRow;
+}
+
+export const Row = ({ data }: RowProps) => {
+  const rowClassName = data.accentColor ? styles[data.accentColor] : "";
+
+  if (data.isTag) {
+    return <span className={rowClassName}>&lt;{data.text}&gt;</span>;
+  }
+
+  if (data.accentSubstring) {
+    const [firstChunk, lastChunk] = data.text.split(data.accentSubstring);
+
+    return (
+      <span>
+        {firstChunk}
+        <span className={rowClassName}>{data.accentSubstring}</span>
+        {lastChunk}
+      </span>
+    );
+  }
+
+  return <span>{data.text}</span>;
+};

src/shared/paragraphConstructor/ui/row/styles.module.css

@@ -0,0 +1,15 @@
+.yellow {
+  color: var(--color-yellow);
+}
+.red {
+  color: var(--color-red);
+}
+.purple {
+  color: var(--color-purple);
+}
+.blue {
+  color: var(--color-blue);
+}
+.green {
+  color: var(--color-green);
+}

src/shared/paragraphConstructor/ui/styles.module.css

@@ -7,19 +7,3 @@
     font-size: 16px;
   }
 }
-
-.yellow {
-  color: var(--color-yellow);
-}
-.red {
-  color: var(--color-red);
-}
-.purple {
-  color: var(--color-purple);
-}
-.blue {
-  color: var(--color-blue);
-}
-.green {
-  color: var(--color-green);
-}