💄 (design system) add form input to custom design system

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']

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>