Designing the Ticket List page

The first button in our navigation component points to /tickets. Let’s create a page for that by creating the app/tickets/page.js file. This will, later, be the first page you’ll see after a successful login.

To get started and test whether our code works, we’ll add some dummy code to app/tickets/page.js first:

export default function TicketListPage() {
  return <div>Ticket List should go here</div>;
}

Now, you have a page alongside your layout, which you can test by running the server (npm run dev). When you visit localhost:3000/tickets, you should see something like this:

Figure 3.4: The page at /tickets

Next, let’s go one step further and create a list of tickets, with some test tickets on that page. First, define some dummy tickets in the page file:

const dummyTickets = [
  {
    id: 1,
    title: "Write...