feat: improve app ui and project metadata

apps/web/components/ui/Field.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+import {
+  cn,
+  fieldErrorClass,
+  fieldHelpClass,
+  fieldLabelClass,
+} from "@/lib/ui/variants";
+
+interface FieldProps {
+  label: string;
+  children: ReactNode;
+  htmlFor?: string;
+  help?: ReactNode;
+  error?: ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+export function Field({
+  label,
+  children,
+  htmlFor,
+  help,
+  error,
+  required = false,
+  className,
+}: FieldProps) {
+  const labelText = required ? `${label} *` : label;
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      <label htmlFor={htmlFor} className={fieldLabelClass()}>
+        {labelText}
+      </label>
+      {children}
+      {error ? <p className={fieldErrorClass()}>{error}</p> : null}
+      {!error && help ? <p className={fieldHelpClass()}>{help}</p> : null}
+    </div>
+  );
+}