51 lines
1.0 KiB
Svelte
51 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import Icon from '@iconify/svelte';
|
|
import { batteryAt, batteryIcon, type BatteryState } from '#lib/desktop/battery';
|
|
|
|
let battery = $state<BatteryState | null>(null);
|
|
|
|
const isLow = $derived(!!battery && battery.level < 20 && !battery.charging);
|
|
|
|
onMount(() => {
|
|
battery = batteryAt(new Date());
|
|
const timer = setInterval(() => (battery = batteryAt(new Date())), 10000);
|
|
return () => clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
{#if battery}
|
|
<span
|
|
class="battery"
|
|
class:low={isLow}
|
|
class:charging={battery.charging}
|
|
title="Battery {battery.level}% {battery.charging ? '(charging)' : ''}"
|
|
>
|
|
<Icon icon={batteryIcon(battery)} width="18" />
|
|
<span class="level">{battery.level}%</span>
|
|
</span>
|
|
{/if}
|
|
|
|
<style>
|
|
.battery {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0 0.4rem;
|
|
}
|
|
|
|
.charging {
|
|
color: var(--green);
|
|
}
|
|
|
|
.low {
|
|
color: var(--red);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.level {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|