import React from 'react';

import styled from 'styled-components';

const StyledApp = styled.div`
  ...
`;

type Ticket = {
  title: string;
  id: number;
};

export const App = () => {
  const tickets: Ticket[] = [
    {
      title: `Install updates`,
      id: 1
    },
    {
      title: `Restore the backup`,
      id: 2
    }
  ];

  return (
    <StyledApp>
      <header className="flex">
        <h1>Welcome to tickets!</h1>
      </header>
      <main>
        {tickets.map(t => (
          <p className="ticket flex" key={t.id}>
            {t.title}
          </p>
        ))}
      </main>
    </StyledApp>
  );
};

export default App;