Pin List

1'use client';
2 
3import * as React from 'react';
4import { Pin } from 'lucide-react';
5import {
6  motion,
7  LayoutGroup,
8  AnimatePresence,
9  type HTMLMotionProps,
10  type Transition,
11} from 'motion/react';
12import { cn } from '@/lib/utils';
13 
14type PinListItem = {
15  id: number;
16  name: string;
17  info: string;
18  icon: React.ElementType;
19  pinned: boolean;
20};
21 
22type PinListProps = {
23  items: PinListItem[];
24  labels?: {
25    pinned?: string;
26    unpinned?: string;
27  };
28  transition?: Transition;
29  labelMotionProps?: HTMLMotionProps<'p'>;
30  className?: string;
31  labelClassName?: string;
32  pinnedSectionClassName?: string;
33  unpinnedSectionClassName?: string;
34  zIndexResetDelay?: number;
35} & HTMLMotionProps<'div'>;
36 
37function PinList({
38  items,
39  labels = { pinned: 'Pinned Items', unpinned: 'All Items' },
40  transition = { stiffness: 320, damping: 20, mass: 0.8, type: 'spring' },
41  labelMotionProps = {
42    initial: { opacity: 0 },
43    animate: { opacity: 1 },
44    exit: { opacity: 0 },
45    transition: { duration: 0.22, ease: 'easeInOut' },
46  },
47  className,
48  labelClassName,
49  pinnedSectionClassName,
50  unpinnedSectionClassName,
51  zIndexResetDelay = 500,
52  ...props
53}: PinListProps) {
54  const [listItems, setListItems] = React.useState(items);
55  const [togglingGroup, setTogglingGroup] = React.useState<
56    'pinned' | 'unpinned' | null
57  >(null);
58 
59  const pinned = listItems.filter((u) => u.pinned);
60  const unpinned = listItems.filter((u) => !u.pinned);
61 
62  const toggleStatus = (id: number) => {
63    const item = listItems.find((u) => u.id === id);
64    if (!item) return;
65 
66    setTogglingGroup(item.pinned ? 'pinned' : 'unpinned');
67    setListItems((prev) => {
68      const idx = prev.findIndex((u) => u.id === id);
69      if (idx === -1) return prev;
70      const updated = [...prev];
71      const [item] = updated.splice(idx, 1);
72      if (!item) return prev;
73      const toggled = { ...item, pinned: !item.pinned };
74      if (toggled.pinned) updated.push(toggled);
75      else updated.unshift(toggled);
76      return updated;
77    });
78    // Reset group z-index after the animation duration (keep in sync with animation timing)
79    setTimeout(() => setTogglingGroup(null), zIndexResetDelay);
80  };
81 
82  return (
83    <motion.div className={cn('space-y-10', className)} {...props}>
84      <LayoutGroup>
85        <div>
86          {pinned.length > 0 && (
87            <div
88              className={cn(
89                'space-y-3 relative',
90                togglingGroup === 'pinned' ? 'z-5' : 'z-10',
91// … truncated