From b9b70d403f876ceee49b7ba463f2ea5fae7279ee Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 26 Sep 2022 17:26:04 +0200
Subject: [PATCH] feat: add RefImage component

---
 src/components/RefImage.vue | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/RefImage.vue

diff --git a/src/components/RefImage.vue b/src/components/RefImage.vue
new file mode 100644
index 0000000..26c76b6
--- /dev/null
+++ b/src/components/RefImage.vue
@@ -0,0 +1,30 @@
+<template>
+  <figure class="figure">
+    <picture class="figure__image">
+      <slot></slot>
+    </picture>
+
+    <figcaption class="figure__caption">
+      <slot name="caption"></slot>
+    </figcaption>
+  </figure>
+</template>
+
+<style lang="scss">
+.figure {
+  max-width: var(--container-width-images);
+  margin: 0 auto;
+
+  &__image {
+    filter: drop-shadow(0.5rem 0.25rem 0.375rem #000);
+  }
+
+  &__caption {
+    text-align: center;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+</style>