51 lines
1.1 KiB
Svelte
51 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import '$lib/css/nordtheme.css';
|
|
import Recipes from '$lib/components/Recipes.svelte';
|
|
import Search from './Search.svelte';
|
|
export let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
|
|
let month : number;
|
|
export let active_index;
|
|
export let routePrefix = '/rezepte';
|
|
export let lang = 'de';
|
|
|
|
</script>
|
|
<style>
|
|
a.month{
|
|
text-decoration: unset;
|
|
font-family: sans-serif;
|
|
border-radius: 1000px;
|
|
background-color: var(--blue);
|
|
color: var(--nord5);
|
|
padding: 0.5em;
|
|
transition: 100ms;
|
|
min-width: 4em;
|
|
text-align: center;
|
|
}
|
|
a.month:hover,
|
|
.active
|
|
{
|
|
transform: scale(1.1,1.1) !important;
|
|
background-color: var(--red) !important;
|
|
}
|
|
.months{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-inline: auto;
|
|
margin-block: 2rem;
|
|
}
|
|
</style>
|
|
|
|
<div class=months>
|
|
{#each months as month, i}
|
|
<a class:active={i == active_index} class=month href="{routePrefix}/season/{i+1}">{month}</a>
|
|
{/each}
|
|
</div>
|
|
<section>
|
|
<Search season={active_index + 1} {lang}></Search>
|
|
</section>
|
|
<section>
|
|
<slot name=recipes></slot>
|
|
</section>
|