From 70ebc77f843207a1d4b46c8d960dafbff37e7e2e Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Fri, 17 Jan 2025 13:42:21 +0000
Subject: Initial commit

---
 components/Input.vue | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 components/Input.vue

(limited to 'components/Input.vue')

diff --git a/components/Input.vue b/components/Input.vue
new file mode 100644
index 0000000..4d95700
--- /dev/null
+++ b/components/Input.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+export default {
+  name: 'CustomInput',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    autocomplete: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'text',
+    },
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    modelValue: {
+      type: [String, Number],
+      required: false,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    inputClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <input
+    :id="id"
+    :type="type"
+    :name="name"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target! as any).value)"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="required"
+  />
+</template>
+
+<style>
+input {
+  appearance: none;
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem; 
+  border: 1px solid #d1d5db; 
+  border-radius: 0.375rem; 
+  box-sizing: border-box;
+  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  */
+  color: var(--color-text); 
+  font-size: var(--text-small); 
+}
+
+input::placeholder {
+  color: #9ca3af; 
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--color-accent); 
+  /* box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);  */
+}
+</style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2