{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pin-item",
  "type": "registry:component",
  "title": "Pin Item",
  "description": "A sleek list component with shared-layout transitions for pinning items and managing priority views.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/pin-item.tsx",
      "type": "registry:component",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence, MotionConfig, type Transition } from 'motion/react';\nimport { Pin } from 'lucide-react';\nimport { IoFastFood } from 'react-icons/io5';\nimport {\n  FaChargingStation,\n  FaPills,\n  FaSailboat,\n  FaUtensils,\n} from 'react-icons/fa6';\n\nexport type PlaceItem = {\n  id: number;\n  name: string;\n  type: string;\n  status: string;\n  icon: React.ComponentType<{ size?: number }>;\n  pinned?: boolean;\n};\n\nconst INITIAL_PLACES: PlaceItem[] = [\n  {\n    id: 1,\n    name: 'Harbor Bay Marina',\n    type: 'Marina',\n    status: 'Closes 7:00 PM',\n    icon: IoFastFood,\n    pinned: false,\n  },\n  {\n    id: 2,\n    name: 'Mocha Brew',\n    type: 'Cafe',\n    status: 'Closes 9:00 PM',\n    icon: FaSailboat,\n    pinned: false,\n  },\n  {\n    id: 3,\n    name: 'Olive Bistro',\n    type: 'Restaurant',\n    status: 'Closes 11:00 PM',\n    icon: FaUtensils,\n    pinned: false,\n  },\n  {\n    id: 4,\n    name: 'GreenVolt Hub',\n    type: 'EV Charger',\n    status: 'Open 24 hours',\n    icon: FaChargingStation,\n    pinned: false,\n  },\n  {\n    id: 5,\n    name: 'CarePlus Pharmacy',\n    type: 'Pharmacy',\n    status: 'Open 24 hours',\n    icon: FaPills,\n    pinned: false,\n  },\n];\n\nconst springConfig:Transition = {\n  type: 'spring',\n  stiffness: 400,\n  damping: 40,\n} \n\ntype PinItemComponentProps = {\n  items?: PlaceItem[];\n};\n\nexport const PinItemComponent = ({\n  items = INITIAL_PLACES,\n}: PinItemComponentProps) => {\n  const [places, setPlaces] = useState<PlaceItem[]>(\n    items.map((p) => ({ ...p, pinned: p.pinned ?? false })),\n  );\n\n  const togglePin = (id: number) => {\n    setPlaces((prev) =>\n      prev.map((place) =>\n        place.id === id ? { ...place, pinned: !place.pinned } : place,\n      ),\n    );\n  };\n\n  const pinnedPlaces = places.filter((p) => p.pinned);\n  const unpinnedPlaces = places.filter((p) => !p.pinned);\n\n  return (\n    <div className=\"w-full max-w-[355px] space-y-6\">\n      <MotionConfig transition={springConfig}>\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {pinnedPlaces.length > 0 && (\n            <motion.div\n              layout\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"space-y-3\"\n            >\n              <motion.h3\n                layout\n                className=\"ml-1 text-[14px] font-semibold tracking-wider text-[#ADACB8] dark:text-neutral-500\"\n              >\n                Pinned Places\n              </motion.h3>\n              <div className=\"space-y-2\">\n                {pinnedPlaces.map((place) => (\n                  <PlaceCard\n                    key={place.id}\n                    place={place}\n                    onToggle={togglePin}\n                  />\n                ))}\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        <motion.div layout className=\"space-y-3\">\n          <motion.h3\n            layout\n            className=\"ml-1 text-[14px] font-semibold tracking-wider text-[#ADACB8] dark:text-neutral-500\"\n          >\n            All Places\n          </motion.h3>\n          <div className=\"space-y-3\">\n            {unpinnedPlaces.map((place) => (\n              <PlaceCard key={place.id} place={place} onToggle={togglePin} />\n            ))}\n          </div>\n        </motion.div>\n      </MotionConfig>\n    </div>\n  );\n};\n\n\nconst PlaceCard = ({\n  place,\n  onToggle,\n}: {\n  place: PlaceItem;\n  onToggle: (id: number) => void;\n}) => {\n  const Icon = place.icon;\n\n  return (\n    <motion.div\n      layoutId={`card-${place.id}`}\n      transition={springConfig}\n      className=\"group relative flex cursor-default items-center justify-between gap-2.5 rounded-2xl border border-gray-100 bg-[#F6F5FA] p-2.5 shadow-xs transition-shadow hover:shadow-sm sm:p-3 dark:border-neutral-800 dark:bg-neutral-900\"\n    >\n      <div className=\"flex items-center gap-3\">\n        <motion.div\n          layout\n          className=\"flex h-10 w-10 items-center justify-center rounded-xl bg-[#FEFEFE] text-[#AEADB9] dark:bg-neutral-800 dark:text-neutral-400\"\n        >\n          <Icon size={22} />\n        </motion.div>\n\n        <motion.div layout>\n          <h4 className=\"text-base leading-tight font-bold text-[#27272B] dark:text-neutral-100\">\n            {place.name}\n          </h4>\n          <p className=\"mt-0.5 max-w-[180px] truncate text-[14px] font-semibold text-[#87868D] sm:max-w-none dark:text-neutral-400\">\n            {place.type} • {place.status}\n          </p>\n        </motion.div>\n      </div>\n\n      <motion.button\n        layout\n        onClick={() => onToggle(place.id)}\n        className={`relative z-10 flex h-8 w-8 items-center justify-center rounded-full transition-all duration-300 ${\n          place.pinned\n            ? 'bg-yellow-400 text-white opacity-100'\n            : 'bg-[#CDCCD5] text-[#fefefe] opacity-0 group-hover:opacity-100 dark:bg-neutral-700 dark:text-neutral-400'\n        }`}\n      >\n        <Pin size={16} className=\"fill-white\" />\n      </motion.button>\n    </motion.div>\n  );\n};\n"
    }
  ]
}