your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { cn } from '@foxui/core';
3 import type { GitHubContributionsData } from './types';
4
5 let { data, isBig = false }: { data: GitHubContributionsData; isBig: boolean } = $props();
6
7 let colors: Record<string, string> = {
8 '#ebedf0': 'bg-accent-200/50 dark:bg-accent-950/30 accent:bg-accent-800/20',
9 '#9be9a8': 'bg-accent-300/50 dark:bg-accent-800/70 accent:bg-accent-800/40',
10 '#40c463': 'bg-accent-300 dark:bg-accent-700 accent:bg-accent-800/60',
11 '#30a14e': 'bg-accent-400 dark:bg-accent-600 accent:bg-accent-800/80',
12 '#216e39': 'bg-accent-500 accent:bg-accent-800'
13 };
14</script>
15
16<div class={cn('flex h-full w-full justify-end gap-0.5', isBig && 'gap-1')}>
17 {#each data.contributionsCollection.contributionCalendar.weeks as week (week.contributionDays)}
18 <div class={cn('flex w-full flex-col gap-0.5', isBig && 'gap-1')}>
19 {#if week.contributionDays.length === 7}
20 {#each week.contributionDays as day (day.date)}
21 <div
22 class={cn('size-2.5 rounded-sm', colors[day.color], isBig && 'size-3')}
23 title="Contributions: {day.contributionCount} on {day.date}"
24 ></div>
25 {/each}
26 {/if}
27 </div>
28 {/each}
29</div>