Spaces:
Build error
Build error
File size: 4,312 Bytes
3b623f5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import { formatFileSize } from '$lib/utils';
import FileItemModal from './FileItemModal.svelte';
import GarbageBin from '../icons/GarbageBin.svelte';
import Spinner from './Spinner.svelte';
import Tooltip from './Tooltip.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
export let className = 'w-60';
export let colorClassName = 'bg-white dark:bg-gray-850 border border-gray-50 dark:border-white/5';
export let url: string | null = null;
export let dismissible = false;
export let loading = false;
export let item = null;
export let edit = false;
export let small = false;
export let name: string;
export let type: string;
export let size: number;
let showModal = false;
</script>
{#if item}
<FileItemModal bind:show={showModal} bind:item {edit} />
{/if}
<button
class="relative group p-1.5 {className} flex items-center gap-1 {colorClassName} {small
? 'rounded-xl'
: 'rounded-2xl'} text-left"
type="button"
on:click={async () => {
if (item?.file?.data?.content) {
showModal = !showModal;
} else {
if (url) {
if (type === 'file') {
window.open(`${url}/content`, '_blank').focus();
} else {
window.open(`${url}`, '_blank').focus();
}
}
}
dispatch('click');
}}
>
{#if !small}
<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
{#if !loading}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class=" size-5"
>
<path
fill-rule="evenodd"
d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
clip-rule="evenodd"
/>
<path
d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
/>
</svg>
{:else}
<Spinner />
{/if}
</div>
{/if}
{#if !small}
<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
{name}
</div>
<div class=" flex justify-between text-gray-500 text-xs line-clamp-1">
{#if type === 'file'}
{$i18n.t('File')}
{:else if type === 'doc'}
{$i18n.t('Document')}
{:else if type === 'collection'}
{$i18n.t('Collection')}
{:else}
<span class=" capitalize line-clamp-1">{type}</span>
{/if}
{#if size}
<span class="capitalize">{formatFileSize(size)}</span>
{/if}
</div>
</div>
{:else}
<Tooltip content={name} className="flex flex-col w-full" placement="top-start">
<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
<div class=" dark:text-gray-100 text-sm flex justify-between items-center">
{#if loading}
<div class=" shrink-0 mr-2">
<Spinner className="size-4" />
</div>
{/if}
<div class="font-medium line-clamp-1 flex-1">{name}</div>
<div class="text-gray-500 text-xs capitalize shrink-0">{formatFileSize(size)}</div>
</div>
</div>
</Tooltip>
{/if}
{#if dismissible}
<div class=" absolute -top-1 -right-1">
<button
class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
type="button"
on:click|stopPropagation={() => {
dispatch('dismiss');
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
<!-- <button
class=" p-1 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-full group-hover:visible invisible transition"
type="button"
on:click={() => {
}}
>
<GarbageBin />
</button> -->
</div>
{/if}
</button>
|