fix: removed magnification from dock

Author: andrinoff

src/components/Dock.tsx

@@ -4,16 +4,12 @@ import {
   motion,
   MotionValue,
   useMotionValue,
-  useSpring,
-  useTransform,
-  type SpringOptions,
   AnimatePresence,
 } from "motion/react";
 import React, {
   Children,
   cloneElement,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -28,59 +24,32 @@ export type DockItemData = {
 export type DockProps = {
   items: DockItemData[];
   className?: string;
-  distance?: number;
   panelHeight?: number;
   baseItemSize?: number;
-  dockHeight?: number;
-  magnification?: number;
-  spring?: SpringOptions;
 };
 
 type DockItemProps = {
   className?: string;
   children: React.ReactNode;
   onClick?: () => void;
-  mouseX: MotionValue;
-  spring: SpringOptions;
-  distance: number;
   baseItemSize: number;
-  magnification: number;
 };
 
 function DockItem({
   children,
   className = "",
   onClick,
-  mouseX,
-  spring,
-  distance,
-  magnification,
   baseItemSize,
 }: DockItemProps) {
   const ref = useRef<HTMLDivElement>(null);
   const isHovered = useMotionValue(0);
 
-  const mouseDistance = useTransform(mouseX, (val) => {
-    const rect = ref.current?.getBoundingClientRect() ?? {
-      x: 0,
-      width: baseItemSize,
-    };
-    return val - rect.x - baseItemSize / 2;
-  });
-
-  const targetSize = useTransform(
-    mouseDistance,
-    [-distance, 0, distance],
-    [baseItemSize, magnification, baseItemSize]
-  );
-  const size = useSpring(targetSize, spring);
-
   return (
     <motion.div
       ref={ref}
       style={{
-        width: size,
-        height: size,
+        width: baseItemSize,
+        height: baseItemSize,
       }}
       onHoverStart={() => isHovered.set(1)}
       onHoverEnd={() => isHovered.set(0)}
@@ -153,37 +122,15 @@ function DockIcon({ children, className = "" }: DockIconProps) {
 export default function Dock({
   items,
   className = "",
-  spring = { mass: 0.1, stiffness: 150, damping: 12 },
-  magnification = 70,
-  distance = 200,
   panelHeight = 64,
-  dockHeight = 256,
   baseItemSize = 50,
 }: DockProps) {
-  const mouseX = useMotionValue(Infinity);
-  const isHovered = useMotionValue(0);
-
-  const maxHeight = useMemo(
-    () => Math.max(dockHeight, magnification + magnification / 2 + 4),
-    [magnification, dockHeight]
-  );
-  const heightRow = useTransform(isHovered, [0, 1], [panelHeight, maxHeight]);
-  const height = useSpring(heightRow, spring);
-
   return (
     <motion.div
-      style={{ height, scrollbarWidth: "none" }}
+      style={{ height: panelHeight, scrollbarWidth: "none" }}
       className="mx-2 flex max-w-full items-center dock-container"
     >
       <motion.div
-        onMouseMove={({ pageX }) => {
-          isHovered.set(1);
-          mouseX.set(pageX);
-        }}
-        onMouseLeave={() => {
-          isHovered.set(0);
-          mouseX.set(Infinity);
-        }}
         className={`${className} absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl bg-black/30 backdrop-blur-md border border-gray-700/50 pb-2 px-4 shadow-2xl`}
         style={{ height: panelHeight }}
         role="toolbar"
@@ -194,10 +141,6 @@ export default function Dock({
             key={index}
             onClick={item.onClick}
             className={item.className}
-            mouseX={mouseX}
-            spring={spring}
-            distance={distance}
-            magnification={magnification}
             baseItemSize={baseItemSize}
           >
             <DockIcon>{item.icon}</DockIcon>

src/components/DockElement.tsx

@@ -22,7 +22,5 @@ const items = [
 ];
 
 export default function DockElement() {
-  return (
-    <Dock items={items} panelHeight={68} baseItemSize={50} magnification={70} />
-  );
+  return <Dock items={items} panelHeight={68} baseItemSize={50} />;
 }