[feat]: macbook-dock-navigation

.gitignore

@@ -4,3 +4,4 @@ node_modules
 package-lock.json
 pnpm-lock.yaml
 
+.vercel

next.config.ts

@@ -17,6 +17,14 @@ const nextConfig: NextConfig = {
       },
     ],
   },
-};
 
+  async rewrites() {
+    return [
+      {
+        source: '/r/:path',
+        destination: '/r/:path.json',
+      },
+    ];
+  },
+};
 export default nextConfig;

package.json

@@ -39,9 +39,9 @@
     "next-themes": "^0.4.4",
     "nextjs-toploader": "^3.7.15",
     "prism-react-renderer": "^2.4.1",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "react-activity-calendar": "^2.7.8",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-tweet": "^3.2.2",
     "shadcn": "^2.4.0-canary.6",
     "tailwind-merge": "^3.0.2",

public/r/3d-card-demo.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+    "name": "3d-card-demo",
+    "type": "registry:component",
+    "description": "Example of the 3D card component with interactive hover effects.",
+    "registryDependencies": [
+      "https://v3cn.vineet.pro/r/3d-card"
+    ],
+    "files": [
+      {
+        "name": "3d-card-demo",
+        "type": "registry:component",
+        "path": "components/demo-ui/card/demo.tsx",
+        "content": "\"use client\";\n\nimport { CardContainer, CardItem } from \"@/components/card\";\nimport Image from \"next/image\";\n\nconst Card = () => {\n  return (\n    <div className=\"flex justify-center items-center h-fit py-7  w-full px-2 \">\n      <div className=\"relative cursor-pointer animate-float  md:block mr-8\">\n        <CardContainer className=\" cursor-pointer\">\n          <div className=\"px-8 py-7 max-w-[400px] border-solid gap-5 bg-black flex flex-col justify-start item-center border-2  rounded-2xl\">\n            <CardItem>\n              <Image\n                src=\"https://v3cn.vineet.pro/image/V.png\"\n                alt=\"hvbjn\"\n                width={400}\n                height={400}\n                className=\"rounded-[3rem]\"\n              />\n            </CardItem>\n\n            <div className=\"px-4 flex flex-col justify-center items-start gap-5\">\n              <h1 className=\"text-4xl  text-white font-bold\">V3cn</h1>\n\n              <h4 className=\"text-lg text-white\">\n                Here you will get components which you wont get anywhere.\n              </h4>\n\n              <p className=\"text-purple-400\">Made by Vineet</p>\n            </div>\n          </div>\n        </CardContainer>\n      </div>\n    </div>\n  );\n};\n\nexport { Card };"
+      }
+    ]
+}

public/r/3d-card.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+    "name": "3d-card",
+    "type": "registry:component",
+    "description": "A 3D card component with interactive hover effects and perspective transformations.",
+    "dependencies": [],
+    "files": [
+      {
+        "path": "components/card.tsx",
+        "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport React, {\n  createContext,\n  useState,\n  useContext,\n  useRef,\n  useEffect,\n} from \"react\";\n\nconst MouseEnterContext = createContext<\n  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined\n>(undefined);\n\nexport const CardContainer = ({\n  children,\n  className,\n  containerClassName,\n}: {\n  children?: React.ReactNode;\n  className?: string;\n  containerClassName?: string;\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isMouseEntered, setIsMouseEntered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const { left, top, width, height } =\n      containerRef.current.getBoundingClientRect();\n    const x = (e.clientX - left - width / 2) / 25;\n    const y = (e.clientY - top - height / 2) / 25;\n    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n  };\n\n  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    setIsMouseEntered(true);\n    if (!containerRef.current) return;\n  };\n\n  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    setIsMouseEntered(false);\n    containerRef.current.style.transform = \"rotateY(0deg) rotateX(0deg)\";\n  };\n  return (\n    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>\n      <div\n        className={cn(\"flex items-center justify-center\", containerClassName)}\n        style={{\n          perspective: \"1000px\",\n        }}\n      >\n        <div\n          ref={containerRef}\n          onMouseEnter={handleMouseEnter}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          className={cn(\n            \"flex items-center justify-center relative transition-all duration-200 ease-linear\",\n            className\n          )}\n          style={{\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </MouseEnterContext.Provider>\n  );\n};\n\nexport const CardItem = ({\n  children,\n  className,\n  translateX = 0,\n  translateY = 0,\n  translateZ = 0,\n  rotateX = 0,\n  rotateY = 0,\n  rotateZ = 0,\n  ...rest\n}: {\n  as?: React.ElementType;\n  children: React.ReactNode;\n  className?: string;\n  translateX?: number | string;\n  translateY?: number | string;\n  translateZ?: number | string;\n  rotateX?: number | string;\n  rotateY?: number | string;\n  rotateZ?: number | string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isMouseEntered] = useMouseEnter();\n\n  useEffect(() => {\n    handleAnimations();\n  }, [isMouseEntered]);\n\n  const handleAnimations = () => {\n    if (!ref.current) return;\n    if (isMouseEntered) {\n      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;\n    } else {\n      ref.current.style.transform =\n        \"translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)\";\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"w-fit transition duration-200 ease-linear\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\n// Create a hook to use the context\nexport const useMouseEnter = () => {\n  const context = useContext(MouseEnterContext);\n  if (context === undefined) {\n    throw new Error(\"useMouseEnter must be used within a MouseEnterProvider\");\n  }\n  return context;\n};",
+        "type": "registry:component",
+        "target": "components/card.tsx"
+      }
+    ]
+}

