Update input UI

web/.eslintrc.json

@@ -13,7 +13,7 @@
         "v3xlabs"
     ],
     "env": {
-        "node": true
+        "browser": true
     },
     "rules": {}
 }

web/src/components/ui/Input.tsx

@@ -0,0 +1,36 @@
+import { cx } from 'class-variance-authority';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef, useId } from 'react';
+
+type InputProperties = InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = forwardRef<HTMLInputElement, InputProperties>(
+    ({ className, 'aria-label': ariaLabel, ...properties }, reference) => {
+        const labelId = useId();
+
+        return (
+            <>
+                <label
+                    className="flex flex-col gap-1"
+                    id={'l' + labelId}
+                    htmlFor={'i' + labelId}
+                >
+                    <span className="text-sm text-text-secondary">
+                        {ariaLabel}
+                    </span>
+                    <input
+                        ref={reference}
+                        aria-label={ariaLabel}
+                        aria-labelledby={'l' + labelId}
+                        id={'i' + labelId}
+                        className={cx(
+                            'text-base font-sans px-2 py-1',
+                            className
+                        )}
+                        {...properties}
+                    />
+                </label>
+            </>
+        );
+    }
+);

web/src/routes/configure/_layout.instance/index.tsx

@@ -1,5 +1,16 @@
 import { createFileRoute } from '@tanstack/react-router';
 
+import { Button } from '../../../components/ui/Button';
+import { Input } from '../../../components/ui/Input';
+
 export const Route = createFileRoute('/configure/_layout/instance/')({
-    component: () => <div>Hello /configure/instance/!</div>,
+    component: () => (
+        <div className="space-y-2 flex flex-col">
+            <Input
+                placeholder="http://localhost:8000"
+                aria-label="Instance URL"
+            />
+            <Button>Save</Button>
+        </div>
+    ),
 });