Pinned List · Animate UI

import * as React from 'react';
import {
  PinnedList,
  PinnedListItem,
  PinnedListItems,
  PinnedListLabel,
  PinnedListPinned,
  PinnedListTrigger,
  PinnedListUnpinned,
} from '@animate-ui/react/primitives/pinned-list';

export function Folders() {
  const [items, setItems] = React.useState(ITEMS);
  const toggle = (id: string) =>
    setItems((prev) =>
      prev.map((i) => (i.id === id ? { ...i, pinned: !i.pinned } : i)),
    );

  const pinned = items.filter((i) => i.pinned);
  const unpinned = items.filter((i) => !i.pinned);

  return (
    <PinnedList onPinnedChange={toggle}>
      <PinnedListPinned>
        <PinnedListLabel hide={pinned.length === 0}>Pinned</PinnedListLabel>
        <PinnedListItems>
          {pinned.map((item) => (
            <PinnedListItem key={item.id} id={item.id} customTrigger>
              {item.name}
              <PinnedListTrigger aria-label={`Unpin ${item.name}`}>
                …
              </PinnedListTrigger>
            </PinnedListItem>
          ))}
        </PinnedListItems>
      </PinnedListPinned>
      <PinnedListUnpinned>
        <PinnedListLabel hide={unpinned.length === 0}>All</PinnedListLabel>
        <PinnedListItems>
          {unpinned.map((item) => (
            <PinnedListItem key={item.id} id={item.id} customTrigger>
              {item.name}
              <PinnedListTrigger aria-label={`Pin ${item.name}`}>
                …
              </PinnedListTrigger>
            </PinnedListItem>
          ))}
        </PinnedListItems>
      </PinnedListUnpinned>
    </PinnedList>
  );
}