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 { GitHubIcon } from '@/components/SocialIcons'
import { SocialLink } from '@/components/SocialLink'
2023-01-24 22:27:59 +00:00
import { GetStaticProps } from 'next'
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 } >
2022-12-06 12:54:34 +00:00
< h2 className = "text-base font-semibold 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 >
< p
className = "relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-indigo-500 dark:text-zinc-200" >
2023-01-21 22:59:27 +00:00
< SocialLink
2023-01-24 22:27:59 +00:00
href = { repo . url }
ariaLabel = { ` Checkout ${ repo . name } on GitHub ` }
2023-01-21 22:59:27 +00:00
icon = { GitHubIcon }
/ >
2023-01-24 22:27:59 +00:00
< span className = "ml-2" > { ` r-freeman/ ${ repo . name } ` } < / span >
2022-12-06 12:54:34 +00:00
< / p >
< / Card >
) ) }
< / ul >
< / SimpleLayout >
< / >
)
2023-01-24 22:27:59 +00:00
}
export const getStaticProps : GetStaticProps = async ( ) = > {
const pinnedRepos = await getPinnedRepos ( )
return {
props : {
pinnedRepos
}
}
}
