Tab

const Demo = () => {
   const Buttons = [...Array(5)].map((_, i) => (
      <Tab.Button className={s.button} value={"value"} key={"key"}>
         ボタン
      </Tab.Button>
   ));
   const Contents = [...Array(5)].map((_, i) => (
      <Tab.Content
         className={s.content}
         value={"value"}
         key={"key"}
         callback={{
            onClose: (target) => {
               return new Promise((resolve) => {
                  gsap.context(() => {
                     gsap.to("p,button", {
                        opacity: 0,
                        y: -16,
                        onComplete: () => {
                           resolve(null);
                        },
                     });
                  }, target);
               });
            },
            onOpen: (target) => {
               gsap.context(() => {
                  gsap.fromTo(
                     "p,button",
                     {
                        opacity: 0,
                        y: 16,
                     },
                     {
                        opacity: 1,
                        y: 0,
                     }
                  );
               }, target);
            },
            onReset: (target) => {
               gsap.context(() => {
                  gsap.set("p,button", {
                     opacity: 1,
                     y: 0,
                  });
               }, target);
            },
         }}>
         <p>{}</p>
         <button>ボタン</button>
      </Tab.Content>
   ));

   return (
      <Tab.Context defaultValue="tab_0">
         <SwitchButton />
         <div className={s.buttonWrapper}>{Buttons}</div>
         <div className={s.contentWrapper}>{Contents}</div>
      </Tab.Context>
   );
};