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'
import { SimpleLayout } from '@/components/SimpleLayout'
2023-01-21 22:59:27 +00:00
import { SocialLink } from '@/components/SocialLink'
2023-01-25 22:41:21 +00:00
import { StarIcon } from '@/components/StarIcon'
2023-01-24 22:27:59 +00:00
import { getPinnedRepos } from '@/lib/github'
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
className = "flex space-x-8 md:justify-between mt-6 items-center w-full group text-sm text-zinc-500 dark:text-zinc-400" >
< p
className = "relative z-10 flex items-center" >
< span className = "ml-2" > { repo . primaryLanguage . name } < / span >
< span
className = "w-4 h-4 rounded-full order-first"
style = { { backgroundColor : repo.primaryLanguage.color } } / >
< / p >
< p className = "relative z-10 flex items-center" >
< span className = "ml-2" > { repo . stargazerCount } < / span >
< SocialLink
href = { repo . url }
ariaLabel = { ` Star ${ repo . name } on GitHub ` }
icon = { StarIcon }
className = { 'order-first m-0 p-0' }
/ >
< / p >
< / 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
}
}
}
