index.tsx

import React from 'react';
import styled from 'styled-components';
import { Board } from 'board';
import { Popup } from 'popup';

const Col = styled.div`
  padding: 1em;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
`;

export default function Web() {
  const [showPopup, setShowPopup] = React.useState<boolean>(false);

  return (
    <div>
      <h1 style={{textAlign: 'center'}}>Kanban Board</h1>
      <Popup showPopup={showPopup} setShowPopup={setShowPopup}>
        <h2>Add Todo</h2>
      </Popup>
      <Board>
        <Col>
          <h2>TO DO</h2>
          <button>Add</button>
        </Col>
        <Col>
          <h2>IN PROGRESS</h2>
        </Col>
        <Col>
          <h2>TESTING</h2>
        </Col>
        <Col>
          <h2>DONE</h2>
        </Col>
      </Board>
    </div>
  );
}