lucent-laravel/front/js/svelte/newPreview/Preview.svelte

<script>
    import File from "./includes/File.svelte";
    import {previewTitle} from "../records/Preview.js";
    import {getContext} from "svelte";
    import Status from "../records/Status.svelte";

    const channel = getContext("channel");
    export let record;

    export let edge = null;
    let schema = channel.schemas.find(s => s.name === record.schema);
    let types = ["inline", "card"];
    export let type = "inline";
    if (!types.includes(type)) {
        console.error("unknown preview type")
    }
    export let editable = false;

</script>
<div class="preview-card">
    {#if edge?.data}
        <div class="preview-card-edge">Edge Data</div>
    {/if}
    <div class="d-flex column-gap-3">
        {#if record._file}
            <div>
                <File {record}/>
            </div>
        {/if}
        <div class="d-flex flex-md-column " style="line-height: 22px">
            <span class="">{previewTitle(record)}</span>
            <span class="d-flex gap-1 text-muted">
                {#if record.status === "draft"}
                    <Status status={record.status}/>
                {/if}
                {schema.label}
            </span>
        </div>
    </div>
</div>

<style>
    .preview-card {
        position: relative
    }

    .preview-card-edge {
        position: absolute;
        top: -28px;
        background: #fff;
        padding: 0px 5px;
        border: 1px solid #ccc;
        border-radius: 7px;
        font-size: 14px;
    }
</style>
<!--{#if record._file && type === "inline"}-->
<!--&lt;!&ndash;    <FilePreviewInline {record} {edge} {editable}/>&ndash;&gt;-->
<!--{:else if record._file && type === "card"}-->
<!--    <FilePreviewCard {record} {edge} {editable}/>-->
<!--{:else if type === "inline"}-->
<!--&lt;!&ndash;    <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
<!--{:else if type === "card"}-->
<!--&lt;!&ndash;    <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
<!--{/if}-->