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
82 lines
3 KiB
Svelte
82 lines
3 KiB
Svelte
<script lang="ts">
|
|
type SocialProofUser = { display_name: string; avatar_url: string };
|
|
|
|
let {
|
|
users,
|
|
total_size,
|
|
message,
|
|
}: {
|
|
users: SocialProofUser[];
|
|
total_size: number;
|
|
message?: string | null;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="flex items-center mt-4 flex-nowrap">
|
|
{#if users.length > 0}
|
|
<div class="flex m-0 ml-0 shrink-0">
|
|
{#each users as user, index}
|
|
<div
|
|
class={`relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group ${index > 0 ? "-ml-4" : ""}`}
|
|
>
|
|
<div
|
|
class="absolute -top-9 left-1/2 transform -translate-x-1/2 bg-surface-100 text-surface-content px-2 py-1 rounded text-xs whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-20"
|
|
>
|
|
{user.display_name}
|
|
<div
|
|
class="absolute top-full left-1/2 -ml-1 border-l-2 border-r-2 border-t-2 border-transparent border-t-gray-800"
|
|
></div>
|
|
</div>
|
|
<img
|
|
src={user.avatar_url}
|
|
alt={user.display_name}
|
|
class="w-10 h-10 rounded-full border-2 border-primary object-cover shadow-sm"
|
|
/>
|
|
</div>
|
|
{/each}
|
|
{#if total_size > 5}
|
|
<div
|
|
class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group -ml-4"
|
|
title={`See all ${total_size} users`}
|
|
>
|
|
<div
|
|
class="w-10 h-10 rounded-full border-2 border-primary bg-primary text-on-primary font-bold text-sm flex items-center justify-center shadow-sm"
|
|
>
|
|
+{total_size - 5}
|
|
</div>
|
|
<div
|
|
class="absolute -left-5 top-11 bg-surface-100 rounded-lg shadow-xl p-4 w-80 z-50 max-h-96 overflow-y-auto opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200"
|
|
>
|
|
<h4
|
|
class="mt-0 mb-2 text-base text-muted border-b border-surface-200 pb-2"
|
|
>
|
|
All users who set up Hackatime
|
|
</h4>
|
|
<div class="flex flex-col gap-2">
|
|
{#each users as user}
|
|
<div
|
|
class="flex items-center p-1 rounded hover:bg-surface-100 transition-colors duration-200"
|
|
>
|
|
<img
|
|
src={user.avatar_url}
|
|
alt={user.display_name}
|
|
class="w-8 h-8 rounded-full mr-2 border border-primary"
|
|
/>
|
|
<span class="font-medium text-sm">{user.display_name}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div
|
|
class="absolute -top-2 left-8 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-gray-800"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{#if message}
|
|
<p class="m-0 ml-2 italic text-muted">
|
|
{message} (this is real data)
|
|
</p>
|
|
{/if}
|
|
</div>
|