FileList

<script lang="ts">
	import FileList from '@tcpsystems/ui/foundation/FileList';
	let files = $state([{ name: 'invoice-november.pdf', size: 48200, state: 'done' as const }]);
</script>

<FileList {files} onremove={(name) => files = files.filter(file => file.name !== name)} />

<script lang="ts">
	import FileList from '@tcpsystems/ui/foundation/FileList';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	type Upload = { name: string; size: number; state: 'queued' | 'uploading' | 'done' | 'error'; progress?: number; error?: string };
	let files = $state<Upload[]>([
		{ name: 'release-notes.txt', size: 1200, state: 'queued' },
		{ name: 'deployment.log', size: 64000, state: 'uploading', progress: 45 },
		{ name: 'trace.json', size: 8400, state: 'uploading' },
		{ name: 'invoice.pdf', size: 48200, state: 'error', error: 'Connection lost. Retry the upload.' }
	]);
</script>

<Stack>
	<FileList {files} onremove={(name) => files = files.filter(file => file.name !== name)}
		onretry={(name) => files = files.map(file => file.name === name ? { ...file, state: 'queued', error: undefined } : file)} />
	<Button onclick={() => files = files.map(file => ({ ...file, state: 'done', error: undefined }))}>Mark uploads complete</Button>
</Stack>

<script lang="ts">
	import FileList from '@tcpsystems/ui/foundation/FileList';
</script>

<FileList />