add textarea and details card

src/App.vue

@@ -12,21 +12,22 @@
     </v-app-bar>
 
     <v-content>
-      <KeyDetails />
+      <KeyInspector />
     </v-content>
   </v-app>
 </template>
 
 <script>
-import KeyDetails from "./components/KeyDetails";
+import KeyInspector from "./components/KeyInspector";
 
 export default {
   name: "App",
   components: {
-    KeyDetails
+    KeyInspector
   },
-  data: () => ({
-    //
-  })
+  data: () => ({}),
+  created() {
+    this.$vuetify.theme.dark = true;
+  }
 };
 </script>

src/components/KeyDetails.vue

@@ -1,9 +1,14 @@
 <template>
-  <div>Kinspector will start here.</div>
+  <v-card>
+    <v-card-title>Key Details</v-card-title>
+    <v-card-text>Content</v-card-text>
+  </v-card>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style lang="stylus"></style>
+
+<style>
+</style>

src/components/KeyInspector.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <v-textarea
+          outlined
+          autofocus
+          auto-grow
+          rows="10"
+          height="100%"
+          hint="Paste your public key here"
+          label="Public Key"
+        ></v-textarea>
+      </v-col>
+      <v-col>
+        <KeyDetails />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import KeyDetails from "./KeyDetails";
+
+export default {
+  components: {
+    KeyDetails
+  },
+  data: () => ({})
+};
+</script>
+
+<style lang="stylus"></style>