external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update game-card.tsx

Browse source
This commit is contained in:
Shisuys 2025-01-11 11:56:17 -03:00
parent 79be151de0
commit 3fe77f4961
1 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/renderer/src/components/game-card/game-card.tsx
View file

@ -6,10 +6,9 @@ import SteamLogo from "@renderer/assets/steam-logo.svg?react";
import * as styles from "./game-card.css"; import * as styles from "./game-card.css";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Badge } from "../badge/badge"; import { Badge } from "../badge/badge";
import { useCallback, useState } from "react"; import { useCallback, useState, useMemo } from "react";
import { useFormat, useRepacks } from "@renderer/hooks"; import { useFormat, useRepacks } from "@renderer/hooks";
import { steamUrlBuilder } from "@shared"; import { steamUrlBuilder } from "@shared";
import { useMemo } from "react";
export interface GameCardProps export interface GameCardProps
extends React.DetailedHTMLProps< extends React.DetailedHTMLProps<
@ -45,8 +44,14 @@ export function GameCard({ game, ...props }: GameCardProps) {
const { numberFormatter } = useFormat(); const { numberFormatter } = useFormat();
const firstThreeRepackers = useMemo(() => uniqueRepackers.slice(0, 3), [uniqueRepackers]); const firstThreeRepackers = useMemo(
const remainingCount = useMemo(() => uniqueRepackers.length - 3, [uniqueRepackers]); () => uniqueRepackers.slice(0, 3),
[uniqueRepackers]
);
const remainingCount = useMemo(
() => uniqueRepackers.length - 3,
[uniqueRepackers]
);
return ( return (
<button <button
@ -76,7 +81,9 @@ export function GameCard({ game, ...props }: GameCardProps) {
<Badge key={repacker}>{repacker}</Badge> <Badge key={repacker}>{repacker}</Badge>
))} ))}
{remainingCount > 0 && ( {remainingCount > 0 && (
<Badge>+{remainingCount} {t("available")}</Badge> <Badge>
+{remainingCount} {t("available")}
</Badge>
)} )}
</> </>
) : ( ) : (