Files
my-notes-viewer/src/components/routes/Home.svelte

69 lines
1.9 KiB
Svelte

<script lang="ts">
import * as animateScroll from "svelte-scrollto"
import { currentLang } from "../../store"
import { getArticles } from "../../api"
import GoogleMaps from "../widgets/GoogleMaps.svelte"
import ScrollTo from "../widgets/ScrollTo.svelte"
import ContactForm from "../widgets/ContactForm.svelte"
import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
import Article from "../widgets/Article.svelte"
let expandedForm: string = "recipe"
let articleEntries: CollectionEntry[] = []
$: if ($currentLang) {
getArticles("articles", {
filter: {
"article.general.locale": $currentLang,
},
}).then((response) => {
articleEntries = response
})
}
</script>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
{#each articleEntries || [] as entry}
<Article entry="{entry}" />
{/each}
</div>
</div>
<div class="row">
<div class="col-md-12">
<GeneralMediaImage id="test1" />
</div>
</div>
<div class="row nospace">
<div class="col-md-6">
<ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />
</div>
<div class="col-md-6">
<ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
</div>
</div>
</div>
</section>
<section>
<GoogleMaps />
</section>
<ScrollTo
on:scrollTo="{(e) => {
expandedForm = null
animateScroll.scrollTo({
delay: 100,
element: '#' + e.detail.element,
offset: -200,
onDone: () => {
expandedForm = e.detail.element
},
})
}}"
/>