<div class="flex flex-col">
	<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
		<table class="min-w-full divide-y divide-gray-200">
			<thead>
				<tr
					class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
				>
					<th class="text-left max-w-xs" scope="col">Name</th>
					<th class="text-left" scope="col">Type</th>
					<th class="text-left" scope="col">Fault reason</th>
				</tr>
			</thead>
			<tbody class="divide-y divide-gray-200 bg-white">
				{#each { length: 1 } as item, index}
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900"> Lamp 001 </td>
						<td>Bulb</td>
						<td> Zero power consumed </td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900"> Gateway 001 </td>
						<td>A wi-fi router</td>
						<td> Offline </td>
					</tr>
					<tr class="bg-white text-sm *:px-6 *:py-4">
						<td class="text-gray-900"> Motion sensor 001 </td>
						<td>A sensor</td>
						<td> Too high measures </td>
					</tr>
				{/each}
				<!-- More transactions... -->
			</tbody>
		</table>
	</div>
</div>
