Add style to Photo Viewer page

src/routes/[country]/[location]/[photo].svelte

@@ -4,6 +4,8 @@
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     // Components
     import Image from '$components/atoms/Image.svelte'
+import IconArrow from '$components/atoms/IconArrow.svelte'
+import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     export let photos: any[]
     export let location: any
@@ -40,32 +42,49 @@
 </script>
 
 
-<h1>Title</h1>
-<p>{currentPhoto.title}</p>
+<main class="viewer-photo grid">
+    <div class="viewer-photo__carousel">
+        <div class="viewer-photo__images">
+            <Image
+                class="photo"
+                id={currentPhoto.image.id}
+                alt={currentPhoto.title}
+                sizeKey="photo-list"
+                sizes={{
+                    small: { width: 500 },
+                    medium: { width: 850 },
+                    large: { width: 1280 },
+                }}
+                ratio={1.5}
+            />
 
-<h2>Location</h2>
-<p>{location.name}, {location.country.name}</p>
-<span style="vertical-align: middle;">&middot;</span>
-<time class="text-date" datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>
-    {dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}
-</time>
+            <div class="viewer-photo__controls">
+                <ButtonCircle on:click={goToPrevious}>
+                    <IconArrow
+                        color="pink"
+                        flip={true}
+                    />
+                </ButtonCircle>
+                <ButtonCircle on:click={goToPrevious}>
+                    <IconArrow
+                        color="pink"
+                    />
+                </ButtonCircle>
+            </div>
 
-<button on:click={goToPrevious}>Previous</button>
-<button on:click={goToNext}>Next</button>
+            <p class="viewer-photo__index title-index">{currentIndex + 1}</p>
+        </div>
 
-<Image
-    id={currentPhoto.image.id}
-    alt={currentPhoto.title}
-    sizeKey="photo-list"
-    sizes={{
-        small: { width: 500 },
-        medium: { width: 850 },
-        large: { width: 1280 },
-    }}
-    ratio={1.5}
-/>
 
-<p>index: {currentIndex + 1}</p>
+        <div class="viewer-photo__info">
+            <h1 class="title-medium">{currentPhoto.title}</h1>
+
+            <div class="detail text-date">
+                <img src="/images/icons/map-pin.svg" alt=""><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
+            </div>
+        </div>
+    </div>
+</main>
 
 
 <script context="module" lang="ts">