feat: setup autoform and create context start wrote

package.json

@@ -11,6 +11,7 @@
     "astro": "^4.16.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "vee-validate": "^4.14.7",
     "viem": "2",
     "wagmi": "^2.13.4"
   },

src/components/ContextCreate.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Form } from "vee-validate"
+import DynamicForm from "@/components/DynamicForm.vue"
+import Button from "@/components/Button.vue"
+
+const formSchema = [{
+  label: "Context name",
+  name: "context-name",
+  as: "input",
+}, {
+  label: "Description",
+  name: "description",
+  as: "textarea",
+}, {
+  title: "Visibility",
+  defaultOption: "privacy",
+  options: [{
+    label: "Privacy",
+    name: "privacy",
+    as: "input",
+    asType: "radio",
+  }, {
+    label: "Public",
+    name: "public",
+    as: "input",
+    asType: "radio",
+  }],
+}, {
+  label: "Server address",
+  name: "server-address",
+  as: "input",
+}, {
+  label: "Price (per request)",
+  name: "price",
+  as: "input",
+}, {
+  label: "Token",
+  name: "token",
+  defaultValue: "DAI",
+  as: "input",
+}]
+</script>
+
+<template>
+  <Form>
+    <h3> Create Context </h3>
+    <template v-for="element in formSchema" :key="element.name">
+      <DynamicForm v-if="element.name" :schema="element" />
+      <template v-else>
+        <span> {{ element.title }} </span>
+        <template v-for="option in element.options" :key="option.name">
+          <DynamicForm :schema="option" />
+        </template>
+      </template>
+    </template>
+    <Button>Create</Button>
+  </Form>
+</template>
+
+<style scoped>
+form {
+    display: grid;
+    color: var(--primary);
+}
+</style>

src/components/DynamicForm.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { reactive } from "vue"
+import Input from "@/components/Input.vue"
+
+const props = defineProps<{
+  schema: object
+}>()
+
+const field = reactive(props.schema)
+</script>
+
+<template>
+  <label v-if="field.label" :for="field.name">{{ field.label }}</label>
+  <Input
+    v-if="field.as === 'input'" :id="field.name"
+    :name="field.name" :type="field.asType || 'text'"
+    :value="field.defaultValue"
+  />
+  <textarea
+    v-if="field.as === 'textarea'"
+    :name="field.name"
+  />
+</template>
+
+<style scoped>
+</style>

src/components/Input.vue

@@ -0,0 +1,3 @@
+<template>
+    <input class="test" />
+</template>

src/pages/create-context.astro

@@ -0,0 +1,9 @@
+---
+import Default from "@/layouts/Default.astro"
+import ContextCreate from "@/components/ContextCreate.vue"
+---
+
+<Default>
+    <ContextCreate />
+</Default>
+