mirror of https://github.com/VERT-sh/VERT.git
53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { effects, files } from "$lib/store/index.svelte";
|
|
import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
|
|
import Panel from "../visual/Panel.svelte";
|
|
import Dropdown from "./Dropdown.svelte";
|
|
</script>
|
|
|
|
<Panel
|
|
class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4"
|
|
>
|
|
<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
|
|
<button
|
|
onclick={() => files.convertAll()}
|
|
class="btn {$effects
|
|
? ''
|
|
: '!scale-100'} highlight flex gap-3 max-md:w-full"
|
|
disabled={!files.ready}
|
|
>
|
|
<RefreshCw size="24" />
|
|
<p>Convert all</p>
|
|
</button>
|
|
<button
|
|
class="btn {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
|
|
disabled={!files.ready || !files.results}
|
|
onclick={() => files.downloadAll()}
|
|
>
|
|
<FolderArchiveIcon size="24" />
|
|
<p>Download all as .zip</p>
|
|
</button>
|
|
</div>
|
|
<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
|
|
<div class="flex items-center gap-2">
|
|
<p class="whitespace-nowrap text-xl">Set all to</p>
|
|
{#if files.requiredConverters.length === 1}
|
|
<!-- cannot convert to svg or heif -->
|
|
{@const supported =
|
|
files.files[0]?.converter?.supportedFormats?.filter(
|
|
(format) => format !== ".svg" && format !== ".heif",
|
|
)}
|
|
<Dropdown
|
|
onselect={(r) =>
|
|
files.files.forEach((f) => {
|
|
f.to = r;
|
|
f.result = null;
|
|
})}
|
|
options={supported || []}
|
|
/>
|
|
{:else}
|
|
<Dropdown options={["N/A"]} disabled />
|
|
{/if}
|
|
</div>
|
|
</Panel>
|