2023-01-25 22:41:21 +00:00
import { GetStaticProps } from 'next'
2022-12-06 12:54:34 +00:00
import Head from 'next/head'
import { Card } from '@/components/Card'
2023-02-02 21:32:09 +00:00
import { SimpleLayout } from '@/components/layouts/SimpleLayout'
2023-02-11 22:53:08 +00:00
import { SparklesIcon } from '@/components/icons/SparklesIcon'
import { ShareIcon } from '@/components/icons/ShareIcon'
2023-01-24 22:27:59 +00:00
import { getPinnedRepos } from '@/lib/github'
2023-01-26 22:07:11 +00:00
import { numberFormat } from '@/lib/numberFormat'
2023-01-24 22:27:59 +00:00
import type { Repo } from '@/types'
2022-12-06 12:54:34 +00:00
2023-01-24 22:27:59 +00:00
export default function Projects ( { pinnedRepos } : { pinnedRepos : Repo [ ] } ) {
2022-12-06 12:54:34 +00:00
return (
< >
< Head >
< title > Projects - Ryan Freeman < / title >
< meta
name = "description"
content = "Things I've made and projects I've worked on."
/ >
< meta
property = "og:title"
content = "Projects - Ryan Freeman"
/ >
< meta
property = "og:description"
content = "Things I've made and projects I've worked on."
/ >
< / Head >
< SimpleLayout
title = "Things I've made and projects I've worked on."
intro = "Here's a selection of academic and personal projects that I have worked on. Many of them are open-source, so if you see something that piques your interest, check out the code and contribute if you have ideas for how it can be improved."
gradient = "bg-gradient-to-r from-sky-400 to-blue-500"
>
< ul
role = "list"
className = "grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
>
2023-01-24 22:27:59 +00:00
{ pinnedRepos . map ( ( repo ) = > (
< Card as = "li" key = { repo . name } >
2023-01-25 22:41:21 +00:00
< h2 className = "text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100" >
2023-01-24 22:27:59 +00:00
< Card.Link href = { repo . url } > { repo . name } < / Card.Link >
2022-12-06 12:54:34 +00:00
< / h2 >
2023-01-24 22:27:59 +00:00
< Card.Description > { repo . description } < / Card.Description >
2023-01-25 22:41:21 +00:00
< div
2023-02-08 21:38:41 +00:00
className = "z-10 flex space-x-16 sm:space-x-0 sm:justify-between mt-8 items-center w-full group text-sm text-zinc-500 dark:text-zinc-400" >
2023-01-25 22:41:21 +00:00
< p
2023-02-03 23:02:26 +00:00
className = "flex items-center" >
2023-02-08 21:38:41 +00:00
< span > { repo . primaryLanguage . name } < / span >
2023-01-25 22:41:21 +00:00
< span
2023-02-08 21:38:41 +00:00
className = "mr-2 w-4 h-4 rounded-full order-first"
2023-01-25 22:41:21 +00:00
style = { { backgroundColor : repo.primaryLanguage.color } } / >
< / p >
2023-02-08 21:38:41 +00:00
< div className = "flex space-x-6" >
2023-02-03 23:02:26 +00:00
< p className = "flex items-center" >
2023-02-08 21:38:41 +00:00
{ numberFormat ( repo . stargazerCount ) }
2023-02-11 22:53:08 +00:00
< SparklesIcon className = "order-first mr-2 w-5 h-5 fill-zinc-400 dark:fill-zinc-500" / >
2023-01-26 22:21:15 +00:00
< / p >
2023-02-03 23:02:26 +00:00
< p className = "flex items-center" >
2023-02-08 21:38:41 +00:00
{ numberFormat ( repo . forkCount ) }
2023-02-11 22:53:08 +00:00
< ShareIcon
className = "order-first mr-2 w-5 h-5 fill-zinc-400 dark:fill-zinc-500 -rotate-90" / >
2023-01-26 22:21:15 +00:00
< / p >
< / div >
2023-01-25 22:41:21 +00:00
< / div >
2022-12-06 12:54:34 +00:00
< / Card >
) ) }
< / ul >
< / SimpleLayout >
< / >
)
2023-01-24 22:27:59 +00:00
}
export const getStaticProps : GetStaticProps = async ( ) = > {
return {
props : {
2023-01-25 22:41:21 +00:00
pinnedRepos : ( await getPinnedRepos ( ) )
. sort ( ( a , b ) = > b . stargazerCount - a . stargazerCount )
2023-01-24 22:27:59 +00:00
}
}
}
