Displaying the game library with server side pagination

src/components/SteamGameCount.jsx

@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from 'react';
+import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 
 const SteamGameCount = ({targetCount}) => {
@@ -7,13 +8,13 @@ const SteamGameCount = ({targetCount}) => {
 
     useEffect(() => {
         let startTime;
-        const duration = 1000; // 1 second
+        const duration = 1000;
         const startCount = 0;
 
         const animate = (timestamp) => {
             if (!startTime) startTime = timestamp;
             const progress = Math.min((timestamp - startTime) / duration, 1);
-            
+
             const currentCount = Math.floor(progress * (targetCount - startCount) + startCount);
             setCount(currentCount);
 
@@ -26,14 +27,17 @@ const SteamGameCount = ({targetCount}) => {
     }, [targetCount]);
 
     return (
-        <div className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
+        <Link
+            to="/library"
+            className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
+        >
             <div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
                 {count}
             </div>
             <div className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                 {t('DASHBOARD.STEAM_GAMES')}
             </div>
-        </div>
+        </Link>
     );
 };