app.tsx

import React, { useState, useEffect } from 'react';
import { Ticket } from '@happyorg/data';
import { TicketList } from '@happyorg/ticket-list';

export const App = () => {
  const [tickets, setTickets] = useState<Ticket[]>([]);

  useEffect(() => {
    fetch('/api/tickets')
      .then(t => t.json())
      .then(setTickets);
  }, []);
  
  return (
    <StyledApp>
      <header className="flex">
        <h1>Welcome to agent!</h1>
      </header>
      <main>
        <TicketList tickets={tickets} />

        <section>
          <p>Agent {agentName.name}</p>
          <button>Agent Action</button>
        </section>
      </main>
    </StyledApp>
  );
};

export default App;