52 lines
1.6 KiB
Svelte
52 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
saldo?: {
|
|
trabalhadoMinutos: number;
|
|
esperadoMinutos: number;
|
|
diferencaMinutos: number;
|
|
} | null;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const { saldo, size = 'md' }: Props = $props();
|
|
|
|
function formatarMinutos(minutos: number): { horas: number; minutos: number } {
|
|
const horas = Math.floor(Math.abs(minutos) / 60);
|
|
const mins = Math.abs(minutos) % 60;
|
|
return { horas, minutos: mins };
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: 'text-xs px-2 py-1',
|
|
md: 'text-sm px-3 py-1.5',
|
|
lg: 'text-base px-4 py-2'
|
|
};
|
|
</script>
|
|
|
|
{#if saldo}
|
|
{@const trabalhado = formatarMinutos(saldo.trabalhadoMinutos)}
|
|
{@const diferenca = formatarMinutos(saldo.diferencaMinutos)}
|
|
{@const sinalDiferenca = saldo.diferencaMinutos >= 0 ? '+' : '-'}
|
|
{@const isNegativo = saldo.diferencaMinutos < 0}
|
|
|
|
<div
|
|
class="inline-flex items-center gap-1.5 {sizeClasses[
|
|
size
|
|
]} rounded-lg border font-semibold shadow-sm {isNegativo
|
|
? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400'
|
|
: 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/20 dark:text-green-400'}"
|
|
>
|
|
<span class="font-bold text-green-600 dark:text-green-400"
|
|
>+{trabalhado.horas}h {trabalhado.minutos}min</span
|
|
>
|
|
<span class="text-base-content/50">/</span>
|
|
<span
|
|
class={isNegativo ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}
|
|
>
|
|
{sinalDiferenca}{diferenca.horas}h {diferenca.minutos}min
|
|
</span>
|
|
</div>
|
|
{:else}
|
|
<span class="badge badge-ghost {sizeClasses[size]}">-</span>
|
|
{/if}
|