fix: update dependencies and improve animation transitions

- Updated @types/react to version 19.2.7 in package.json and package-lock.json.
- Refined animation transitions in EnhancedButton, EnhancedInput, LoadingStates, Navbar, PageTransition, SkinCard, SkinDetailModal, and SkinViewer components by removing unnecessary ease properties for smoother animations.
- Added size prop to EnhancedInput for better customization.
- Enhanced SkinDetailModal and SkinCard styles for improved UI consistency.

src/components/SkinCard.tsx

@@ -78,8 +78,7 @@ export default function SkinCard({
       transition: {
         duration: 0.6,
         delay: index * 0.1,
-        ease: [0.25, 0.46, 0.45, 0.94],
-        type: "spring",
+        type: "spring" as const,
         stiffness: 100,
         damping: 15
       }
@@ -90,7 +89,6 @@ export default function SkinCard({
       rotateX: 5,
       transition: {
         duration: 0.3,
-        ease: "easeOut"
       }
     }
   });
@@ -103,7 +101,7 @@ export default function SkinCard({
       transition: {
         duration: 0.2,
         delay: 0.1,
-        type: "spring",
+        type: "spring" as const ,
         stiffness: 300,
         damping: 20
       }
@@ -122,7 +120,7 @@ export default function SkinCard({
       transition: {
         duration: 0.3,
         delay: 0.2 + index * 0.05,
-        type: "spring",
+        type: "spring" as const,
         stiffness: 200,
         damping: 15
       }
@@ -163,8 +161,8 @@ export default function SkinCard({
                   scale: [1, 1.1, 1]
                 }}
                 transition={{ 
-                  rotate: { duration: 2, repeat: Infinity, ease: "linear" },
-                  scale: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+                  rotate: { duration: 2, repeat: Infinity },
+                  scale: { duration: 1.5, repeat: Infinity }
                 }}
                 className="w-12 h-12 border-4 border-orange-300 dark:border-orange-600 border-t-transparent rounded-full"
               />
@@ -183,23 +181,21 @@ export default function SkinCard({
             } ${isHovered ? 'scale-110' : ''}`}
             autoRotate={isHovered}
             walking={false}
-            onLoad={() => setImageLoaded(true)}
+            onImageLoaded={() => setImageLoaded(true)}
           />
         ) : (
           <div className="absolute inset-0 flex items-center justify-center">
             <motion.div 
               className="text-center"
               animate={isHovered ? { y: [-5, 5, -5] } : {}}
-              transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
             >
               <motion.div 
                 className="w-24 h-24 mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg flex items-center justify-center"
                 whileHover={{ scale: 1.1, rotate: 10 }}
-                transition={{ type: 'spring', stiffness: 300 }}
+                transition={{ type: 'spring' as const, stiffness: 300 }}  
                 animate={imageLoaded ? {} : { scale: [0.8, 1, 0.8] }}
-                transition={imageLoaded ? {} : { duration: 1.5, repeat: Infinity }}
               >
-                <span className="text-2xl">🧥</span>
+                <span className="text-2xl">🧥</span>  
               </motion.div>
               <p className="text-sm text-gray-600 dark:text-gray-300 font-medium">披风</p>
             </motion.div>
@@ -232,7 +228,7 @@ export default function SkinCard({
                 </motion.div>
               </motion.button>
               
-              {onDownload !== false && (
+              {onDownload && (
                 <motion.button
                   variants={getActionButtonVariants()}
                   initial="initial"
@@ -250,7 +246,7 @@ export default function SkinCard({
                   {isDownloading ? (
                     <motion.div
                       animate={{ rotate: 360 }}
-                      transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                      transition={{ duration: 1, repeat: Infinity }}
                     >
                       <ArrowDownTrayIcon className="w-5 h-5" />
                     </motion.div>
@@ -288,7 +284,7 @@ export default function SkinCard({
                     <motion.div
                       initial={{ scale: 0 }}
                       animate={{ scale: 1 }}
-                      transition={{ type: "spring", stiffness: 300 }}
+                      transition={{ type: "spring" as const , stiffness: 300 }}
                     >
                       <HeartIconSolid className="w-5 h-5" />
                     </motion.div>
@@ -408,13 +404,13 @@ export default function SkinCard({
             </motion.span>
           </div>
           <div className="text-xs text-gray-400">
-            {texture.uploader && (
+            {texture.uploader_id && (
               <motion.span
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: index * 0.1 + 0.6 }}
               >
-                by {texture.uploader.username}
+                by User #{texture.uploader_id}
               </motion.span>
             )}
           </div>