skflowne

plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: (css) => {
                css.write("public/build/bundle.css")
            },
            preprocess: sveltePreprocess({

skflowne

plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: (css) => {
                css.write("public/build/bundle.css")
            },
            preprocess: sveltePreprocess({

skflowne

<script lang="ts">
    import Tailwind from "./Tailwind.svelte"
</script>

<style lang="scss">
    main {
        h1 {
            font-size: 22rem;
        }
    }

skflowne

{
  id: 1,
  type: "folder",
  name: "public",
  comment: "changes for adding loader overlay",
  modified_time: "2020-06-30T11:44:41Z",
},
{
  id: 4,
  type: "file",

skflowne

export interface File {
    id: number
    type: "file" | "folder"
    name: string
    comment: string
    modified_time: string
}

skflowne

import { readable } from "svelte/store"
import apiFiles from "../api"

// import our custom File interface
import type { File } from "../interfaces/file.interface"

// create a readonly store which is going to contain an array of File
const files = readable<File[]>([], (set) => {
    set(apiFiles)
})

skflowne

<script lang="ts">
    import type { File } from "../../interfaces/file.interface"
    export let file: File
</script>

<div>{file.name}</div>

skflowne

<script lang="ts">
    import Tailwind from "./Tailwind.svelte"
    import FileItem from "./components/file-search/FileItem.svelte"
    import files from "./store/files"
</script>

<Tailwind />
<main>
    <FileItem file={$files[0]} />
</main>

skflowne

<script lang="ts">
    import Tailwind from "./Tailwind.svelte"
    import FileItem from "./components/file-search/FileItem.svelte"
    import files from "./store/files"

    let ourFiles = []
    files.subscribe((storeValue) => {
        ourFiles = storeValue
    })
</script>

skflowne

<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>