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

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