{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnified-tab",
  "dependencies": [
    "motion",
    "@radix-ui/react-tooltip"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/tabs/magnified-tabs.tsx",
      "content": "//@ts-nocheck\n'use client';\n\nimport { Icons } from '@/assets/icons/Icons';\nimport preview from '@/assets/preview/Preview';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/ui/magnified-doc';\nimport { apps } from '@/components/website/constant';\nimport {\n  AnimatePresence,\n  type MotionValue,\n  motion,\n  useMotionValue,\n  useSpring,\n  useTransform,\n} from 'motion/react';\nimport Image from 'next/image';\nimport React, { useRef, useState } from 'react';\n\nconst Component = React.forwardRef((props, ref) => <Image {...props} ref={ref} alt='App' />);\n\nconst MotionComponent = motion(Component);\n\nfunction MagnifiedDocOneFile() {\n  const mouseX = useMotionValue(Number.POSITIVE_INFINITY);\n  const [index, setIndex] = useState(0);\n  const [prevIndex, setPrevIndex] = useState(0);\n\n  const handleClick = (i: React.SetStateAction<number>) => {\n    setPrevIndex(index);\n    setIndex(i);\n  };\n\n  const isForward = index > prevIndex || (index === 0 && prevIndex === apps.length - 1);\n\n  return (\n    <>\n      <div className='relative [box-shadow] w-4/5 mx-auto  rounded-xl  dark:bg-neutral-950 bg-neutral-300  [box-shadow:inset_1px_-1px_4px_rgba(0_0_0,0.5)] overflow-hidden '>\n        <div className='relative'>\n          {apps.map((app, i) => {\n            return (\n              <>\n                <AnimatePresence mode={'popLayout'}>\n                  {index === i && (\n                    <motion.div\n                      initial={{\n                        opacity: 0,\n                        y: isForward ? 30 : -30,\n                      }}\n                      animate={{\n                        opacity: 1,\n                        y: 0,\n                      }}\n                      exit={{\n                        opacity: 0,\n                        y: isForward ? -30 : 30,\n                      }}\n                      transition={{\n                        ease: 'easeInOut',\n                        duration: 0.3,\n                        delay: 0.4,\n                      }}\n                      className='w-full h-full cursor-pointer'\n                      onClick={app?.onClick}\n                    >\n                      <Image\n                        src={app?.imgSrc}\n                        alt='images'\n                        width={1000}\n                        height={1000}\n                        className='w-full sm:h-[500px] h-[400px] object-cover  rounded-lg'\n                      />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </>\n            );\n          })}\n\n          <div className='absolute bottom-0 left-0 w-full z-20'>\n            <div className='w-fit mx-auto'>\n              <TooltipProvider delayDuration={0}>\n                <motion.div\n                  onMouseMove={(e) => mouseX.set(e.pageX)}\n                  onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}\n                  className='mx-auto flex sm:h-[57px] h-[52px] w-fit items-end gap-2 rounded-t-lg px-2 pb-2 dark:bg-neutral-800/80 bg-white/50 backdrop-blur-xs border-t border-l border-r  '\n                >\n                  {apps.map((app, i) => {\n                    return (\n                      <Tooltip key={app.id}>\n                        <TooltipTrigger onClick={() => handleClick(i)}>\n                          <span className='sr-only'>{app.name}</span>\n                          <AppIcon mouseX={mouseX} src={app.icon} />\n                        </TooltipTrigger>\n                        <TooltipContent className='py-1 px-3 rounded-xs' sideOffset={8}>\n                          <p className='text-xs'>{app.name}</p>\n                        </TooltipContent>\n                      </Tooltip>\n                    );\n                  })}\n                </motion.div>\n              </TooltipProvider>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction AppIcon({ mouseX, src }: { mouseX: MotionValue; src: any }) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const distance = useTransform(mouseX, (val) => {\n    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n\n    return val - bounds.x - bounds.width / 2;\n  });\n\n  const widthSync = useTransform(distance, [-100, 0, 100], [40, 55, 40]);\n  const width = useSpring(widthSync, {\n    mass: 0.1,\n    stiffness: 150,\n    damping: 12,\n  });\n\n  return (\n    <>\n      <MotionComponent\n        src={src}\n        width={60}\n        height={60}\n        alt=''\n        quality={100}\n        ref={ref}\n        style={{ width }}\n        className='aspect-square rounded-lg sm:w-8 w-6  object-cover'\n      />\n    </>\n  );\n}\nexport default MagnifiedDocOneFile;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/magnified-doc.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport * as React from 'react';\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-50 overflow-hidden rounded-lg border dark:bg-neutral-800 bg-neutral-50 backdrop-filter dark:border-[#2C2C2C] backdrop-blur-lg dark:bg-[#1A1A1A]/95 px-4 py-3 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}