{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drag-items",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/drag/drag-items.tsx",
      "content": "'use client';\nimport {\n  type DragControls,\n  type MotionValue,\n  Reorder,\n  animate,\n  motion,\n  useDragControls,\n  useMotionValue,\n} from 'motion/react';\nimport type React from 'react';\nimport { useEffect, useState } from 'react';\n\nexport default function DragItems() {\n  const [items, setItems] = useState([\n    {\n      id: 1,\n      title: 'Follow me on X',\n      subtitle: 'Get more update follow me on X',\n      date: '32.8.2024',\n      src: 'https://images.unsplash.com/photo-1724908549265-06972c22ca37?q=80&w=2070&auto=format&fit=crop',\n      link: 'https://x.com/naymur_dev',\n    },\n    {\n      id: 2,\n      title: 'Star the repo',\n      subtitle: 'If you like star the repo',\n      date: '32.8.2024',\n      src: 'https://images.unsplash.com/photo-1724908549265-06972c22ca37?q=80&w=2070&auto=format&fit=crop',\n      link: 'https://github.com/ui-layouts/uilayouts',\n    },\n    {\n      id: 3,\n      title: 'Share it with your friend',\n      subtitle: 'if you like it, please Share it with your friend ',\n      date: '32.8.2024',\n      src: 'https://images.unsplash.com/photo-1724908549265-06972c22ca37?q=80&w=2070&auto=format&fit=crop',\n      link: 'https://www.ui-layouts.com/',\n    },\n  ]);\n\n  return (\n    <Reorder.Group\n      axis='y'\n      values={items}\n      onReorder={setItems}\n      className='space-y-2 w-full max-w-md mx-auto'\n    >\n      {items.map((item) => (\n        <Item key={item.id} item={item}>\n          <h1 className='text-xl'>{item.title}</h1>\n          <p className='text-sm'>{item.subtitle}</p>\n          <span>{item.date}</span>\n          <a\n            className='block w-fit p-2 px-3 text-xs rounded-md  bg-primary-foreground text-primary'\n            href={item.link}\n          >\n            Click\n          </a>\n        </Item>\n      ))}\n    </Reorder.Group>\n  );\n}\n\nconst Item = ({ children, item }: { children: React.ReactNode; item: any }) => {\n  const y = useMotionValue(0);\n  const boxShadow = useRaisedShadow(y);\n  const dragControls = useDragControls();\n  const [isDragging, setIsDragging] = useState(false);\n  const [pressed, setPressed] = useState(false);\n\n  return (\n    <Reorder.Item\n      value={item}\n      style={{ boxShadow, y }}\n      dragListener={false}\n      dragControls={dragControls}\n      onDragStart={() => setIsDragging(true)}\n      onDragEnd={() => {\n        setIsDragging(false);\n        setPressed(false);\n      }}\n      onPointerUp={() => setPressed(false)}\n      onPointerCancel={() => setPressed(false)}\n      className='flex justify-between items-center w-full p-3 text-primary-foreground bg-primary border rounded-md'\n    >\n      <div>{children}</div>\n      <ReorderIcon\n        dragControls={dragControls}\n        isActive={isDragging || pressed}\n        onPress={() => setPressed(true)}\n      />\n    </Reorder.Item>\n  );\n};\n\ninterface ReorderIconProps {\n  dragControls: DragControls;\n  isActive: boolean;\n  onPress: () => void;\n}\n\nexport function ReorderIcon({ dragControls, isActive, onPress }: ReorderIconProps) {\n  return (\n    <motion.button\n      type='button'\n      aria-label='Reorder'\n      animate={{ scale: isActive ? 0.85 : 1 }}\n      transition={{ type: 'spring', stiffness: 500, damping: 30 }}\n      onPointerDown={(e) => {\n        e.preventDefault();\n        onPress();\n        dragControls.start(e);\n      }}\n      className='cursor-grab active:cursor-grabbing'\n      style={{ touchAction: 'none' }}\n    >\n      <svg\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox='0 0 39 39'\n        width='39'\n        height='39'\n        className='fill-primary-foreground'\n      >\n        <path d='M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z'></path>\n        <path d='M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z'></path>\n        <path d='M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z'></path>\n        <path d='M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z'></path>\n        <path d='M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z'></path>\n        <path d='M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z'></path>\n        <path d='M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z'></path>\n        <path d='M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z'></path>\n        <path d='M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z'></path>\n      </svg>\n    </motion.button>\n  );\n}\n\nconst inactiveShadow = '0px 0px 0px rgba(0,0,0,0.8)';\n\nexport function useRaisedShadow(value: MotionValue<number>) {\n  const boxShadow = useMotionValue(inactiveShadow);\n\n  useEffect(() => {\n    let isActive = false;\n    value.onChange((latest) => {\n      const wasActive = isActive;\n      if (latest !== 0) {\n        isActive = true;\n        if (isActive !== wasActive) {\n          animate(boxShadow, '5px 5px 10px rgba(0,0,0,0.3)');\n        }\n      } else {\n        isActive = false;\n        if (isActive !== wasActive) {\n          animate(boxShadow, inactiveShadow);\n        }\n      }\n    });\n  }, [value, boxShadow]);\n\n  return boxShadow;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}