From cdd5d8121d552140886714ddc89aef92be44465f Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 27 May 2023 23:04:22 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(design=20system)=20add=20form?=
 =?UTF-8?q?=20input=20to=20custom=20design=20system?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  1 +
 .../design-system/form/FormInput.vue          | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/design-system/form/FormInput.vue

diff --git a/components.d.ts b/components.d.ts
index 963152a..dc643be 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
     CrcCard: typeof import('./src/components/architecture/crc-card.vue')['default']
     CrcProject: typeof import('./src/components/architecture/crc-project.vue')['default']
     ForgettingCurve: typeof import('./src/components/smart-notes/forgetting-curve.vue')['default']
+    FormInput: typeof import('./src/components/design-system/form/FormInput.vue')['default']
     Island: typeof import('./node_modules/.pnpm/iles@0.9.5_rollup@2.79.1_sass@1.62.1/node_modules/iles/dist/client/app/components/Island.vue')['default']
     JulienCalixte: typeof import('./src/components/core/julien-calixte.vue')['default']
     MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
diff --git a/src/components/design-system/form/FormInput.vue b/src/components/design-system/form/FormInput.vue
new file mode 100644
index 0000000..f597ed0
--- /dev/null
+++ b/src/components/design-system/form/FormInput.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+  label: string
+  modelValue: string
+}>()
+defineEmits<{
+  (event: "update:modelValue", value: string): void
+}>()
+</script>
+
+<template>
+  <div class="form-input">
+    <label :for="id">{{ label }}</label>
+    <input
+      type="text"
+      id="id"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target?.value ?? '')"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.form-input {
+  display: flex;
+  gap: 1rem;
+}
+</style>