lucent-laravel/front/js/svelte/records/previews/PreviewFile.svelte

<script>
    import Icon from "../../common/Icon.svelte";

    import { createEventDispatcher } from "svelte";
    import Preview from "../../files/Preview.svelte";

    const dispatch = createEventDispatcher();

    export let file;
    export let hasDelete = false;

    function remove(e) {
        e.preventDefault();
        dispatch("remove_file", file.id);
    }
</script>

<div class="preview-file">
    <div style="display: flex;align-items: center;gap: 10px;">
        <div class="image">
            <Preview {file} size="small" />
        </div>
        <div class="title">
            <div>
                {file.filename}
            </div>
        </div>
    </div>
    <div
        style="display: flex;gap:4px; align-items: center;  margin-right: 10px;"
    >
        {#if hasDelete}
            <div class="reference-action">
                <button class="button" on:click={remove}>
                    <Icon icon="trash-can" />
                </button>
            </div>
        {/if}
    </div>
</div>