Merge pull request #23 from lassiecoder/staging

Staging

Author: lassiecoder

src/components/ui/floating-dock.tsx

@@ -12,15 +12,15 @@ import {
   motion,
   useMotionValue,
   useSpring,
-  useTransform
+  useTransform,
 } from "framer-motion";
 import Link from "next/link";
 import { useRef, useState } from "react";
 
 export const FloatingDock = ({
   items,
   desktopClassName,
-  mobileClassName
+  mobileClassName,
 }: {
   items: { title: string; icon: React.ReactNode; href: string }[];
   desktopClassName?: string;
@@ -36,7 +36,7 @@ export const FloatingDock = ({
 
 const FloatingDockMobile = ({
   items,
-  className
+  className,
 }: {
   items: { title: string; icon: React.ReactNode; href: string }[];
   className?: string;
@@ -50,7 +50,7 @@ const FloatingDockMobile = ({
             layoutId="nav"
             {...{
               className:
-                "absolute bottom-full mb-2 inset-x-0 flex flex-col gap-2"
+                "absolute bottom-full mb-2 inset-x-0 flex flex-col gap-2",
             }}
           >
             {items.map((item, idx) => (
@@ -59,14 +59,14 @@ const FloatingDockMobile = ({
                 initial={{ opacity: 0, y: 10 }}
                 animate={{
                   opacity: 1,
-                  y: 0
+                  y: 0,
                 }}
                 exit={{
                   opacity: 0,
                   y: 10,
                   transition: {
-                    delay: idx * 0.05
-                  }
+                    delay: idx * 0.05,
+                  },
                 }}
                 transition={{ delay: (items.length - 1 - idx) * 0.05 }}
               >
@@ -94,24 +94,20 @@ const FloatingDockMobile = ({
 
 const FloatingDockDesktop = ({
   items,
-  className
+  className,
 }: {
   items: { title: string; icon: React.ReactNode; href: string }[];
   className?: string;
 }) => {
   let mouseX = useMotionValue(Infinity);
   return (
     <motion.div
-      // onMouseMove={(e) => mouseX.set(e.pageX)}
-      // onMouseLeave={() => mouseX.set(Infinity)}
-      {...{
-        onMouseMove: (e: MouseEvent) => mouseX.set(e.pageX),
-        onMouseLeave: (e: MouseEvent) => mouseX.set(Infinity),
-        className: cn(
-          "mx-auto hidden md:flex h-16 gap-4 items-end rounded-2xl bg-gray-50 dark:bg-neutral-900 px-4 pb-3",
-          className
-        )
-      }}
+      onMouseMove={(e) => mouseX.set(e.pageX)}
+      onMouseLeave={() => mouseX.set(Infinity)}
+      className={cn(
+        "mx-auto hidden md:flex h-16 gap-4 items-end rounded-2xl bg-gray-50 dark:bg-neutral-900 px-4 pb-3",
+        className
+      )}
     >
       {items.map((item) => (
         <IconContainer mouseX={mouseX} key={item.title} {...item} />
@@ -124,7 +120,7 @@ function IconContainer({
   mouseX,
   title,
   icon,
-  href
+  href,
 }: {
   mouseX: MotionValue;
   title: string;
@@ -152,23 +148,23 @@ function IconContainer({
   let width = useSpring(widthTransform, {
     mass: 0.1,
     stiffness: 150,
-    damping: 12
+    damping: 12,
   });
   let height = useSpring(heightTransform, {
     mass: 0.1,
     stiffness: 150,
-    damping: 12
+    damping: 12,
   });
 
   let widthIcon = useSpring(widthTransformIcon, {
     mass: 0.1,
     stiffness: 150,
-    damping: 12
+    damping: 12,
   });
   let heightIcon = useSpring(heightTransformIcon, {
     mass: 0.1,
     stiffness: 150,
-    damping: 12
+    damping: 12,
   });
 
   const [hovered, setHovered] = useState(false);
@@ -182,7 +178,7 @@ function IconContainer({
           onMouseEnter: () => setHovered(true),
           onMouseLeave: () => setHovered(false),
           className:
-            "aspect-square rounded-full bg-gray-200 dark:bg-neutral-800 flex items-center justify-center relative"
+            "aspect-square rounded-full bg-gray-200 dark:bg-neutral-800 flex items-center justify-center relative",
         }}
       >
         <AnimatePresence>