NewProjectButton.svelte

<script>
    import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
    import { addProject } from '../stores/projects';
    import { createEventDispatcher } from 'svelte';

    export let projectName = '';
    const dispatch = createEventDispatcher();
    let isModalOpen = false;

  /**  function openModal() {
        isModalOpen = true;
        dispatch('openModal');
    }
*/
    function closeModal() {
        isModalOpen = false;
        dispatch('closeModal');
    }

    function handleAddProject() {
        if (projectName.trim() !== '') {
            addProject(projectName);
            projectName = '';
            closeModal();
        }
    }

    function handleKeyDown(/** @type KeyboardEvent **/ event) {
        if (event.key === 'Enter') {
            handleAddProject();
        }
    }

</script>

<Modal isOpen={isModalOpen} toggle={closeModal}>
    <ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
    <ModalBody>
        <input
            type="text"
            bind:value={projectName}
            placeholder="Enter project name..."
            class="form-control"
            on:keydown={handleKeyDown}
        />
    </ModalBody>
    <ModalFooter>
        <Button color="primary" on:click={handleAddProject}>Add Project</Button>
        <Button color="secondary" on:click={closeModal}>Cancel</Button>
    </ModalFooter>
</Modal>