mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Updated project styling
This commit is contained in:
parent
0dcf899129
commit
c5e332f915
@ -1,15 +1,17 @@
|
||||
import Link from 'next/link'
|
||||
import {ElementType} from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
type SocialLink = {
|
||||
href: string
|
||||
ariaLabel: string
|
||||
icon: ElementType
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function SocialLink({icon: Icon, href, ariaLabel}: SocialLink) {
|
||||
export function SocialLink({icon: Icon, href, ariaLabel, className}: SocialLink) {
|
||||
return (
|
||||
<Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}>
|
||||
<Link className={clsx(className, "group -m-1 p-1")} href={href} aria-label={ariaLabel}>
|
||||
<Icon
|
||||
className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
|
||||
</Link>
|
||||
|
10
components/StarIcon.tsx
Normal file
10
components/StarIcon.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import {Props} from '@/types'
|
||||
|
||||
export function StarIcon(props: Props) {
|
||||
return (
|
||||
<svg viewBox="0 0 16 16" aria-label="stars" data-view-component="true" {...props}>
|
||||
<path fillRule="evenodd"
|
||||
d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694v.001z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
import {GetStaticProps} from 'next'
|
||||
import Head from 'next/head'
|
||||
import {Card} from '@/components/Card'
|
||||
import {SimpleLayout} from '@/components/SimpleLayout'
|
||||
import {GitHubIcon} from '@/components/SocialIcons'
|
||||
import {SocialLink} from '@/components/SocialLink'
|
||||
import {GetStaticProps} from 'next'
|
||||
import {StarIcon} from '@/components/StarIcon'
|
||||
import {getPinnedRepos} from '@/lib/github'
|
||||
import type {Repo} from '@/types'
|
||||
|
||||
@ -36,19 +36,29 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
|
||||
>
|
||||
{pinnedRepos.map((repo) => (
|
||||
<Card as="li" key={repo.name}>
|
||||
<h2 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
|
||||
<h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100">
|
||||
<Card.Link href={repo.url}>{repo.name}</Card.Link>
|
||||
</h2>
|
||||
<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">
|
||||
<SocialLink
|
||||
href={repo.url}
|
||||
ariaLabel={`Checkout ${repo.name} on GitHub`}
|
||||
icon={GitHubIcon}
|
||||
/>
|
||||
<span className="ml-2">{`r-freeman/${repo.name}`}</span>
|
||||
</p>
|
||||
<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>
|
||||
</Card>
|
||||
))}
|
||||
</ul>
|
||||
@ -58,11 +68,10 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async () => {
|
||||
const pinnedRepos = await getPinnedRepos()
|
||||
|
||||
return {
|
||||
props: {
|
||||
pinnedRepos
|
||||
pinnedRepos: (await getPinnedRepos())
|
||||
.sort((a, b) => b.stargazerCount - a.stargazerCount)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user