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

Use reusable DiscoverText with count data

Browse Source
This commit is contained in:
Félix Péault
2021-10-04 13:05:02 +02:00
parent 3b61ebd144
commit 0d622ef69f
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/atoms/DiscoverText.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
import { getContext } from 'svelte'
const { count }: any = getContext('global')
</script>
<p class="discover">
Discover <strong>{count.photos} homes</strong><br>
from <strong>{count.locations} cities</strong>
of <strong>{count.countries} countries</strong>
</p>

9
src/routes/index.svelte
View File

@@ -5,6 +5,7 @@
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import BoxCTA from '$components/atoms/BoxCTA.svelte' import BoxCTA from '$components/atoms/BoxCTA.svelte'
import DiscoverText from '$components/atoms/DiscoverText.svelte'
import PhotoCard from '$components/molecules/PhotoCard.svelte' import PhotoCard from '$components/molecules/PhotoCard.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
import Locations from '$components/organisms/Locations.svelte' import Locations from '$components/organisms/Locations.svelte'
@@ -13,7 +14,7 @@
export let photos: any export let photos: any
const { settings, location, count }: any = getContext('global') const { settings, location }: any = getContext('global')
const { path } = $page const { path } = $page
</script> </script>
@@ -43,11 +44,7 @@
</section> </section>
<div class="homepage__ctas" id="ctas"> <div class="homepage__ctas" id="ctas">
<p class="discover"> <DiscoverText />
Discover <strong>{count.photos} homes</strong><br>
from <strong>{count.locations} cities</strong>
of <strong>{count.countries} countries</strong>
</p>
<div class="cards"> <div class="cards">
<BoxCTA <BoxCTA

16
src/routes/photos.svelte
View File

@@ -1,20 +1,15 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte' import { getContext } from 'svelte'
import { page } from '$app/stores'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import BoxCTA from '$components/atoms/BoxCTA.svelte' import DiscoverText from '$components/atoms/DiscoverText.svelte'
import PhotoCard from '$components/molecules/PhotoCard.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
import Locations from '$components/organisms/Locations.svelte'
import Shop from '$components/organisms/Shop.svelte' import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte' import Newsletter from '$components/organisms/Newsletter.svelte'
export let photos: any export let photos: any
const { settings, location, count }: any = getContext('global') const { country: countries }: any = getContext('global')
const { path } = $page
</script> </script>
<Metas <Metas
@@ -26,11 +21,8 @@
<main class="photos"> <main class="photos">
<section class="photos__intro"> <section class="photos__intro">
<h1 class="title-huge">Houses</h1> <h1 class="title-huge">Houses</h1>
<p class="discover">
Discover <strong>{count.photos} homes</strong><br> <DiscoverText />
from <strong>{count.locations} cities</strong>
of <strong>{count.countries} countries</strong>
</p>
<div class="filter"> <div class="filter">
<span class="text-label filter__label">Filter photos</span> <span class="text-label filter__label">Filter photos</span>