40 lines
1.0 KiB
Svelte
40 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import Thermometer from '@lucide/svelte/icons/thermometer';
|
|
import { m } from '$lib/paraglide/messages';
|
|
|
|
import type { Temp } from './types';
|
|
|
|
import DataPanel from './data-panel.svelte';
|
|
import { tempText } from './format';
|
|
|
|
let { items }: { items: Temp[] } = $props();
|
|
</script>
|
|
|
|
<DataPanel
|
|
title={m.dashboard_temperatures()}
|
|
icon={Thermometer}
|
|
{items}
|
|
initialDir="desc"
|
|
pageSize={7}
|
|
columns={[
|
|
{ get: (t) => t.celsius, key: 'temp', label: m.dashboard_col_temp() },
|
|
{ get: (t) => t.chip, key: 'chip', label: m.dashboard_col_sensor() }
|
|
]}
|
|
>
|
|
{#snippet row(temp, i)}
|
|
<div
|
|
class="flex items-center justify-between gap-3 py-2 text-sm {i > 0
|
|
? 'border-border/60 border-t'
|
|
: ''}"
|
|
>
|
|
<div class="flex items-baseline gap-1.5 min-w-0">
|
|
<span class="text-muted-foreground font-mono text-xs">{temp.chip}</span>
|
|
<span class="truncate">{temp.label}</span>
|
|
</div>
|
|
<span class="font-semibold tabular-nums shrink-0 {tempText(temp.celsius)}"
|
|
>{temp.celsius.toFixed(1)} °C</span
|
|
>
|
|
</div>
|
|
{/snippet}
|
|
</DataPanel>
|