mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 19:05:41 +00:00
Added number formatting to projects
This commit is contained in:
parent
f2d61a8a3a
commit
3c2e63e753
@ -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
5
lib/numberFormat.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export function numberFormat(value: number) {
|
||||||
|
return new Intl.NumberFormat('en', {
|
||||||
|
notation: 'compact'
|
||||||
|
}).format(value)
|
||||||
|
}
|
@ -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`}
|
||||||
|
Loading…
Reference in New Issue
Block a user