trello_powerup_initialization_react_component_nextjs.ts

1import React, { useEffect } from 'react';
2
3// Note: You would typically include the Trello Power-Up script in your _document.tsx or via a script tag
4// <script src="https://p.trellocdn.com/power-up.min.js"></script>
5
6declare global {
7  interface Window {
8    TrelloPowerUp: any;
9  }
10}
11
12const TrelloQuickstart: React.FC = () => {
13  useEffect(() => {
14    const t = window.TrelloPowerUp.initialize({
15      'card-buttons': function (t: any, options: any) {
16        return [
17          {
18            icon: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
19            text: 'Next Boost Action',
20            callback: function (t: any) {
21              return t.popup({
22                title: 'Boost Menu',
23                url: './boost-menu', // Path to your Next.js route
24              });
25            },
26          },
27        ];
28      },
29    });
30  }, []);
31
32  return (
33    <div style={{ padding: '20px' }}>
34      <h1>Trello Next Boost Initialized</h1>
35      <p>This component registers a new button on your Trello cards.</p>
36    </div>
37  );
38};
39
40export default TrelloQuickstart;