From 012dba9a6b34bd989c6af6c652717b0db36661df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 5 Oct 2021 23:40:25 +0200
Subject: [PATCH] Fix Photos grid bottom elements

---
 src/components/atoms/Button.svelte |  4 ++--
 src/routes/photos.svelte           | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 27658f8..51de99e 100644
--- a/src/components/atoms/Button.svelte
+++ b/src/components/atoms/Button.svelte
@@ -10,12 +10,12 @@
 </script>
 
 {#if tag === 'button'}
-    <button class={classes}>
+    <button class={classes} on:click>
         <slot />
         {text}
     </button>
 {:else if tag === 'a'}
-    <a href={url} class={classes}>
+    <a href={url} class={classes} on:click>
         <slot />
         <span>{text}</span>
     </a>
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index cb4c53c..39fe76d 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -67,6 +67,15 @@
         filtered = false
         filterCountry = defaultCountry
         filterSort = defaultSort
+
+
+
+    /**
+     * Load more photos from CTA
+     */
+    const loadMorePhotos = () => {
+        console.log('load more photos')
+        // TODO: Append more photos from API including options and page
     }
 </script>
 
@@ -158,9 +167,10 @@
 
             <div class="controls grid">
                 <p class="controls__date">Last updated: 4 days ago</p>
-                <Button url="#" text="See more photos" />
+                <Button text="See more photos" tag="button" on:click={loadMorePhotos} />
                 <div class="controls__count">
-                    <span class="current">21/</span>
+                    <span class="current">21</span>
+                    <span>/</span>
                     <span class="total">129</span>
                 </div>
             </div>