mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 22:15:14 +00:00
dd978bbeb9
* Themes pt1 * Themes pt2 * Standard -> Classic, new default is Gruvbox Dark * Make settings shell fatter
41 lines
936 B
Svelte
41 lines
936 B
Svelte
<script lang="ts">
|
|
let {
|
|
label,
|
|
value,
|
|
highlight = false,
|
|
subtitle = "",
|
|
}: {
|
|
label: string;
|
|
value: string | number;
|
|
highlight?: boolean;
|
|
subtitle?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div
|
|
class={`
|
|
relative flex flex-col justify-start p-4 rounded-xl border transition-all duration-200 h-full
|
|
${subtitle ? "pb-6" : ""}
|
|
${
|
|
highlight
|
|
? "bg-primary/10 border-primary/30"
|
|
: "bg-surface-100/30 border-surface-200 hover:border-surface-300"
|
|
}
|
|
`}
|
|
>
|
|
<div
|
|
class="text-secondary/80 text-xs font-medium uppercase tracking-wider mb-2"
|
|
>
|
|
{label}
|
|
</div>
|
|
<div
|
|
class={`font-bold text-surface-content wrap-break-word ${String(value).length > 15 ? "text-lg" : "text-xl"}`}
|
|
>
|
|
{value || "—"}
|
|
</div>
|
|
{#if subtitle}
|
|
<span class="absolute bottom-2 left-4 text-xs text-secondary font-normal opacity-70"
|
|
>{subtitle}</span
|
|
>
|
|
{/if}
|
|
</div>
|