Added number formatting to projects

This commit is contained in:
r-freeman 2023-01-26 22:07:11 +00:00
parent f2d61a8a3a
commit 3c2e63e753
3 changed files with 9 additions and 8 deletions

View File

@ -1,17 +1,12 @@
import useSWR from 'swr'
import {ElementType, useEffect} from 'react' import {ElementType, useEffect} from 'react'
import fetcher from '@/lib/fetcher' import fetcher from '@/lib/fetcher'
import useSWR from 'swr' import {numberFormat} from '@/lib/numberFormat'
type ViewsType = { type ViewsType = {
views: string views: string
} }
function numberFormat(value: number) {
return new Intl.NumberFormat('en', {
notation: 'compact'
}).format(value)
}
const updateViews = (slug: string) => fetcher(`/api/views/${slug}`, {method: 'POST'}) const updateViews = (slug: string) => fetcher(`/api/views/${slug}`, {method: 'POST'})
export function Views({as: Component = 'span', slug}: { as?: ElementType, slug: string }) { export function Views({as: Component = 'span', slug}: { as?: ElementType, slug: string }) {

5
lib/numberFormat.ts Normal file
View File

@ -0,0 +1,5 @@
export function numberFormat(value: number) {
return new Intl.NumberFormat('en', {
notation: 'compact'
}).format(value)
}

View File

@ -5,6 +5,7 @@ import {SimpleLayout} from '@/components/SimpleLayout'
import {SocialLink} from '@/components/SocialLink' import {SocialLink} from '@/components/SocialLink'
import {StarIcon} from '@/components/StarIcon' import {StarIcon} from '@/components/StarIcon'
import {getPinnedRepos} from '@/lib/github' import {getPinnedRepos} from '@/lib/github'
import {numberFormat} from '@/lib/numberFormat'
import type {Repo} from '@/types' import type {Repo} from '@/types'
export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) { export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
@ -50,7 +51,7 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
style={{backgroundColor: repo.primaryLanguage.color}}/> style={{backgroundColor: repo.primaryLanguage.color}}/>
</p> </p>
<p className="relative z-10 flex items-center"> <p className="relative z-10 flex items-center">
<span className="ml-2 order-last">{repo.stargazerCount}</span> <span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span>
<SocialLink <SocialLink
href={repo.url} href={repo.url}
ariaLabel={`Star ${repo.name} on GitHub`} ariaLabel={`Star ${repo.name} on GitHub`}