diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 28fa6571..168e5b5f 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -6,7 +6,7 @@ "home": { "featured": "Destaques", "trending": "Populares", - "hot": "🔥 Populares agora", + "hot": "Populares agora", "weekly": "📅 Mais baixados da semana", "surprise_me": "Surpreenda-me", "no_results": "Nenhum resultado encontrado", diff --git a/src/renderer/src/components/sidebar/download-icon.tsx b/src/renderer/src/components/sidebar/download-icon.tsx index 474c631d..54290745 100644 --- a/src/renderer/src/components/sidebar/download-icon.tsx +++ b/src/renderer/src/components/sidebar/download-icon.tsx @@ -1,4 +1,3 @@ -import { useRef } from "react"; import Lottie from "lottie-react"; import downloadingAnimation from "@renderer/assets/lottie/downloading.json"; @@ -8,11 +7,8 @@ export interface DownloadIconProps { } export function DownloadIcon({ isDownloading }: DownloadIconProps) { - const lottieRef = useRef(null); - return ( (null); + const [isLoading, setIsLoading] = useState(false); const [randomGame, setRandomGame] = useState(null); @@ -82,6 +85,18 @@ export function Home() { const categories = Object.values(CatalogueCategory); + const handleMouseEnterCategory = (category: CatalogueCategory) => { + if (category === CatalogueCategory.Hot) { + flameAnimationRef?.current?.play(); + } + }; + + const handleMouseLeaveCategory = (category: CatalogueCategory) => { + if (category === CatalogueCategory.Hot) { + flameAnimationRef?.current?.stop(); + } + }; + return (
@@ -100,7 +115,28 @@ export function Home() { : "outline" } onClick={() => handleCategoryClick(category)} + onMouseEnter={() => handleMouseEnterCategory(category)} + onMouseLeave={() => handleMouseLeaveCategory(category)} > + {category === CatalogueCategory.Hot && ( +
+ +
+ )} + {t(category)} @@ -123,7 +159,25 @@ export function Home() {
-

{t(currentCatalogueCategory)}

+

+ {currentCatalogueCategory === CatalogueCategory.Hot && ( +
+ +
+ )} + + {t(currentCatalogueCategory)} +

{isLoading diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts index 27c2a7fe..6e9c4679 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts +++ b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts @@ -155,6 +155,7 @@ export const listItemImage = style({ width: "32px", height: "32px", borderRadius: "4px", + objectFit: "cover", }); export const listItemDetails = style({