r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 13:15:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added card groups to dashboard

Browse Source
This commit is contained in:
r-freeman 2023-01-29 22:16:58 +00:00
parent d9d5becd8a
commit 48c32c333e
3 changed files with 60 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lib/dashboard.ts
View File

@ -2,7 +2,7 @@ import {getTotalFollowers, getTotalRepos, getTotalStars} from '@/lib/github'
import {getAllArticles} from '@/lib/getAllArticles' import {getAllArticles} from '@/lib/getAllArticles'
import {getViews} from '@/lib/views' import {getViews} from '@/lib/views'
export async function dashboard() { export async function getDashboardData() {
const [totalRepos, totalFollowers] = await Promise.all([ const [totalRepos, totalFollowers] = await Promise.all([
getTotalRepos(), getTotalRepos(),
getTotalFollowers() getTotalFollowers()
@ -12,31 +12,46 @@ export async function dashboard() {
const totalArticles = (await getAllArticles()).length const totalArticles = (await getAllArticles()).length
const totalArticleViews = (await getViews()).views const totalArticleViews = (await getViews()).views
return [ const data = [
{ {
title: "GitHub Repos", title: "Repos",
metric: totalRepos, metric: totalRepos,
group: "GitHub",
href: "https://github.com/r-freeman?tab=repositories" href: "https://github.com/r-freeman?tab=repositories"
}, },
{ {
title: "GitHub Followers", title: "Followers",
metric: totalFollowers, metric: totalFollowers,
group: "GitHub",
href: "https://github.com/r-freeman?tab=followers" href: "https://github.com/r-freeman?tab=followers"
}, },
{ {
title: "GitHub Stars", title: "Stars",
metric: totalStars, metric: totalStars,
group: "GitHub",
href: "https://github.com/r-freeman/" href: "https://github.com/r-freeman/"
}, },
{ {
title: "Total Articles", title: "Total Articles",
metric: totalArticles, metric: totalArticles,
group: "Website",
href: "/writing" href: "/writing"
}, },
{ {
title: "Total Article Views", title: "Total Article Views",
metric: totalArticleViews, metric: totalArticleViews,
group: "Website",
href: "/writing" 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}
})
} }

49
pages/dashboard.tsx
View File

@ -1,17 +1,13 @@
import React from 'react'
import Head from 'next/head' import Head from 'next/head'
import {GetStaticProps} from 'next' import {GetStaticProps} from 'next'
import {SimpleLayout} from '@/components/SimpleLayout' import {SimpleLayout} from '@/components/SimpleLayout'
import {Card} from '@/components/Card' import {Card} from '@/components/Card'
import {numberFormat} from '@/lib/numberFormat' import {numberFormat} from '@/lib/numberFormat'
import {dashboard} from '@/lib/dashboard' import {getDashboardData} from '@/lib/dashboard'
import type {CardGroupProps} from '@/types'
type CardProps = { export default function Dashboard({cardGroups}: { cardGroups: CardGroupProps }) {
title: string
metric: number
href: string
}
export default function Dashboard({cards}: { cards: CardProps[] }) {
return ( return (
<> <>
<Head> <Head>
@ -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." 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" gradient="bg-gradient-to-r from-orange-300 to-rose-300"
> >
<ul {cardGroups.map(({groupName, groupItems}, index) => (
role="list" <section key={index}>
className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3" <h2 className="text-sm font-semibold text-zinc-800 dark:text-zinc-100 mb-8">{groupName}</h2>
> <ul
{cards.map((card) => ( role="list"
<Card as="li" key={card.title}> className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mb-16"
<h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400"> >
<Card.Link href={card.href}>{card.title}</Card.Link> {groupItems.map((card) => (
</h2> <Card as="li" key={card.title}>
<Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl"> <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
{numberFormat(card.metric)} <Card.Link href={card.href}>{card.title}</Card.Link>
</Card.Description> </h2>
</Card> <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
))} {typeof card.metric === "number" ? numberFormat(card.metric) : card.metric}
</ul> </Card.Description>
</Card>
))}
</ul>
</section>
))}
</SimpleLayout> </SimpleLayout>
</> </>
) )
@ -57,7 +58,7 @@ export default function Dashboard({cards}: { cards: CardProps[] }) {
export const getStaticProps: GetStaticProps = async () => { export const getStaticProps: GetStaticProps = async () => {
return { return {
props: { props: {
cards: await dashboard() cardGroups: await getDashboardData()
} }
} }
} }

16
types/index.ts
View File

@ -22,4 +22,18 @@ export type Repo = {
name: string name: string
color: string color: string
} }
} }
export type CardProps = {
title: string
metric: number | string
group: string
href: string
}
export type CardGroupProps = [
{
groupName: string,
groupItems: CardProps[]
}
]