sb/src/App.vue

<template>

    <header>
    <h1>Story Baobab</h1>
    <div class="intro">
        Drag and drop images and video to sketch a print-friendly storyboard.
    </div>
    </header>

    <main>
        
    <div class="insert-scene">
        <input v-model="title" placeholder="Title">
        <button @click="add">Add Scene</button>
    </div>
        
        <SceneEntry v-for="scene in scenes" :title="scene"/>

    </main>
</template>

<script setup>

import SceneEntry from './components/SceneEntry.vue'
import {ref} from 'vue'

const scenes = ref([])
const title = ref('')
const add = () => {
    scenes.value.push(title.value)
    title.value = ""
    }

</script>

<style>

header {
    margin: 32px;
}

header h1 {
    margin: 0;
}

main {
    margin: 32px;
}

.insert-scene {
    display: inline-flex;
    gap: 8px;
    padding: 16px;
    background-color: #F3F3F3;
}

@media print {

    header, .insert-scene, .add-shot {
        display: none
    }



}


</style>