trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: abbreviate likes in mii list component

Browse source
This commit is contained in:
trafficlunar 2025-04-14 18:41:22 +01:00
parent 6b1cfff9c6
commit 75bd7281e4
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/like-button.tsx
View file

@ -3,6 +3,7 @@
import { useState } from "react"; import { useState } from "react";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { abbreviateNumber } from "@/lib/abbreviation";
interface Props { interface Props {
likes: number; likes: number;
@ -10,12 +11,13 @@ interface Props {
isLiked: boolean; isLiked: boolean;
isLoggedIn?: boolean; isLoggedIn?: boolean;
disabled?: boolean; disabled?: boolean;
abbreviate?: boolean;
big?: boolean; big?: boolean;
} }
export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled, big }: Props) { export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled, abbreviate, big }: Props) {
const [isLikedState, setIsLikedState] = useState(isLiked); const [isLikedState, setIsLikedState] = useState(isLiked);
const [likesState, setLikesState] = useState(likes); const [likesState, setLikesState] = useState(10000);
const onClick = async () => { const onClick = async () => {
if (disabled) return; if (disabled) return;
@ -39,7 +41,7 @@ export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled
return ( return (
<button onClick={onClick} className={`flex items-center gap-2 text-red-400 ${disabled ? "" : "cursor-pointer"} ${big ? "text-3xl" : "text-xl"}`}> <button onClick={onClick} className={`flex items-center gap-2 text-red-400 ${disabled ? "" : "cursor-pointer"} ${big ? "text-3xl" : "text-xl"}`}>
<Icon icon={isLikedState ? "icon-park-solid:like" : "icon-park-outline:like"} /> <Icon icon={isLikedState ? "icon-park-solid:like" : "icon-park-outline:like"} />
<span>{likesState}</span> <span>{abbreviate ? abbreviateNumber(likesState) : likesState}</span>
</button> </button>
); );
} }

2
src/app/components/mii-list/index.tsx
View file

@ -101,7 +101,7 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
</div> </div>
<div className="mt-auto grid grid-cols-2 items-center"> <div className="mt-auto grid grid-cols-2 items-center">
<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} isLoggedIn={isLoggedIn} /> <LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} isLoggedIn={isLoggedIn} abbreviate />
{!userId ? ( {!userId ? (
<Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis"> <Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis">

10
src/lib/abbreviation.ts Normal file
View file

@ -0,0 +1,10 @@
export function abbreviateNumber(number: number): string {
if (number < 1000) return number.toString();
const units = ["", "K", "M", "B", "T"]; // very unlikely to go into thousands, let alone millions, but you never know
const order = Math.floor(Math.log10(number) / 3);
const unit = units[order] || "";
const scaled = number / Math.pow(10, order * 3);
return `${scaled.toFixed(scaled < 10 ? 1 : 0)}${unit}`;
}