diff --git a/components/CardGroup.tsx b/components/CardGroup.tsx new file mode 100644 index 0000000..6b3a27f --- /dev/null +++ b/components/CardGroup.tsx @@ -0,0 +1,22 @@ +import React, {ReactNode, useId} from 'react' + +type CardGroupProps = { + title: string + children: ReactNode +} + +export function CardGroup({title, children}: CardGroupProps) { + const id = useId() + + return ( +
+

{title}

+ +
+ ) +} \ No newline at end of file diff --git a/lib/dashboard.ts b/lib/dashboard.ts index a67f96e..9232e75 100644 --- a/lib/dashboard.ts +++ b/lib/dashboard.ts @@ -1,7 +1,7 @@ import {getTotalFollowers, getTotalRepos, getTotalStars} from '@/lib/github' import {getAllArticles} from '@/lib/getAllArticles' import {getViews} from '@/lib/views' -import {CardProps} from '@/types' +import {Metric} from '@/types' export async function getDashboardData() { const [totalRepos, totalFollowers] = await Promise.all([ @@ -13,43 +13,44 @@ export async function getDashboardData() { const totalArticles = (await getAllArticles()).length const totalArticleViews = (await getViews()).views - const data: CardProps[] = [ + const metrics: Metric[] = [ { title: "Repos", - metric: totalRepos, + value: totalRepos, group: "GitHub", href: "https://github.com/r-freeman?tab=repositories" }, { title: "Followers", - metric: totalFollowers, + value: totalFollowers, group: "GitHub", href: "https://github.com/r-freeman?tab=followers" }, { title: "Stars", - metric: totalStars, + value: totalStars, group: "GitHub", href: "https://github.com/r-freeman/" }, { title: "Total Articles", - metric: totalArticles, + value: totalArticles, group: "Website", href: "/writing" }, { title: "Total Article Views", - metric: totalArticleViews, + value: totalArticleViews, group: "Website", href: "/writing" } ] - const groups = data.reduce((acc: { [key: string]: CardProps[] }, item) => { + // sort metrics into named groups + const groups = metrics.reduce((acc: { [key: string]: Metric[] }, item) => { (acc[item.group] = acc[item.group] || []).push(item); return acc - }, {} as { [key: string]: CardProps[] }) + }, {} as { [key: string]: Metric[] }) return Object.entries(groups).map(([groupName, groupItems]) => { return {groupName, groupItems} diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 75ff274..ceeae74 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -3,18 +3,20 @@ import Head from 'next/head' import {GetStaticProps} from 'next' import {SimpleLayout} from '@/components/SimpleLayout' import {Card} from '@/components/Card' +import {CardGroup} from '@/components/CardGroup' import {numberFormat} from '@/lib/numberFormat' import {getDashboardData} from '@/lib/dashboard' -import type {CardGroupProps} from '@/types' +import type {MetricGroup} from '@/types' -export default function Dashboard({cardGroups}: { cardGroups: CardGroupProps }) { + +export default function Dashboard({metrics}: { metrics: MetricGroup }) { return ( <> Dashboard - Ryan Freeman - {cardGroups.map(({groupName, groupItems}, index) => ( -
-

{groupName}

- -
+ {metrics.map(({groupName, groupItems}) => ( + + {groupItems.map((item) => ( + +

+ {item.title} +

+ + {typeof item.value === "number" ? numberFormat(item.value) : item.value} + + + ))} + ))} @@ -58,7 +54,7 @@ export default function Dashboard({cardGroups}: { cardGroups: CardGroupProps }) export const getStaticProps: GetStaticProps = async () => { return { props: { - cardGroups: await getDashboardData() + metrics: await getDashboardData() } } } diff --git a/types/index.ts b/types/index.ts index 31ed90a..fda6804 100644 --- a/types/index.ts +++ b/types/index.ts @@ -24,16 +24,16 @@ export type Repo = { } } -export type CardProps = { +export type Metric = { title: string - metric: number | string + value: number | string group: string href: string } -export type CardGroupProps = [ +export type MetricGroup = [ { groupName: string, - groupItems: CardProps[] + groupItems: Metric[] } ]