58 lines
972 B
Svelte
58 lines
972 B
Svelte
<script lang="ts">
|
|
import image1 from '$lib/assets/1.jpg';
|
|
import image2 from '$lib/assets/2.jpg';
|
|
import image3 from '$lib/assets/3.jpg';
|
|
import image4 from '$lib/assets/4.jpg';
|
|
import image5 from '$lib/assets/5.jpg';
|
|
import type { Manga } from '$lib/types/catalog';
|
|
import CatalogItem from './CatalogItem.svelte';
|
|
|
|
const manga: Manga[] = [
|
|
{
|
|
title: 'Manga name',
|
|
cover: image1,
|
|
currentPage: 26,
|
|
totalPages: 100
|
|
},
|
|
{
|
|
title: 'Another',
|
|
cover: image2,
|
|
currentPage: 0,
|
|
totalPages: 120
|
|
},
|
|
{
|
|
title: 'Awooo',
|
|
cover: image3,
|
|
currentPage: 69,
|
|
totalPages: 96
|
|
},
|
|
{
|
|
title: 'Title',
|
|
cover: image4,
|
|
currentPage: 9,
|
|
totalPages: 59
|
|
},
|
|
{
|
|
title: 'sdhfjksdh',
|
|
cover: image5,
|
|
currentPage: 19,
|
|
totalPages: 200
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<div>
|
|
{#each manga as item}
|
|
<CatalogItem manga={item} />
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|