Add: New search page

components/ui/TextInput.vue

@@ -1,5 +1,10 @@
 <template>
-  <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="px-2 py-1 bg-bg border border-gray-600 outline-none rounded-sm" :class="disabled ? 'text-gray-300' : 'text-white'" @keyup="keyup" />
+  <div class="relative">
+    <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none" :class="inputClass" @keyup="keyup" />
+    <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
+      <span class="material-icons text-lg">{{ prependIcon }}</span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -8,7 +13,24 @@ export default {
     value: [String, Number],
     placeholder: String,
     type: String,
-    disabled: Boolean
+    disabled: Boolean,
+    borderless: Boolean,
+    bg: {
+      type: String,
+      default: 'bg'
+    },
+    rounded: {
+      type: String,
+      default: 'sm'
+    },
+    prependIcon: {
+      type: String,
+      default: null
+    },
+    textSize: {
+      type: String,
+      default: 'lg'
+    }
   },
   data() {
     return {}
@@ -21,6 +43,17 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
+    },
+    inputClass() {
+      var classes = [`bg-${this.bg}`, `rounded-${this.rounded}`, `text-${this.textSize}`]
+      if (this.disabled) classes.push('text-gray-300')
+      else classes.push('text-white')
+
+      if (this.prependIcon) classes.push('pl-10 pr-2')
+      else classes.push('px-2')
+
+      if (!this.borderless) classes.push('border border-gray-600')
+      return classes.join(' ')
     }
   },
   methods: {