initiation librodrome

app/components/admin/AdminFieldText.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="field">
+    <label :for="id" class="field-label">{{ label }}</label>
+    <input
+      :id="id"
+      :value="modelValue"
+      type="text"
+      class="field-input"
+      :placeholder="placeholder"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  modelValue: string
+  placeholder?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-')}`)
+</script>
+
+<style scoped>
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: hsl(20 8% 60%);
+}
+
+.field-input {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(20 8% 18%);
+  background: hsl(20 8% 6%);
+  color: white;
+  font-size: 0.875rem;
+  transition: border-color 0.2s;
+}
+
+.field-input:focus {
+  outline: none;
+  border-color: hsl(12 76% 48% / 0.5);
+}
+</style>