feat: layouting form and linting elements

src/components/Button.vue

@@ -3,7 +3,7 @@
 
 <template>
   <button class="primary">
-        Sign in
+    <slot />
   </button>
 </template>
 

src/components/ContextCreate.vue

@@ -29,6 +29,11 @@ const formSchema = [{
   label: "Server address",
   name: "server-address",
   as: "input",
+}, {
+  label: "Choose a zod schema for data",
+  name: "types",
+  as: "input",
+  asType: "file",
 }, {
   label: "Price (per request)",
   name: "price",
@@ -61,5 +66,32 @@ const formSchema = [{
 form {
     display: grid;
     color: var(--primary);
+    background: var(--darken);
+    width: 30vw;
+    gap: 20px;
+    padding: 20px 40px;
+}
+
+form > h3 {
+    font-size: 24px;
+    justify-self: center;
+}
+
+div.form-field {
+    font-size: 16px;
+    display: inline-grid;
+    gap: 5px;
+}
+
+div.form-field:has(input[type='radio']) {
+    justify-content: start;
+    grid-template-areas: "b a";
+    gap: 10px;
+    & :deep(input) {
+        grid-area: b;
+    }
+    & :deep(label) {
+        grid-area: a;
+    }
 }
 </style>

src/components/DynamicForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from "vue"
 import Input from "@/components/Input.vue"
+import Textarea from "@/components/Textarea.vue"
 
 const props = defineProps<{
   schema: object
@@ -10,16 +11,19 @@ const field = reactive(props.schema)
 </script>
 
 <template>
+  <div class="form-field">
     <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
+    <Textarea
       v-if="field.as === 'textarea'"
+      maxlength="250"
       :name="field.name"
     />
+  </div>
 </template>
 
 <style scoped>

src/components/Input.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+const inputModel = defineModel()
+</script>
+
 <template>
-    <input class="test" />
+  <input v-model="inputModel">
 </template>
+
+<style scoped>
+@import url("@/styles/components/inputs.css")
+</style>

src/components/Search.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-    import CarbonArrowRight from '@/icons/CarbonArrowRight.vue'
-    import CarbonRecentlyView from '@/icons/CarbonRecentlyViewed.vue'
+import CarbonArrowRight from "@/icons/CarbonArrowRight.vue"
+import CarbonRecentlyView from "@/icons/CarbonRecentlyViewed.vue"
 </script>
 
 <template>
@@ -9,7 +9,7 @@
       <span class="search__context-title"> context: </span>
       <span class="search__context-item"> global </span>
     </div>
-        <input type="search" />
+    <input type="search">
     <div class="search__buttons">
       <CarbonRecentlyView class="icon" />
       <CarbonArrowRight class="icon" />

src/components/Textarea.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const inputModel = defineModel()
+</script>
+
+<template>
+  <textarea v-model="inputModel" />
+</template>
+
+<style scoped>
+@import url("@/styles/components/inputs.css");
+
+textarea {
+    resize: none;
+}
+</style>

src/pages/create-context.astro

@@ -7,3 +7,9 @@ import ContextCreate from "@/components/ContextCreate.vue"
     <ContextCreate />
 </Default>
 
+<style>
+:global(main) {
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/styles/components/inputs.css

@@ -0,0 +1,9 @@
+input, textarea {
+  background: var(--black);
+  outline: 0;
+  border: 1px solid var(--shadow);
+  padding: 0.5rem 0.75rem;
+  &:hover {
+    border: 1px solid var(--accent);
+  }
+}