From 78216ec5f0d0a9755bf1cea5198733729cdf8bdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Fri, 29 Dec 2023 18:02:38 +0000
Subject: [PATCH] feat(statistics): update github-contribution-calendar

---
 .../github-dashboard/cards/followers.tsx      |  2 +-
 .../github-dashboard/cards/graph.tsx          | 34 +++++++++----------
 .../components/github-dashboard/index.tsx     |  4 +--
 .../github-dashboard/skeleton/follower.tsx    |  2 +-
 .../github-dashboard/skeleton/graph.tsx       | 10 +++---
 .../github-dashboard/skeleton/index.tsx       |  4 +--
 src/styles/components.css                     |  8 +++++
 7 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/app/about/statistics/components/github-dashboard/cards/followers.tsx b/src/app/about/statistics/components/github-dashboard/cards/followers.tsx
index 50a8e6ef..66b1e8a0 100644
--- a/src/app/about/statistics/components/github-dashboard/cards/followers.tsx
+++ b/src/app/about/statistics/components/github-dashboard/cards/followers.tsx
@@ -5,7 +5,7 @@ import { placeholder } from '@/shared/lib/placeholder'
 import { shuffleArray } from '@/shared/lib/shuffleArray'
 import { getGithubFollowers, getGithubUserData } from '@/shared/lib/github'
 
