Enhance AssetProperties component with animation hover effects and styling improvements

app/src/components/layout/sidebarRight/properties/AssetProperties.tsx

@@ -6,6 +6,7 @@ import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
 import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
 import { useSceneContext } from "../../../../modules/scene/sceneContext";
+import { center } from "@turf/turf";
 
 interface UserData {
   id: number; // Unique identifier for the user data
@@ -21,7 +22,8 @@ const AssetProperties: React.FC = () => {
   const { objectRotation } = useObjectRotation();
   const { assetStore } = useSceneContext();
   const { assets, setCurrentAnimation } = assetStore()
-
+  const [hoveredIndex, setHoveredIndex] = useState<any>(null);
+  const [isPlaying, setIsplaying] = useState(false);
   // Function to handle adding new user data
   const handleAddUserData = () => {
     const newUserData: UserData = {
@@ -106,19 +108,37 @@ const AssetProperties: React.FC = () => {
           + Add
         </div>
       </section>
-      <div style={{ display: "flex", flexDirection: "column" }}>
+      <div style={{ display: "flex", flexDirection: "column", outline: "1px solid var(--border-color)" }}>
+        {selectedFloorItem.uuid && <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>Animations</div>}
         {assets.map((asset) => (
           <div key={asset.modelUuid} className="asset-item">
-            {
+            {asset.modelUuid === selectedFloorItem.uuid &&
-              asset.modelUuid === selectedFloorItem.uuid &&
+              asset.animations &&
-              asset.animations && asset.animations.length > 0
+              asset.animations.length > 0 &&
-              && asset.animations.map((animation, index) => (
+              asset.animations.map((animation, index) => (
-                <div key={index} className="animation-item" style={{ gap: "5px" }} onClick={() => { handleAnimationClick(animation) }}>
+                <div
-                  {animation}
+                  key={index}
+                  style={{ gap: "15px", cursor: "pointer", padding: "5px" }}
+                >
+                  <div
+                    onClick={() => handleAnimationClick(animation)}
+                    onMouseEnter={() => setHoveredIndex(index)}
+                    onMouseLeave={() => setHoveredIndex(null)}
+                    style={{
+                      height: "20px",
+                      width: "100%",
+                      borderRadius: "5px",
+                      background:
+                        hoveredIndex === index
+                          ? "#7b4cd3"
+                          : "transparent",
+                    }}
+                  >
+                    {animation.charAt(0).toUpperCase() +
+                      animation.slice(1).toLowerCase()}
                   </div>
-              ))
+                </div>
-            }
+              ))}
-
           </div>
         ))}
       </div>