public/r/cursor-demo.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+    "name": "cursor-demo",
+    "type": "registry:component",
+    "description": "Example of the custom cursor component with interactive hover effects.",
+    "registryDependencies": [
+      "https://v3cn.vineet.pro/r/cursor"
+    ],
+    "files": [
+      {
+        "name": "cursor-demo",
+        "type": "registry:component",
+        "path": "components/demo-ui/cursor/demo.tsx",
+        "content": "\"use client\";\n\nimport { Cursor } from \"@/components/cursor\";\n\nconst CursorDemo = () => {\n  return <Cursor cursorClass=\"border-purple-500 hidden md:inline-block\" />;\n};\n\nexport { CursorDemo };"
+      }
+    ]
+}

public/r/cursor.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+    "name": "cursor",
+    "type": "registry:component",
+    "description": "A custom cursor component with interactive hover effects and animations.",
+    "dependencies": [
+      "framer-motion"
+    ],
+    "files": [
+      {
+        "path": "components/cursor.tsx",
+        "content": "\"use client\";\n\nimport { cn } from \"@lib/utils\";\nimport { useState, useEffect, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\n\ntype cursorProp = {\n  cursorClass?: string;\n};\n\nexport const Cursor = ({ cursorClass }: cursorProp) => {\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n  const [isVisible, setIsVisible] = useState(false);\n  const [isInteracting, setIsInteracting] = useState(false);\n  const [isClicked, setIsClicked] = useState(false);\n\n  const cursorRef = useRef<HTMLDivElement>(null);\n\n  // Update cursor position\n  const updateCursorPosition = (e: MouseEvent) => {\n    if (!cursorRef.current) return;\n    \n    const x = e.clientX;\n    const y = e.clientY;\n    \n    setPosition({ x, y });\n  };\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!isVisible) setIsVisible(true);\n      \n      const interactable = (e.target as HTMLElement).closest(\".interactable\");\n      const interacting = interactable !== null;\n      \n      updateCursorPosition(e);\n      \n      setIsInteracting(interacting);\n    };\n\n    const handleMouseLeave = () => {\n      setIsVisible(false);\n    };\n\n    const handleMouseEnter = () => {\n      setIsVisible(true);\n    };\n\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    document.body.addEventListener(\"mouseleave\", handleMouseLeave);\n    document.body.addEventListener(\"mouseenter\", handleMouseEnter);\n\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      document.body.removeEventListener(\"mouseleave\", handleMouseLeave);\n      document.body.removeEventListener(\"mouseenter\", handleMouseEnter);\n    };\n  }, [isVisible]);\n\n  useEffect(() => {\n    const handleClick = () => {\n      setIsClicked(true);\n      setTimeout(() => {\n        setIsClicked(false);\n      }, 100);\n    };\n\n    window.addEventListener(\"click\", handleClick);\n\n    return () => {\n      window.removeEventListener(\"click\", handleClick);\n    };\n  }, []);\n\n  return (\n    <>\n      <motion.div\n        whileTap={{ scale: 0.9 }}\n        id=\"trailer\"\n        style={{\n          transform: `translate(${position.x - (cursorRef.current?.offsetWidth || 20) / 2}px, ${position.y - (cursorRef.current?.offsetHeight || 20) / 2}px) scale(${isInteracting ? 3 : 1})`,\n          opacity: isVisible ? 1 : 0,\n        }}\n        className={cn(\n          \"bg-transparent rounded-full fixed z-50 pointer-events-none border-[3px] border-slate-500 border-solid w-10 h-10 transition-transform duration-100\",\n          isClicked && \"w-8 h-8\",\n          cursorClass\n        )}\n        ref={cursorRef}\n      ></motion.div>\n    </>\n  );\n};",
+        "type": "registry:component",
+        "target": "components/cursor.tsx"
+      }
+    ]
+}

public/r/discord-presence-demo.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+    "name": "discord-presence-demo",
+    "type": "registry:component",
+    "description": "Example of the Discord presence component with custom styling.",
+    "registryDependencies": [
+      "https://v3cn.vineet.pro/r/discord-presence"
+    ],
+    "files": [
+      {
+        "name": "discord-presence-demo",
+        "type": "registry:component",
+        "path": "components/demo-ui/discord/demo.tsx",
+        "content": "\"use client\";\n\nimport { Discord } from \"@/components/ui/discord\";\n\nconst DiscordDemo = () => {\n  return (\n    <Discord\n      userId=\"1018532712455352330\"\n      userName=\"vineet\"\n      activityDetailClass=\"dark:text-cyan-300\"\n      activityDescriptionClass=\"dark:text-[#ffbe6f]\"\n      progressBarClassName=\"dark:bg-[#ffbe6f]\"\n      localTimeClass=\"dark:text-green-500\"\n    />\n  );\n};\n\nexport { DiscordDemo };",
+        "target": "components/demo-ui/discord/demo.tsx"
+      }
+    ]
+}