diff options
Diffstat (limited to 'packages/web/src/components/share/content-diff.tsx')
| -rw-r--r-- | packages/web/src/components/share/content-diff.tsx | 47 |
1 files changed, 28 insertions, 19 deletions
diff --git a/packages/web/src/components/share/content-diff.tsx b/packages/web/src/components/share/content-diff.tsx index 9ccd554d0..c8dd35b38 100644 --- a/packages/web/src/components/share/content-diff.tsx +++ b/packages/web/src/components/share/content-diff.tsx @@ -1,5 +1,5 @@ import { parsePatch } from "diff" -import { createMemo } from "solid-js" +import { createMemo, For } from "solid-js" import { ContentCode } from "./content-code" import styles from "./content-diff.module.css" @@ -160,28 +160,37 @@ export function ContentDiff(props: Props) { return ( <div class={styles.root}> <div data-component="desktop"> - {rows().map((r) => ( - <div data-component="diff-row" data-type={r.type}> - <div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}> - <ContentCode code={r.left} flush lang={props.lang} /> - </div> - <div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}> - <ContentCode code={r.right} lang={props.lang} flush /> + <For each={rows()}> + {(row) => ( + <div data-component="diff-row" data-type={row.type}> + <div + data-slot="before" + data-diff-type={row.type === "removed" || row.type === "modified" ? "removed" : ""} + > + <ContentCode code={row.left} flush lang={props.lang} /> + </div> + <div data-slot="after" data-diff-type={row.type === "added" || row.type === "modified" ? "added" : ""}> + <ContentCode code={row.right} lang={props.lang} flush /> + </div> </div> - </div> - ))} + )} + </For> </div> <div data-component="mobile"> - {mobileRows().map((block) => ( - <div data-component="diff-block" data-type={block.type}> - {block.lines.map((line) => ( - <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}> - <ContentCode code={line} lang={props.lang} flush /> - </div> - ))} - </div> - ))} + <For each={mobileRows()}> + {(block) => ( + <div data-component="diff-block" data-type={block.type}> + <For each={block.lines}> + {(line) => ( + <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}> + <ContentCode code={line} lang={props.lang} flush /> + </div> + )} + </For> + </div> + )} + </For> </div> </div> ) |