-const AVATAR_COUNT = 119
+const AVATAR_COUNT = 71
 
 export async function Followers() {
   const { followers: followersNumber } = await getGithubUserData()
diff --git a/src/app/about/statistics/components/github-dashboard/cards/graph.tsx b/src/app/about/statistics/components/github-dashboard/cards/graph.tsx
index cf0a59ec..47acf8cc 100644
--- a/src/app/about/statistics/components/github-dashboard/cards/graph.tsx
+++ b/src/app/about/statistics/components/github-dashboard/cards/graph.tsx
@@ -1,8 +1,14 @@
-import Image from 'next/image'
+'use client'
+
 import { CalendarBlank } from '@phosphor-icons/react/dist/ssr'
-import { placeholder } from '@/shared/lib/placeholder'
+import GitHubCalendar from 'react-github-calendar'
+import { useTheme } from 'next-themes'
 
 export function Graph() {
+  const { theme } = useTheme()
+
+  const colorScheme = theme !== 'dark' && theme !== 'light' ? undefined : theme
+
   return (
     <div className="flex h-full w-full flex-col justify-center gap-3 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
       <span className="inline-flex items-center gap-2 text-neutral-600">
@@ -10,21 +16,15 @@ export function Graph() {
         <CalendarBlank size="1em" weight="duotone" />
       </span>
       <div className="flex items-center">
-        <Image
-          src="https://contribution.catsjuice.com/_/mateusfg7?chart=calendar&format=png&quality=10&weeks=40&theme=native&widget_size=small"
-          placeholder={placeholder(1992, 408) as `data:image/${string}`}
-          alt="Contribution Graph"
-          className="dark:hidden"
-          width={1992}
-          height={408}
-        />
-        <Image
-          src="https://contribution.catsjuice.com/_/mateusfg7?chart=calendar&format=png&quality=1&weeks=40&theme=native&widget_size=small&dark=true"
-          placeholder={placeholder(1992, 408) as `data:image/${string}`}
-          alt="Contribution Graph"
-          className="hidden dark:block"
-          width={1992}
-          height={408}
+        <GitHubCalendar
+          username="mateusfg7"
+          blockMargin={4}
+          blockRadius={4}
+          blockSize={13}
+          colorScheme={colorScheme}
+          style={{
+            width: '100%'
+          }}
         />
       </div>
     </div>
diff --git a/src/app/about/statistics/components/github-dashboard/index.tsx b/src/app/about/statistics/components/github-dashboard/index.tsx
index bc78f02b..b2540ba8 100644
--- a/src/app/about/statistics/components/github-dashboard/index.tsx
+++ b/src/app/about/statistics/components/github-dashboard/index.tsx
@@ -16,7 +16,7 @@ export function GithubDashboard() {
     <ErrorBoundary fallback={<FallbackError />}>
       <Suspense fallback={<GithubStatsSkeleton />}>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
-          <div className="col-span-2 row-span-3">
+          <div className="col-span-2 row-span-2">
             <Followers />
           </div>
 
@@ -25,7 +25,7 @@ export function GithubDashboard() {
           <Repos />
           <Commits />
 
-          <div className="col-span-2">
+          <div className="col-span-4">
             <Graph />
           </div>
         </div>
diff --git a/src/app/about/statistics/components/github-dashboard/skeleton/follower.tsx b/src/app/about/statistics/components/github-dashboard/skeleton/follower.tsx
index acb99cd3..04570e4b 100644
--- a/src/app/about/statistics/components/github-dashboard/skeleton/follower.tsx
+++ b/src/app/about/statistics/components/github-dashboard/skeleton/follower.tsx
@@ -9,7 +9,7 @@ export const FollowersSkeleton = () => {
       </span>
       <span className="text-xl">
         <div className="grid grid-cols-12 gap-1">
-          {[...Array(119 + 1)].map((e, i) => (
+          {[...Array(71 + 1)].map((e, i) => (
             <div
               key={i}
               className="h-5 w-5 animate-pulse rounded-full border-2 border-neutral-200 bg-neutral-400 dark:border-neutral-950 dark:bg-neutral-800 md:h-7 md:w-7"
diff --git a/src/app/about/statistics/components/github-dashboard/skeleton/graph.tsx b/src/app/about/statistics/components/github-dashboard/skeleton/graph.tsx
index 2907a8fa..d21e2925 100644
--- a/src/app/about/statistics/components/github-dashboard/skeleton/graph.tsx
+++ b/src/app/about/statistics/components/github-dashboard/skeleton/graph.tsx
@@ -1,6 +1,4 @@
-import Image from 'next/image'
 import { CalendarBlank } from '@phosphor-icons/react/dist/ssr'
-import { placeholder } from '@/shared/lib/placeholder'
 
 export function GraphSkeleton() {
   return (
@@ -9,8 +7,12 @@ export function GraphSkeleton() {
         <span>Contribution Graph</span>
         <CalendarBlank size="1em" weight="duotone" />
       </span>
-      <div className="flex items-center">
-        <div className="h-20 w-full animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
+      <div className="flex flex-col gap-2">
+        <div className="h-28 w-full animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
+        <div className="flex w-full justify-between">
+          <div className="h-6 w-52 animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
+          <div className="h-6 w-32 animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
+        </div>
       </div>
     </div>
   )
diff --git a/src/app/about/statistics/components/github-dashboard/skeleton/index.tsx b/src/app/about/statistics/components/github-dashboard/skeleton/index.tsx
index 3eb41c79..1d88f3b9 100644
--- a/src/app/about/statistics/components/github-dashboard/skeleton/index.tsx
+++ b/src/app/about/statistics/components/github-dashboard/skeleton/index.tsx
@@ -8,7 +8,7 @@ import { GraphSkeleton } from './graph'
 export function GithubStatsSkeleton() {
   return (
     <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
-      <div className="col-span-2 row-span-3">
+      <div className="col-span-2 row-span-2">
         <FollowersSkeleton />
       </div>
 
@@ -18,7 +18,7 @@ export function GithubStatsSkeleton() {
 
       <CommitsSkeleton />
 
-      <div className="col-span-2">
+      <div className="col-span-4">
         <GraphSkeleton />
       </div>
     </div>
diff --git a/src/styles/components.css b/src/styles/components.css
index a922528d..2631580c 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -316,4 +316,12 @@
       @apply my-4 border-red-600 last:mb-0 [&:nth-child(2)]:mt-0;
     }
   }
+
+  article {
+    div {
+      svg {
+        @apply w-full;
+      }
+    }
+  }
 }