refactor: migrate NsfwSwitch component

src/components/NsfwSwitch.vue

@@ -1,115 +0,0 @@
-<template>
-  <label class="nsfw-switch" :for="id">
-    <div class="nsfw-switch__label">😇</div>
-    <div class="nsfw-switch__toggle">
-      <input
-        :checked="modelValue"
-        @change="$emit('update:modelValue', $event.target.checked)"
-        type="checkbox"
-        name="nsfw"
-        :id="id"
-      />
-      <div class="nsfw-switch__toggle-inner"></div>
-    </div>
-    <div class="nsfw-switch__label">😈</div>
-  </label>
-</template>
-
-<script>
-export default {
-  props: {
-    modelValue: Boolean,
-    id: { type: String, required: true },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "@/scss/_variables.scss";
-
-.nsfw-switch {
-  font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
-    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
-    "segoe ui symbol";
-
-  padding: 0.5em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-
-  &__label,
-  &__toggle {
-    flex: 0 1 auto;
-    align-self: center;
-    line-height: 1;
-    text-align: center;
-  }
-
-  &__toggle {
-    margin: 0 0.5em;
-
-    & input:checked + &-inner {
-      background-color: $sebin-primary;
-
-      &:before {
-        transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
-      }
-
-      &:after {
-        transform: translate3d(1.1em, 0.1em, 0);
-      }
-    }
-  }
-
-  &__toggle-inner {
-    position: relative;
-    display: inline-block;
-    width: 2.3em;
-    height: 1.3em;
-    background-color: #e6e6e6;
-    border-radius: 1.15em;
-    vertical-align: text-bottom;
-    transition: all 0.3s linear;
-
-    &:before,
-    &:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      height: 1.1em;
-      background-color: #fff;
-      border-radius: 0.55em;
-    }
-
-    &:before {
-      width: 2.1em;
-      transform: translate3d(0.1em, 0.1em, 0) scale3d(1, 1, 1);
-      transition: all 0.25s linear;
-    }
-
-    &:after {
-      width: 1.1em;
-      box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24);
-      transform: translate3d(0.1em, 0.1em, 0);
-      transition: all 0.2s ease-in-out;
-    }
-  }
-
-  input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &:active &__toggle-inner:after {
-    width: 1.4em;
-    transform: translate3d(0.1em, 0.1em, 0);
-  }
-
-  &:active input:checked + &__toggle-inner:after {
-    transform: translate3d(0.8em, 0.1em, 0);
-  }
-}
-</style>