AssignmentList.js

import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";
import Panel from "./Panel.js";

export default {
    components: { Assignment, AssignmentTags, Panel },

    template: `
        <Panel v-show="assignments.length" class="w-60">
            <div class="flex justify-between items-start">
                <h2 class="font-bold mb-2">
                    {{ title }}
                    <span>({{ assignments.length }})</span>
                </h2>
                
                <button v-show="canToggle" @click="$emit('toggle')">&times;</button>
            </div>
            
            <assignment-tags
                v-model:currentTag="currentTag"
                :initial-tags="assignments.map(a => a.tag)" 
            ></assignment-tags>

            <ul class="border border-gray-600 divide-y divide-gray-600 mt-6">
               <assignment 
                    v-for="assignment in filteredAssignments"
                    :key="assignment.id" 
                    :assignment="assignment"
                ></assignment>
            </ul>
            
            <slot></slot>
        </Panel> 
    `,

    props: {
        assignments: Array,
        title: String,
        canToggle: { type: Boolean, default: false }
    },

    data() {
        return {
            currentTag: 'all',
        };
    },

    computed: {
        filteredAssignments() {
            if (this.currentTag === 'all') {
                return this.assignments;
            }

            return this.assignments.filter(a => a.tag === this.currentTag);
        }
    }
}

Panel.js

export default {
    template: `
        <div :class="{
            'p-4 border rounded-lg': true,
            'bg-white border-gray-300 text-black' : theme == 'light',
            'bg-gray-700 border-gray-600 text-white' : theme == 'dark',
        }">
            <h2 v-if="$slots.heading" class="font-bold mb-2">
                <slot name="heading" /> 
            </h2> 
            
            <slot />
            
            <footer v-if="$slots.footer" class="border-gray-600 border-t mt-4 pt-4 text-sm">
                <slot name="footer"></slot> 
            </footer>
        </div> 
    `,

    props: {
        theme: { type: String, default: 'dark' }
    }
}

Thanks for the source code, I have only one problem hope you can help, the design of the input not the same as yours

What do you think I should do to fix it ??

Thanks for the source code, I have only one problem hope you can help, the design of the input not the same as yours What do you think I should do to fix it ??

I had to change w-60 to w-70 in the AssigmentList component to fix that.

Ok, that's worked for me. Thank you

Just add w-full:

<div class="border border-gray-600 text-black flex">
        <input v-model="newLesson" type="text" placeholder="Add a new lesson" class="p-2 w-full">
        <button type="submit" class="bg-white p-2 border-l">Add</button>
</div>