Frontend passt wieder

src/lib/components/ListItem.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import Cube from '$lib/icons/Cube.svelte';
+	import Edit from '$lib/icons/Edit.svelte';
+	import Trash from '$lib/icons/Trash.svelte';
+	import shortenFileSize from '$lib/helper/shortenFileSize';
+	import timeElapsed from '$lib/helper/timeElapsed';
+
+	export let data;
+	export let i;
+
+	let crimesList = data.crimesList;
+	let item = crimesList[i];
+
+	let admin = data.user?.admin;
+	let link = `/view/${item.prefix}/${item.name}?token=${data.caseToken}`;
+
+	console.log('Debug Mina', crimesList, data);
+
+	function editName() {
+		console.log('Edit Name');
+	}
+
+	function deleteCase() {
+		console.log('Delete Case');
+	}
+
+	function checkIsEmpty() {
+		if (!item.name) console.log('Das Feld ist leer');
+	}
+
+	function cancelEdit() {
+		console.log('Bearbeitung abgebrochen');
+	}
+</script>
+
+<a href={link} class="flex justify-between items-center gap-x-6 py-5">
+	<div class=" flex gap-x-4">
+		<Cube class="h-auto" />
+		<div class="min-w-0 flex-auto">
+			{#if admin}
+				<input
+					class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
+					type="text"
+					value={item.name}
+					on:click|preventDefault={(ev) => {
+						editName();
+					}}
+				/>
+
+				<button
+					class="p-2"
+					on:click|preventDefault={(ev) => {
+						editName();
+					}}
+				>
+					<Edit />
+				</button>
+
+				<button
+					class="p-2"
+					on:click|preventDefault={async (ev) => {
+						deleteCase();
+					}}
+				>
+					<Trash />
+				</button>
+			{:else}
+				<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1">
+					{item.name}
+				</span>
+			{/if}
+
+			<p class="mt-1 truncate text-xs leading-5 text-gray-500">{shortenFileSize(item.size)}</p>
+		</div>
+	</div>
+	<div class="hidden sm:flex sm:flex-col sm:items-end">
+		<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+
+		<p class="mt-1 text-xs leading-5 text-gray-500">
+			Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+				>{timeElapsed(new Date(item.lastModified))}</time
+			>
+		</p>
+	</div>
+</a>