mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 19:05:41 +00:00
Added card groups to dashboard
This commit is contained in:
parent
d9d5becd8a
commit
48c32c333e
@ -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}
|
||||
})
|
||||
}
|
@ -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 (
|
||||
<>
|
||||
<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."
|
||||
gradient="bg-gradient-to-r from-orange-300 to-rose-300"
|
||||
>
|
||||
{cardGroups.map(({groupName, groupItems}, index) => (
|
||||
<section key={index}>
|
||||
<h2 className="text-sm font-semibold text-zinc-800 dark:text-zinc-100 mb-8">{groupName}</h2>
|
||||
<ul
|
||||
role="list"
|
||||
className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
|
||||
className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mb-16"
|
||||
>
|
||||
{cards.map((card) => (
|
||||
{groupItems.map((card) => (
|
||||
<Card as="li" key={card.title}>
|
||||
<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>
|
||||
</h2>
|
||||
<Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
|
||||
{numberFormat(card.metric)}
|
||||
{typeof card.metric === "number" ? numberFormat(card.metric) : card.metric}
|
||||
</Card.Description>
|
||||
</Card>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
))}
|
||||
</SimpleLayout>
|
||||
</>
|
||||
)
|
||||
@ -57,7 +58,7 @@ export default function Dashboard({cards}: { cards: CardProps[] }) {
|
||||
export const getStaticProps: GetStaticProps = async () => {
|
||||
return {
|
||||
props: {
|
||||
cards: await dashboard()
|
||||
cardGroups: await getDashboardData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -23,3 +23,17 @@ export type Repo = {
|
||||
color: string
|
||||
}
|
||||
}
|
||||
|
||||
export type CardProps = {
|
||||
title: string
|
||||
metric: number | string
|
||||
group: string
|
||||
href: string
|
||||
}
|
||||
|
||||
export type CardGroupProps = [
|
||||
{
|
||||
groupName: string,
|
||||
groupItems: CardProps[]
|
||||
}
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user