lucent-laravel/front/js/svelte/records/revisions/RevisionCell.svelte

<script>
    import PreviewCardSmall from "../PreviewCardSmall.svelte";
    import PreviewFile from "../previews/PreviewFile.svelte";

    export let field;
    export let side;
    export let edges;
    export let colorClass;
</script>

{#if ["reference"].includes(field.info.name)}
    <div class="{colorClass}  field-content">
        <div class="d-flex align-items-center text-center flex-wrap">
            {#each edges[field.name] as edgeRecord}
                <div class="ms-2">
                    <PreviewCardSmall record={edgeRecord} />
                </div>
            {/each}
        </div>
    </div>
{:else if ["file"].includes(field.info.name)}
    <div class="{colorClass}  field-content">
        <div class="d-flex align-items-center text-center flex-wrap">
            {#each side as aFile}
                <div class="ms-2">
                    <PreviewFile file={aFile} />
                </div>
            {/each}
        </div>
    </div>
{:else if ["json", "block"].includes(field.info.name)}
    <div class="{colorClass} field-content" style="white-space: break-spaces;">
        {JSON.stringify(side, null, 2) ?? ""}
    </div>
{:else if field.info.name === "rich"}
    <div class="{colorClass}  field-content">{@html side ?? ""}</div>
{:else}
    <div class="{colorClass}  field-content">{JSON.stringify(side) ?? ""}</div>
{/if}

<!-- {/if} -->
<style>
    .field-content {
        max-height: 200px;
        overflow-y: scroll;
    }
</style>