feat(ui): add contribution graph

src/app/about/statistics/components/github-dashboard/cards/line-graph/chart.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { ContributionDay } from '@/shared/lib/github'
+import { useTheme } from 'next-themes'
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Tooltip,
+  TooltipProps,
+  XAxis
+} from 'recharts'
+import {
+  NameType,
+  ValueType
+} from 'recharts/types/component/DefaultTooltipContent'
+import usePrefersColorScheme from 'use-prefers-color-scheme'
+
+export function Chart({ data }: { data: ContributionDay[] }) {
+  const { theme } = useTheme()
+  const colorScheme = usePrefersColorScheme()
+  const isDarkMode =
+    theme === 'system' ? colorScheme === 'dark' : theme == 'dark'
+
+  return (
+    <AreaChart
+      width={900}
+      height={220}
+      data={data}
+      className="cursor-pointer"
+      margin={{ top: 0, right: 10, left: 10, bottom: 0 }}
+    >
+      <defs>
+        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="5%" stopColor="#26a64160" stopOpacity={0.8} />
+          <stop offset="95%" stopColor="#26a64160" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <XAxis
+        dataKey="shortDate"
+        interval={0}
+        tick={{ strokeWidth: 0.5, fontSize: '0.8rem' }}
+      />
+      <CartesianGrid
+        strokeDasharray="2 3"
+        stroke={isDarkMode ? '#ffffff20' : '#00000030'}
+      />
+      <Tooltip content={<ContributionsToolTip />} />
+      <Area
+        dot
+        activeDot
+        strokeWidth={3}
+        type="monotone"
+        dataKey="contributionCount"
+        aria-label="count"
+        stroke="#26a641"
+        fillOpacity={1}
+        fill="url(#colorUv)"
+      />
+    </AreaChart>
+  )
+}
+
+const ContributionsToolTip = ({
+  active,
+  payload
+}: TooltipProps<ValueType, NameType>) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="w-fit max-w-[250px] rounded-md bg-neutral-100 p-5 text-sm text-black shadow-lg dark:bg-neutral-950 dark:text-gray-200">
+        <p className="label">
+          <span className="font-medium">Date :</span>{' '}
+          {new Date(payload[0].payload.date).toDateString()}
+        </p>
+        <p className="desc">
+          <span className="font-medium">Commit Count :</span> {payload[0].value}
+        </p>
+      </div>
+    )
+  }
+
+  return null
+}

src/app/about/statistics/components/github-dashboard/cards/line-graph/index.tsx

@@ -0,0 +1,19 @@
+import { ChartLine } from '@phosphor-icons/react/dist/ssr'
+import { getGithubContribution } from '@/shared/lib/github'
+import { Chart } from './chart'
+
+export async function LineGraph() {
+  const githubActivity = await getGithubContribution()
+
+  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">
+        <span>Contribution Graph</span>
+        <ChartLine size="1em" weight="duotone" />
+      </span>
+      <div className="flex h-full items-center">
+        <Chart data={githubActivity.contributions} />
+      </div>
+    </div>
+  )
+}

src/app/about/statistics/components/github-dashboard/cards/line-graph/skeleton.tsx

@@ -0,0 +1,15 @@
+import { ChartLine } from '@phosphor-icons/react/dist/ssr'
+
+export function LineGraphSkeleton() {
+  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">
+        <span>Contribution Graph</span>
+        <ChartLine size="1em" weight="duotone" />
+      </span>
+      <div className="flex flex-col gap-2">
+        <div className="h-36 w-full animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
+      </div>
+    </div>
+  )
+}

src/app/about/statistics/components/github-dashboard/index.tsx

@@ -10,6 +10,7 @@ import { Repos } from './cards/repos'
 import { Stars } from './cards/stars'
 import { Commits } from './cards/commits'
 import { Graph } from './cards/graph'
+import { LineGraph } from './cards/line-graph'
 
 export function GithubDashboard() {
   return (
@@ -28,6 +29,10 @@ export function GithubDashboard() {
           <div className="col-span-4">
             <Graph />
           </div>
+
+          <div className="col-span-4">
+            <LineGraph />
+          </div>
         </div>
       </Suspense>
     </ErrorBoundary>

src/app/about/statistics/components/github-dashboard/skeleton/index.tsx

@@ -4,6 +4,7 @@ import { LanguagesSkeleton } from './languages'
 import { ReposSkeleton } from './repos'
 import { CommitsSkeleton } from './commits'
 import { GraphSkeleton } from './graph'
+import { LineGraphSkeleton } from '../cards/line-graph/skeleton'
 
 export function GithubStatsSkeleton() {
   return (
@@ -21,6 +22,10 @@ export function GithubStatsSkeleton() {
       <div className="col-span-4">
         <GraphSkeleton />
       </div>
+
+      <div className="col-span-4">
+        <LineGraphSkeleton />
+      </div>
     </div>
   )
 }