61 lines
1.4 KiB
Svelte
61 lines
1.4 KiB
Svelte
<script>
|
|
import '$lib/css/base.css';
|
|
import '$lib/css/carousel.css';
|
|
import SvgIcon from '@jamescoyle/svelte-icon';
|
|
import { mdiAccount, mdiCalendarRange } from '@mdi/js';
|
|
|
|
export let posts;
|
|
const mainpost = posts[0];
|
|
let movable;
|
|
|
|
function redirectTo(url) {
|
|
window.location.href = url;
|
|
}
|
|
|
|
function handleKeyDown(event, url) {
|
|
console.log(event);
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
redirectTo(url);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="carousel-v-main">
|
|
<div
|
|
class="carousel-v-bigpost"
|
|
role="button"
|
|
tabindex="0"
|
|
on:click={() => {
|
|
redirectTo(`/article/${mainpost.slug}`);
|
|
}}
|
|
on:keydown={(event) => handleKeyDown(event, `/article/${mainpost.slug}`)}
|
|
>
|
|
<div>
|
|
<h2>{mainpost.title}</h2>
|
|
<div class="center flex justify-center h-60">
|
|
<img class="carousel-picture" alt="mainpicture" src={mainpost.picture} />
|
|
</div>
|
|
<div class="flex align-center margin-horizontal-05">
|
|
<SvgIcon type="mdi" path={mdiCalendarRange} size="26" />
|
|
{mainpost.date}
|
|
</div>
|
|
<div class="flex align-center margin-horizontal-05">
|
|
<SvgIcon type="mdi" path={mdiAccount} size="26" />
|
|
{mainpost.author}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-v-minpost-container">
|
|
<div bind:this={movable}>
|
|
{#each posts as p, index}
|
|
{#if index > 0}
|
|
<div class="carousel-v-minpost">
|
|
<h2>{p.title}</h2>
|
|
<p>{p.date}</p>
|
|
<p>{p.author}</p>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|