arkvault/src/routes/(fullscreen)/settings/thumbnail/File.svelte

<script module lang="ts">
  const subtexts = {
    queued: "대기 중",
    "generation-pending": "준비 중",
    generating: "생성하는 중",
    "upload-pending": "업로드를 기다리는 중",
    uploading: "업로드하는 중",
    error: "실패",
  } as const;
</script>

<script lang="ts">
  import type { Writable } from "svelte/store";
  import { ActionEntryButton } from "$lib/components/atoms";
  import { DirectoryEntryLabel } from "$lib/components/molecules";
  import type { FileInfo } from "$lib/modules/filesystem2.svelte";
  import { formatDateTime } from "$lib/utils";
  import type { GenerationStatus } from "./service.svelte";

  import IconCamera from "~icons/material-symbols/camera";

  interface Props {
    info: FileInfo;
    onclick: (file: FileInfo) => void;
    onGenerateThumbnailClick: (file: FileInfo) => void;
    generationStatus?: Writable<GenerationStatus>;
  }

  let { info, onclick, onGenerateThumbnailClick, generationStatus }: Props = $props();
</script>

<ActionEntryButton
  class="h-14"
  onclick={() => onclick(info)}
  actionButtonIcon={!$generationStatus || $generationStatus === "error" ? IconCamera : undefined}
  onActionButtonClick={() => onGenerateThumbnailClick(info)}
  actionButtonClass="text-gray-800"
>
  {@const subtext =
    $generationStatus && $generationStatus !== "uploaded"
      ? subtexts[$generationStatus]
      : formatDateTime(info.createdAt ?? info.lastModifiedAt)}
  <DirectoryEntryLabel type="file" name={info.name} {subtext} />
</ActionEntryButton>