CT/src/View/Modals/boardSettingsModal.tsx

import * as React from "bloatless-react";

import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
import { ColorPicker } from "../Components/colorPicker";
import { DangerousActionButton } from "../Components/dangerousActionButton";
import { translations } from "../translations";

export function BoardSettingsModal(boardViewModel: BoardViewModel) {
    return (
        <div
            class="modal"
            toggle:open={boardViewModel.isPresentingSettingsModal}
        >
            <div>
                <main>
                    <h2>{translations.chatPage.task.boardSettingsHeadline}</h2>

                    <label class="tile flex-no">
                        <span class="icon">label</span>
                        <div>
                            <span>
                                {translations.chatPage.task.boardNameInputLabel}
                            </span>
                            <input
                                on:enter={boardViewModel.saveSettings}
                                bind:value={boardViewModel.name}
                            ></input>
                        </div>
                    </label>

                    <hr></hr>

                    {ColorPicker(boardViewModel.color)}

                    <hr></hr>

                    <div class="width-input">
                        {DangerousActionButton(
                            translations.chatPage.task.deleteBoardButton,
                            "delete_forever",
                            boardViewModel.deleteBoard,
                        )}
                    </div>
                </main>
                <button on:click={boardViewModel.hideSettings}>
                    {translations.general.closeButton}
                    <span class="icon">close</span>
                </button>
            </div>
        </div>
    );
}