finish rename feature

src/components/Schema.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="text" placeholder="Search table"/>
+    <text-field placeholder="Search table" width="100%"/>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
         <svg
@@ -50,10 +50,11 @@
 
 <script>
 import TableDescription from '@/components/TableDescription'
+import TextField from '@/components/TextField'
 
 export default {
   name: 'Schema',
-  components: { TableDescription },
+  components: { TableDescription, TextField },
   data () {
     return {
       schemaVisible: true,

src/components/TextField.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div :class="['text-field-label', { error: errorMsg }]">{{ label }}</div>
+    <input
+      type="text"
+      :placeholder="placeholder"
+      :class="{ error: errorMsg }"
+      :style="{ width: width }"
+      :value="value"
+      @input="$emit('input',  $event.target.value)"
+    />
+    <div class="text-field-error">{{ errorMsg }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'textField',
+  props: ['placeholder', 'label', 'errorMsg', 'value', 'width']
+}
+</script>
+
+<style scoped>
+input {
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-base);
+  border-radius: var(--border-radius-medium-2);
+  height: 36px;
+  padding: 0 8px;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+input::placeholder {
+  color: var(--color-text-light-2);
+}
+
+input:focus {
+  outline: none;
+}
+
+input.error {
+  border-color: var(--color-text-error);
+}
+.text-field-label {
+  font-size: 12px;
+  color: var(--color-text-base);
+  padding-left: 8px;
+  margin-bottom: 2px;
+}
+
+.text-field-label.error {
+  color: var(--color-text-error);
+}
+
+.text-field-error {
+  color: var(--color-text-error);
+  font-size: 12px;
+  padding-left: 8px;
+  margin-top: 2px;
+}
+</style>

src/components/svg/close.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg @click.stop="$emit('click')" class="icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#A2B1C6"/>
   </svg>
 </template>
@@ -9,3 +9,12 @@ export default {
   name: 'CloseIcon'
 }
 </script>
+
+<style scoped>
+.icon {
+  cursor: pointer;
+}
+.icon:hover path {
+  fill: var(--color-text-active);
+}
+</style>