portfolio/pages/dashboard.tsx

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'

type CardProps = {
    title: string
    metric: number
    href: string
}

export default function Dashboard({cards}: { cards: CardProps[] }) {
    return (
        <>
            <Head>
                <title>Dashboard - Ryan Freeman</title>
                <meta
                    name="description"
                    content="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."
                />
                <meta
                    property="og:title"
                    content="Dashboard - Ryan Freeman"
                />
                <meta
                    property="og:description"
                    content="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."
                />
            </Head>
            <SimpleLayout
                title="Dashboard."
                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"
            >
                <ul
                    role="list"
                    className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
                >
                    {cards.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)}
                            </Card.Description>
                        </Card>
                    ))}
                </ul>
            </SimpleLayout>
        </>
    )
}

export const getStaticProps: GetStaticProps = async () => {
    return {
        props: {
            cards: await dashboard()
        }
    }
}
Added dashboard page 2023-01-27 23:33:49 +00:00			`import Head from 'next/head'`
Added total article views to dashboard 2023-01-28 15:29:17 +00:00			`import {GetStaticProps} from 'next'`
Added dashboard page 2023-01-27 23:33:49 +00:00			`import {SimpleLayout} from '@/components/SimpleLayout'`
			`import {Card} from '@/components/Card'`
			`import {numberFormat} from '@/lib/numberFormat'`
Refactored dashboard page 2023-01-28 21:24:05 +00:00			`import {dashboard} from '@/lib/dashboard'`
Added dashboard page 2023-01-27 23:33:49 +00:00
Refactored dashboard page 2023-01-28 21:24:05 +00:00			`type CardProps = {`
			`title: string`
Updated dashboard 2023-01-29 11:24:06 +00:00			`metric: number`
Refactored dashboard page 2023-01-28 21:24:05 +00:00			`href: string`
Added total github stars to dashboard 2023-01-28 15:01:32 +00:00			`}`

Refactored dashboard page 2023-01-28 21:24:05 +00:00			`export default function Dashboard({cards}: { cards: CardProps[] }) {`
Added dashboard page 2023-01-27 23:33:49 +00:00			`return (`
			`<>`
			`<Head>`
			`<title>Dashboard - Ryan Freeman</title>`
			`<meta`
			`name="description"`
			`content="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."`
			`/>`
			`<meta`
			`property="og:title"`
			`content="Dashboard - Ryan Freeman"`
			`/>`
			`<meta`
			`property="og:description"`
			`content="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."`
			`/>`
			`</Head>`
			`<SimpleLayout`
			`title="Dashboard."`
			`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"`
			`>`
			`<ul`
			`role="list"`
			`className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"`
			`>`
Refactored dashboard page 2023-01-28 21:24:05 +00:00			`{cards.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">`
Updated dashboard 2023-01-29 11:24:06 +00:00			`{numberFormat(card.metric)}`
Refactored dashboard page 2023-01-28 21:24:05 +00:00			`</Card.Description>`
			`</Card>`
			`))}`
Added dashboard page 2023-01-27 23:33:49 +00:00			`</ul>`
			`</SimpleLayout>`
			`</>`
			`)`
			`}`

			`export const getStaticProps: GetStaticProps = async () => {`
			`return {`
			`props: {`
Updated dashboard 2023-01-29 11:24:06 +00:00			`cards: await dashboard()`
Added dashboard page 2023-01-27 23:33:49 +00:00			`}`
			`}`
			`}`