xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: format number

This commit is contained in:
DIYgod 2023-08-07 20:41:33 +01:00
parent 6f065215e7
commit 6d5b50ef14
No known key found for this signature in database
3 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/FollowingCount.tsx
View File

@ -38,7 +38,7 @@ export const FollowingCount = ({
}
onClick={() => setIsFollowListOpen(true)}
>
<span className="font-medium text-zinc-700 pr-[2px]">
<span className="font-medium text-zinc-700 pr-[3px]">
{subscriptions.data?.pages?.[0]?.count || 0}
</span>{" "}
{t("Followers")}
@ -46,7 +46,7 @@ export const FollowingCount = ({
<Button
variant="text"
className={
"xlog-site-followings align-middle text-zinc-500 sm:ml-3" +
"xlog-site-followings align-middle text-zinc-500 sm:ml-3 !hidden sm:!inline-flex" +
(disableList ? "" : " cursor-pointer")
}
onClick={() => setIsToFollowListOpen(true)}

14
src/components/common/FormattedNumber.tsx Normal file
View File

@ -0,0 +1,14 @@
import { useEffect, useState } from "react"
export const FormattedNumber = ({ value }: { value: number }) => {
const [formatted, setFormatted] = useState<string>("")
useEffect(() => {
setFormatted(
new Intl.NumberFormat(navigator.language, { notation: "compact" }).format(
value,
),
)
}, [value])
return <span>{formatted || value}</span>
}

21
src/components/common/PostCard.tsx
View File

@ -7,6 +7,7 @@ import { memo } from "react"
import reactStringReplace from "react-string-replace"
import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
import { FormattedNumber } from "~/components/common/FormattedNumber"
import { Titles } from "~/components/common/Titles"
import PostCover from "~/components/home/PostCover"
import { PlatformsSyncMap } from "~/components/site/Platform"
@ -133,31 +134,37 @@ const Card = ({
{!!post.stat?.portfolio?.videoViewsCount && (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--youtube-line] mr-[2px] text-base" />
<span>{post.stat.portfolio.videoViewsCount}</span>
<FormattedNumber
value={post.stat.portfolio.videoViewsCount}
/>
</span>
)}
{!!post.stat?.portfolio?.audoListensCount && (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--headphone-line] mr-[2px] text-base" />
<span>{post.stat.portfolio.audoListensCount}</span>
<FormattedNumber
value={post.stat.portfolio.audoListensCount}
/>
</span>
)}
{!!post.stat?.portfolio?.projectStarsCount && (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--star-line] mr-[2px] text-base" />
<span>{post.stat.portfolio.projectStarsCount}</span>
<FormattedNumber
value={post.stat.portfolio.projectStarsCount}
/>
</span>
)}
{!!post.stat?.portfolio?.textViewsCount && (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--eye-line] mr-[2px] text-base" />
<span>{post.stat.portfolio.textViewsCount}</span>
<FormattedNumber value={post.stat.portfolio.textViewsCount} />
</span>
)}
{!!post.stat?.portfolio?.commentsCount && (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--comment-line] mr-[2px] text-base" />
<span>{post.stat.portfolio.commentsCount}</span>
<FormattedNumber value={post.stat.portfolio.commentsCount} />
</span>
)}
</>
@ -178,13 +185,13 @@ const Card = ({
{!!post.stat?.viewDetailCount && (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--eye-line] mr-[2px] text-base" />
<span>{post.stat?.viewDetailCount}</span>
<FormattedNumber value={post.stat?.viewDetailCount} />
</span>
)}
{post.stat?.commentsCount ? (
<span className="xlog-post-views inline-flex items-center">
<i className="icon-[mingcute--comment-line] mr-[2px] text-base" />
<span>{post.stat.commentsCount}</span>
<FormattedNumber value={post.stat.commentsCount} />
</span>
) : (
<span className="xlog-post-word-count sm:inline-flex items-center hidden">