FileItem.svelte

<script lang="ts">
    import Icon from "svelte-awesome/components/Icon.svelte"
    import { faFileCode, faFolder } from "@fortawesome/free-regular-svg-icons"
    import { parseJSON, formatDistanceToNow } from "date-fns"
    import type { File } from "../../interfaces/file.interface"

    export let file: File

    const distance = formatDistanceToNow(parseJSON(file.modified_time))
</script>

<div class="list-item w-full flex flex-row items-center justify-between py-1 px-4 border border-gray-200">
    <div class="file">
        <span class={`file-icon text-xl px-1 pr-2 ${file.type === 'file' ? 'text-blue-400' : 'text-yellow-600'}`}>
            {#if file.type === 'file'}
                <Icon data={faFileCode} />
            {:else}
                <Icon data={faFolder} />
            {/if}
        </span>
        <span class={`${file.type === 'file' ? 'text-blue-500' : 'text-yellow-700'}`}>{file.name}</span>
    </div>
    <div class="comment text-gray-700">{file.comment}</div>
    <div class="time text-gray-600" title={file.modified_time}>{distance} ago</div>
</div>