diff --git a/lib/dashboard.ts b/lib/dashboard.ts
index be0e4e6..8092b44 100644
--- a/lib/dashboard.ts
+++ b/lib/dashboard.ts
@@ -2,7 +2,7 @@ import {getTotalFollowers, getTotalRepos, getTotalStars} from '@/lib/github'
import {getAllArticles} from '@/lib/getAllArticles'
import {getViews} from '@/lib/views'
-export async function dashboard() {
+export async function getDashboardData() {
const [totalRepos, totalFollowers] = await Promise.all([
getTotalRepos(),
getTotalFollowers()
@@ -12,31 +12,46 @@ export async function dashboard() {
const totalArticles = (await getAllArticles()).length
const totalArticleViews = (await getViews()).views
- return [
+ const data = [
{
- title: "GitHub Repos",
+ title: "Repos",
metric: totalRepos,
+ group: "GitHub",
href: "https://github.com/r-freeman?tab=repositories"
},
{
- title: "GitHub Followers",
+ title: "Followers",
metric: totalFollowers,
+ group: "GitHub",
href: "https://github.com/r-freeman?tab=followers"
},
{
- title: "GitHub Stars",
+ title: "Stars",
metric: totalStars,
+ group: "GitHub",
href: "https://github.com/r-freeman/"
},
{
title: "Total Articles",
metric: totalArticles,
+ group: "Website",
href: "/writing"
},
{
title: "Total Article Views",
metric: totalArticleViews,
+ group: "Website",
href: "/writing"
}
]
+
+ const groups = data.reduce((acc, item) => {
+ // @ts-ignore
+ (acc[item.group] = acc[item.group] || []).push(item);
+ return acc;
+ }, {})
+
+ return Object.entries(groups).map(([groupName, groupItems]) => {
+ return {groupName, groupItems}
+ })
}
\ No newline at end of file
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 2a787aa..75ff274 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -1,17 +1,13 @@
+import React from 'react'
import Head from 'next/head'
import {GetStaticProps} from 'next'
import {SimpleLayout} from '@/components/SimpleLayout'
import {Card} from '@/components/Card'
import {numberFormat} from '@/lib/numberFormat'
-import {dashboard} from '@/lib/dashboard'
+import {getDashboardData} from '@/lib/dashboard'
+import type {CardGroupProps} from '@/types'
-type CardProps = {
- title: string
- metric: number
- href: string
-}
-
-export default function Dashboard({cards}: { cards: CardProps[] }) {
+export default function Dashboard({cardGroups}: { cardGroups: CardGroupProps }) {
return (
<>
@@ -34,21 +30,26 @@ export default function Dashboard({cards}: { cards: CardProps[] }) {
intro="This is my digital life in numbers which is updated daily. I use this dashboard to track various metrics across platforms like Spotify, GitHub, Twitter and more."
gradient="bg-gradient-to-r from-orange-300 to-rose-300"
>
-
- {cards.map((card) => (
-
-
- {card.title}
-
-
- {numberFormat(card.metric)}
-
-
- ))}
-
+ {cardGroups.map(({groupName, groupItems}, index) => (
+
+ {groupName}
+
+ {groupItems.map((card) => (
+
+
+ {card.title}
+
+
+ {typeof card.metric === "number" ? numberFormat(card.metric) : card.metric}
+
+
+ ))}
+
+
+ ))}
)
@@ -57,7 +58,7 @@ export default function Dashboard({cards}: { cards: CardProps[] }) {
export const getStaticProps: GetStaticProps = async () => {
return {
props: {
- cards: await dashboard()
+ cardGroups: await getDashboardData()
}
}
}
diff --git a/types/index.ts b/types/index.ts
index a7d74ce..31ed90a 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -22,4 +22,18 @@ export type Repo = {
name: string
color: string
}
-}
\ No newline at end of file
+}
+
+export type CardProps = {
+ title: string
+ metric: number | string
+ group: string
+ href: string
+}
+
+export type CardGroupProps = [
+ {
+ groupName: string,
+ groupItems: CardProps[]
+ }
+]