flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Edit Newsletter component

Browse Source
This commit is contained in:
Shelby Kay
2021-09-29 23:38:00 +02:00
parent e0d048fe8c
commit 0ba0ab1f60
6 changed files with 98 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/organisms/Newsletter.svelte
View File

@@ -1,32 +1,40 @@
<script lang="ts">
import { getContext } from 'svelte'
// Components
import Button from '$components/atoms/Button.svelte'
import IconArrow from '$components/atoms/IconArrow.svelte'
import IconArrow from '$components/atoms/IconArrow.svelte'
// export let locations: any
const { settings: { newsletter_url, newsletter_text, newsletter_subtitle} }: any = getContext('global')
export let theme: string = 'default'
const { settings: { newsletter_url, newsletter_text, newsletter_subtitle }}: any = getContext('global')
let inputInFocus = false
// Toggle input focus
const toggleFocus = () => inputInFocus = !inputInFocus
</script>
<div class="newsletter grid">
<div class="newsletter__wrapper grid">
<div class="newsletter__about">
<h3 class="title-small">{newsletter_subtitle}</h3>
<p class="text-small">{newsletter_text}</p>
<div class="newsletter newsletter--{theme} shadow-box-dark">
<div class="newsletter__wrapper">
<h3 class="title-medium">{newsletter_subtitle}</h3>
<p class="text-small">{newsletter_text}</p>
<form action={newsletter_url} target="_blank">
<div class="newsletter__email" class:is-focused={inputInFocus}>
<input type="email" placeholder="Your email address"
on:focus={toggleFocus}
on:blur={toggleFocus}
>
<button type="submit">
<IconArrow color="white" />
</button>
</div>
</form>
<div class="past-issues">
<a href="/subscribe">
<img src="/images/icons/form.svg" alt="newsletter icon">
<span>See past issues</span>
</a>
</div>
<div class="newsletter__signup">
<form action={newsletter_url} target="_blank">
<div class="newsletter__email">
<input type="email" placeholder="Your email address">
<button type="submit">
<IconArrow color="white" />
</button>
</div>
</form>
<span>No spam, we promise!</span>
</div>
</div>