Upload src/components/ui/Hotbar.tsx with huggingface_hub

src/components/ui/Hotbar.tsx

@@ -10,7 +10,7 @@ export function Hotbar() {
   const items = player?.inventory.hotbar || Array(9).fill(null)
 
   return (
-    <div className="flex gap-0.5 p-0.5 bg-black/70 rounded-lg backdrop-blur-sm">
+    <div className="flex gap-0.5 p-0.5 bg-black/60 rounded backdrop-blur-sm border border-gray-700/30">
       {items.map((item, i) => {
         const def = item ? BLOCK_DEFS[item.id] : null
         const isSelected = i === hotbarSlot
@@ -19,11 +19,11 @@ export function Hotbar() {
           <div
             key={i}
             className={`
-              w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded cursor-pointer
+              w-8 h-8 sm:w-11 sm:h-11 flex items-center justify-center cursor-pointer
               transition-all duration-75 relative
               ${isSelected
-                ? 'bg-white/25 border-2 border-white/80'
-                : 'bg-gray-800/50 border border-gray-600/40 hover:bg-gray-700/50'
+                ? 'bg-white/20 border-2 border-white/80 scale-105'
+                : 'bg-gray-900/50 border border-gray-700/40 hover:bg-gray-700/40'
               }
             `}
             onClick={() => setHotbarSlot(i)}
@@ -31,18 +31,18 @@ export function Hotbar() {
             {def && (
               <>
                 <div
-                  className="w-5 h-5 sm:w-7 sm:h-7 rounded-sm border border-black/20"
-                  style={{ backgroundColor: def.color }}
+                  className="w-5 h-5 sm:w-7 sm:h-7 rounded-sm shadow-md"
+                  style={{ backgroundColor: def.color, border: '1px solid rgba(0,0,0,0.2)' }}
                 />
                 {item!.count > 1 && (
                   <span className="absolute bottom-0 right-0.5 text-[8px] sm:text-[10px] text-white font-bold"
-                    style={{ textShadow: '1px 1px 1px rgba(0,0,0,0.9)' }}>
+                    style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.9)' }}>
                     {item!.count}
                   </span>
                 )}
               </>
             )}
-            <span className="absolute -bottom-3.5 text-[7px] sm:text-[9px] text-gray-500">
+            <span className="absolute -bottom-4 text-[7px] sm:text-[9px] text-gray-500 font-mono">
               {i + 1}
             </span>
           </div>