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

<script>
    import Icon from "../common/Icon.svelte";
    import {imgurl} from "./imageserver.js";
    import {getContext} from "svelte";

    export let record;
    const channel = getContext("channel");
    export let size = "small";
    export let showFilename = false;
    let imageSide;
    let fileSide;
    let fontSize;
    if (size == "large") {
        imageSide = 256;
        fileSide = 32;
        fontSize = "20";
    } else if (size == "medium") {
        imageSide = 128;
        fileSide = 12;
        fontSize = "17";
    } else if (size == "small") {
        imageSide = 64;
        fileSide = 12;
        fontSize = "15";
    } else if (size == "tiny") {
        imageSide = 42;
        fileSide = 12;
        fontSize = "13";
    }
</script>
<div style="display: flex;align-items: center;gap: 5px;">
    {#if record}

        {#if record._file.mime.startsWith("image")}
            <!-- href={imgurl(record)} -->
            <a
                    href="{channel.lucentUrl}/records/{record.id}"
                    title={record._file.originalName}
                    style="width:{imageSide}px;height:{imageSide}px"
            >
                <img
                        class="rounded w-100"
                        src={imgurl(channel,record)}
                        alt={record._file.path}
                />
            </a>
        {:else}
            <a
                    href="{channel.lucentUrl}/records/{record.id}"
                    title={record._file.path}
                    class="file-preview-small"
                    style="width:{imageSide}px;height:{imageSide}px"
            >
                <Icon icon="file" width={fileSide} height={fileSide}/>
                <span class="ms-2"
                >.{record._file.path.split(".").pop().toLowerCase()}</span
                >
            </a>
        {/if}
    {/if}
    {#if showFilename}
        <a
                href="{channel.lucentUrl}/records/{record.id}"
                title={record._file.path}
                class="preview-file-filename lx-small-text text-decoration-none"
        >{record._file.path}  </a
        >
    {/if}
</div>

<style>
    img{
        border-radius: 12px;
        padding: 4px;
    }

</style>