Project: svelte
Task (easy): 1) Create a appealing BlogList component that accepts an array of blogs as props and displays the titles in div elements with the className 'list-item'. 2) In Main.svelte, mock the blog data and display it using BlogList with this data: [{title: 'Morning', detail: 'Morning My Friends'}, {title: 'Travel', detail: 'I love traveling!'}]. 3) Position BlogList on the left side of Main.svelte with a width of 300px; each blog item should have a height of 40px and a border-box layout. 4) Only One Blog.svelte occupies the remaining space of Main.svelte. The content of Blog.svelte should be from first item of the mock data.