From 9cca8273479c9b24ae1f7e231675cb82ff50a3fc Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 6 Jan 2022 18:58:39 +0100
Subject: [PATCH] refactor: use gallery component proper

---
 src/views/Clothing.vue | 147 +++++++++++++++++++++++++++--------------
 1 file changed, 99 insertions(+), 48 deletions(-)

diff --git a/src/views/Clothing.vue b/src/views/Clothing.vue
index 66b3794..58612ed 100644
--- a/src/views/Clothing.vue
+++ b/src/views/Clothing.vue
@@ -2,70 +2,120 @@
   <prose>
     <h2>Clothing Styles</h2>
 
-    <h3>Casual Wear</h3>
     <ref-gallery>
-      <figure>
-        <img src="@/assets/refs/clothes/casual/fullbody.png" alt="Full Body" />
-        <figcaption>
+      <ref-figure polaroidBorder>
+        <template #img>
+          <img
+            src="@/assets/refs/clothes/casual/fullbody.png"
+            alt="Sebin in his casual outfit"
+          />
+        </template>
+
+        <template #caption>
+          <p>Sebin in his casual outfit</p>
           <p>
             Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers
           </p>
-          <p>
-            By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
-          </p>
-        </figcaption>
-      </figure>
-    </ref-gallery>
+        </template>
 
-    <h3>Cold Weather</h3>
-    <ref-gallery>
-      <figure>
-        <img src="@/assets/refs/clothes/cold/fullbody.png" alt="Full Body" />
-        <figcaption>
+        <template #copyright
+          ><a href="https://twitter.com/coffeerelated"
+            >coffeerelated</a
+          ></template
+        >
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img
+          ><img
+            src="@/assets/refs/clothes/cold/fullbody.png"
+            alt="Sebin in his cold weather outfit"
+        /></template>
+
+        <template #caption>
+          <p>Sebin in his cold weather outfit</p>
           <p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
-          <p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></p>
-        </figcaption>
-      </figure>
-    </ref-gallery>
+        </template>
 
-    <h3>Workout</h3>
-    <ref-gallery>
-      <figure>
-        <img src="@/assets/refs/clothes/workout/fullbody.png" alt="Full Body" />
-        <figcaption>
+        <template #copyright
+          ><a href="https://twitter.com/lara_belem_">Lara Belém</a></template
+        >
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img
+          ><img
+            src="@/assets/refs/clothes/workout/fullbody.png"
+            alt="Sebin in his workout outfit"
+        /></template>
+
+        <template #caption>
+          <p>Sebin in his workout outfit</p>
           <p>
             <strong>Full body:</strong> Snapback hat, tank top, fingerless
             gloves, shorts, sneakers
           </p>
-          <p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
-        </figcaption>
-      </figure>
-      <figure>
-        <img src="@/assets/refs/clothes/workout/closeup.jpg" alt="Close-up" />
-        <figcaption>
+        </template>
+
+        <template #copyright
+          ><a href="https://twitter.com/turquoize_art">Atlas</a></template
+        >
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img
+          ><img
+            src="@/assets/refs/clothes/workout/closeup.jpg"
+            alt="Sebin in his workout outfit"
+        /></template>
+
+        <template #caption>
+          <p>Sebin in his workout outfit</p>
           <p>
             <strong>Close-up:</strong> Snapback hat, headphones, tank top,
             fingerless gloves, shorts, smartwatch
           </p>
-          <p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
-        </figcaption>
-      </figure>
-    </ref-gallery>
+        </template>
 
-    <h3>"Doesn't need to leave the house today" Style</h3>
-    <ref-gallery>
-      <figure>
-        <img src="@/assets/refs/clothes/lazy/pants.jpg" alt="Tank Top" />
-        <figcaption>
-          <p>Tracksuit pants (optional)</p>
-        </figcaption>
-      </figure>
-      <figure>
-        <img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts" />
-        <figcaption>
+        <template #copyright
+          ><a href="https://twitter.com/purpledragonrei">Rei</a></template
+        >
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img
+          ><img
+            src="@/assets/refs/clothes/lazy/pants.jpg"
+            alt="Tracksuit pants"
+        /></template>
+
+        <template #caption>
+          <p>Tracksuit pants</p>
+          <p>
+            Sebin likes to wear comfortable clothes at home when he doesn't need
+            to leave the house or is enjoying some leisure time after work or on
+            weekends.
+          </p>
+        </template>
+
+        <!-- <template #copyright></template> -->
+      </ref-figure>
+
+      <ref-figure polaroidBorder>
+        <template #img>
+          <img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts"
+        /></template>
+
+        <template #caption>
           <p>Topless w/ jockstrap/boxer briefs</p>
-        </figcaption>
-      </figure>
+          <p>
+            For even more comfort, Sebin tends to forgoe pants completely and
+            save on laundry by only wearing the absolute necessary.
+          </p>
+        </template>
+
+        <!-- <template #copyright></template> -->
+      </ref-figure>
     </ref-gallery>
   </prose>
 </template>
@@ -73,9 +123,10 @@
 <script>
 import Prose from "@/components/Prose.vue";
 import RefGallery from "@/components/Gallery.vue";
+import RefFigure from "@/components/Figure.vue";
 
 export default {
-  components: { Prose, RefGallery },
+  components: { Prose, RefGallery, RefFigure },
 };
 </script>