mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 16:38:23 +00:00
ef3f36c829
* Inertia p1? * Inertia'fied signed out homepage? * Split up signed in page * WIP signed in v2? * Better signed in? * Clean up extensions page! * Fix currently hacking * Better docs page? * Docs update 2 * Clean up "What is Hackatime?" + get rid of that godawful green dev mode * Better nav? * Cleaner settings? * Fix commit times * Fix flashes + OS improv * Setup v2 * Readd some of the syncers? * Remove stray emdash * Clean up Step 3 * Oops, remove .vite * bye bye, /inertia-example * bin/rubocop -A * Fix docs vuln
51 lines
1.6 KiB
Svelte
51 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { secondsToDisplay, percentOf, logScale } from "./utils";
|
|
|
|
let {
|
|
title,
|
|
entries,
|
|
empty_message = "No data yet.",
|
|
useLogScale = false,
|
|
}: {
|
|
title: string;
|
|
entries: [string, number][];
|
|
empty_message?: string;
|
|
useLogScale?: boolean;
|
|
} = $props();
|
|
|
|
const maxVal = $derived(Math.max(...entries.map(([_, v]) => v || 0), 1));
|
|
const barWidth = (seconds: number) =>
|
|
useLogScale ? logScale(seconds, maxVal) : percentOf(seconds, maxVal);
|
|
</script>
|
|
|
|
<div
|
|
class="bg-dark/50 border border-white/10 rounded-xl p-6 flex flex-col h-full"
|
|
>
|
|
<h3 class="text-lg font-semibold mb-4 text-white/90">{title}</h3>
|
|
{#if entries.length > 0}
|
|
<div class="space-y-2.5 overflow-y-auto flex-1 pr-2 custom-scrollbar">
|
|
{#each entries as [label, seconds]}
|
|
<div class="flex items-center gap-4 group">
|
|
<div
|
|
class="w-1/3 truncate font-medium text-sm text-gray-300 text-right group-hover:text-white transition-colors"
|
|
title={label}
|
|
>
|
|
{label}
|
|
</div>
|
|
<div class="flex-1 relative">
|
|
<div
|
|
class="bg-primary rounded-md h-6 flex items-center justify-end px-3 transition-all duration-500 ease-out"
|
|
style={`width:${Math.max(barWidth(seconds), 15)}%`}
|
|
>
|
|
<span class="text-xs font-mono text-white whitespace-nowrap">
|
|
{secondsToDisplay(seconds)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p class="text-muted text-sm italic">{empty_message}</p>
|
|
{/if}
|
|
</div>
|