38 lines
1.0 KiB
Plaintext
38 lines
1.0 KiB
Plaintext
|
---
|
||
|
|
import type { FetchResult } from "@/types/types"
|
||
|
|
import Disclosure from "./output/Disclosure.astro"
|
||
|
|
import DisclosureContainer from "./output/DisclosureContainer.astro"
|
||
|
|
import { diffChars } from "diff"
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
fetchResult: FetchResult | null
|
||
|
|
}
|
||
|
|
const { fetchResult } = Astro.props
|
||
|
|
---
|
||
|
|
|
||
|
|
<DisclosureContainer>
|
||
|
|
<Disclosure title={"Show me how it's done"}>
|
||
|
|
<table class={"table"}>
|
||
|
|
<tbody>
|
||
|
|
{
|
||
|
|
fetchResult?.orderOperations?.map((operation, index) => (
|
||
|
|
<tr class={"border-b border-dotted border-gray-500"}>
|
||
|
|
<td>{index + 1}:</td>
|
||
|
|
<td class={"px-2"}>
|
||
|
|
{
|
||
|
|
diffChars(operation.before, operation.after).map((part) => (
|
||
|
|
<span class={`${part.added && "bg-green-700"} ${part.removed && "bg-red-700"}`}>
|
||
|
|
{part.value}
|
||
|
|
</span>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</td>
|
||
|
|
<td>using: {operation.law}</td>
|
||
|
|
</tr>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</Disclosure>
|
||
|
|
</DisclosureContainer>
|