refactor: migrate Figure component

src/components/RefFigure.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { nsfwKey, showModalKey } from "@/keys";
+import RefToggle from "@/components/RefToggle.vue";
+
+interface Props {
+  polaroidBorder?: boolean;
+  dropshadow?: boolean;
+  nsfw?: boolean;
+  id: string;
+}
+
+const isNsfw = inject<boolean>(nsfwKey, false);
+const showModal = inject<Function>(showModalKey, Function);
+
+defineProps<Props>();
+</script>
+
+<template>
+  <figure class="figure">
+    <div
+      class="figure__border"
+      :class="{ 'figure__border--polaroid': polaroidBorder }"
+    >
+      <template v-if="!nsfw || isNsfw">
+        <div
+          class="figure__image"
+          :class="{ 'figure__image--dropshadow': dropshadow }"
+        >
+          <slot name="img"></slot>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="figure__cencor">
+          <div class="figure__tape"></div>
+          <div class="figure__tape"></div>
+          <div class="figure__tape"></div>
+          <div class="figure__tape"></div>
+
+          <div class="figure__reveal">
+            <p>🔥 Here be spicy dragons 🌶</p>
+
+            <RefToggle
+              class="figure__toggle"
+              :id="id"
+              v-model="isNsfw"
+              @click.prevent="showModal()"
+            >
+              <template #off>😇</template>
+              <template #on>😈</template>
+            </RefToggle>
+          </div>
+        </div>
+      </template>
+
+      <figcaption class="figure__meta">
+        <template v-if="!nsfw || isNsfw">
+          <div class="caption">
+            <slot name="caption"></slot>
+          </div>
+          <div class="copyright">© <slot name="copyright"></slot></div>
+        </template>
+
+        <template v-else>
+          <p>😳 2 hot 4 u 🍆</p>
+        </template>
+      </figcaption>
+    </div>
+  </figure>
+</template>
+
+<style lang="scss">
+.figure {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  text-align: center;
+
+  margin: 1em auto;
+  padding: 0 var(--container-spacing-right-safe) 0
+    var(--container-spacing-left-safe);
+
+  &__border {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+
+    margin: auto;
+
+    &--polaroid {
+      margin: 1em auto;
+      padding: 1em;
+
+      box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.7), 0 0 1em rgba(0, 0, 0, 0.7);
+      border-radius: 0.325em;
+
+      background-color: #fff;
+    }
+  }
+
+  &__border--polaroid &__meta {
+    font-family: "Permanent Marker", fantasy;
+    color: var(--color-figure-polaroid-text);
+
+    max-width: 35rem;
+
+    margin: 0.5rem auto;
+
+    * {
+      color: inherit;
+    }
+  }
+
+  &__image {
+    flex: 1 0 auto;
+
+    &--dropshadow {
+      filter: drop-shadow(0.5rem 0.25rem 0.375rem #000);
+    }
+
+    img {
+      max-width: 100%;
+      max-height: 35rem;
+    }
+  }
+
+  &__meta {
+    flex: 0 0 auto;
+  }
+
+  &__cencor {
+    flex: 1 0 auto;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0;
+    width: var(--figure-cencor-width);
+    height: var(--figure-cencor-height);
+    max-width: 35rem;
+    max-height: 70rem;
+    position: relative;
+
+    background-color: var(--figure-cencor-background-color);
+    overflow: hidden;
+  }
+
+  &__toggle {
+    position: relative;
+    padding: 0;
+  }
+
+  &__tape {
+    position: absolute;
+    left: -1rem;
+    right: -1rem;
+    top: 0;
+    transform: rotate(0deg);
+    height: 1rem;
+    background-image: repeating-linear-gradient(
+      -55deg,
+      #000,
+      #000 0.75rem,
+      #ffb101 0.75rem,
+      #ffb101 1.5rem
+    );
+
+    &:nth-child(1) {
+      top: 10%;
+      transform: rotate(5deg);
+    }
+
+    &:nth-child(2) {
+      top: 15%;
+      transform: rotate(-10deg);
+    }
+
+    &:nth-child(3) {
+      top: 75%;
+      transform: rotate(-15deg);
+    }
+
+    &:nth-child(4) {
+      top: 85%;
+      transform: translate(-5rem, -2rem) rotate(40deg);
+    }
+  }
+}
+</style>