Refactor: Unified Top 50 Badge logic and shared component integration

components/Top50Badge.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface Top50BadgeProps {
+    rank: number;
+    label: string;
+    theme?: 'amber' | 'blue' | 'indigo';
+}
+
+export const Top50Badge: React.FC<Top50BadgeProps> = ({ rank, label, theme = 'amber' }) => {
+    const themeClasses = {
+        amber: 'from-amber-500 to-orange-500 border-amber-400/50',
+        blue: 'from-blue-500 to-cyan-500 border-blue-400/50',
+        indigo: 'from-indigo-500 to-purple-500 border-indigo-400/50',
+    };
+
+    return (
+        <span
+            className={`inline-flex items-center justify-center px-1.5 py-0.5 rounded text-[9px] font-black bg-gradient-to-r ${themeClasses[theme]} text-white shadow-sm border whitespace-nowrap`}
+            title={`Top ${rank} Best Seller 2025 (${label})`}
+        >
+            <span className="mr-0.5">🏆</span>
+            <span className="mr-0.5 opacity-90">{label}</span>
+            {rank}
+        </span>
+    );
+};