<div id="root" class="panel center"></div>
<!-- layout jump solved in this codepen https://codepen.io/GreenSock/pen/MWmqzjE -->

.app {
  padding: 10px;
}

.box {
  margin: 10px 10px 0 0;
  padding: 10px;
}

.boxes {  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

import React, {
  useState,
  useLayoutEffect,
  useEffect
} from "https://esm.sh/react@19.0.0";
import ReactDOM from "https://esm.sh/react-dom@19.0.0/client";
import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@19.0.0";

gsap.registerPlugin(useGSAP);

console.clear();

function App() {
  const [items, setItems] = useState(() => [
    { id: 0, color: "blue" },
    { id: 1, color: "red" },
    { id: 2, color: "purple" }
  ]);
  const { context, contextSafe } = useGSAP();

  const remove = contextSafe((item, target) => {
    gsap.to(target, {
      opacity: 0,
      onComplete: () => removeItem(item)
    });
  });

  const removeItem = (value) => {
    setItems((prev) => prev.filter((item) => item !== value));
  };

  return (
    <div className="app boxes">
      {items.map((item) => (
        <div
          className={`box gradient-${item.color}`}
          key={item.id}
          onClick={(e) => remove(item, e.currentTarget)}
        >
          Click Me
        </div>
      ))}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);