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;
`;

type TTodos = {
  title?: string;
  column?: string;
}

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

  const handleSaveTodo = (event: any) => {
    event.preventDefault();
    setTodos((prev) => [{ title: event.target?.title.value, column: 'todo' }, ...prev] as any);
    setShowPopup(!showPopup);
  }

  return (
    <div>
      <h1 style={{textAlign: 'center'}}>Kanban Board</h1>
      <Popup showPopup={showPopup} setShowPopup={setShowPopup}>
        <h2>Add Todo</h2>
        <form onSubmit={handleSaveTodo}>
          <div>
            <label>Title</label>
            <input autoFocus type="text" name="title" />
          </div>
          <div>
            <button>Save</button>
          </div>
        </form>
      </Popup>
      <Board>
        <Col>
          <h2>TO DO</h2>
          <button onClick={() => setShowPopup(!showPopup)}>Add</button>
        </Col>
        <Col>
          <h2>IN PROGRESS</h2>
        </Col>
        <Col>
          <h2>TESTING</h2>
        </Col>
        <Col>
          <h2>DONE</h2>
        </Col>
      </Board>
    </div>
  );
}