FEAT: backup & restore 1

src/components/terminal.vue

@@ -0,0 +1,25 @@
+<script>
+  export default {
+    props: {
+      terminalContent: {
+        required: true,
+        type: String,
+      }
+    },
+  }
+</script>
+
+<template>
+  <div class="bg-slate-900 flex-row rounded-xl w-4/5 md:w-96 max-w-full md:min-w-max h-56 md:z-10 -mb-8 md:-mb-0">
+      <div class="p-3 flex justify-between w-20">
+        <div class="bg-green-400 h-4 w-4 r-1 rounded-full"></div>
+        <div class="bg-yellow-300 h-4 w-4 r-1 rounded-full"></div>
+        <div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
+      </div>
+      <div class="flex h-4/5">
+        <code class="w-full text-white font-mono text-xs md:text-base p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
+          {{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
+        </code>
+      </div>
+    </div>
+</template>