refactor: ♻️ split up App.vue into separate components

src/components/NsfwSwitch.vue

@@ -0,0 +1,112 @@
+<template>
+  <label class="nsfw-switch" for="nsfw-switch">
+    <div>😇</div>
+    <div class="toggle-wrap">
+      <input
+        v-model="$parent.$parent.nsfw"
+        type="checkbox"
+        name="nsfw"
+        id="nsfw-switch"
+      />
+      <div class="toggle"></div>
+    </div>
+    <div>😈</div>
+  </label>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="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;
+
+  > div {
+    flex: 0 1 33%;
+    align-self: center;
+    line-height: 1;
+    text-align: center;
+  }
+
+  .toggle-wrap {
+    margin: 0 0.5em;
+  }
+
+  .toggle {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 26px;
+    background-color: #e6e6e6;
+    border-radius: 23px;
+    vertical-align: text-bottom;
+    transition: all 0.3s linear;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 42px;
+      height: 22px;
+      background-color: #fff;
+      border-radius: 11px;
+      transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
+      transition: all 0.25s linear;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      background-color: #fff;
+      border-radius: 11px;
+      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
+      transform: translate3d(2px, 2px, 0);
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  &:active {
+    .toggle::after {
+      width: 28px;
+      transform: translate3d(2px, 2px, 0);
+    }
+
+    input {
+      &:checked + .toggle::after {
+        transform: translate3d(16px, 2px, 0);
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+
+    &:checked + .toggle {
+      background-color: #4bd763;
+
+      &::before {
+        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
+      }
+
+      &::after {
+        transform: translate3d(22px, 2px, 0);
+      }
+    }
+  }
+}
+</style>