gitea

frontend/components/ui/input.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string
+    error?: string
+    hint?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, label, error, hint, id, ...props }, ref) => {
+        const inputId = id || React.useId()
+
+        return (
+            <div className="w-full">
+                {label && (
+                    <label
+                        htmlFor={inputId}
+                        className="mb-1.5 block text-sm font-medium text-foreground"
+                    >
+                        {label}
+                    </label>
+                )}
+                <input
+                    type={type}
+                    id={inputId}
+                    className={cn(
+                        "flex h-10 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+                        error && "border-destructive focus-visible:ring-destructive",
+                        className
+                    )}
+                    ref={ref}
+                    {...props}
+                />
+                {hint && !error && (
+                    <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
+                )}
+                {error && (
+                    <p className="mt-1 text-xs text-destructive">{error}</p>
+                )}
+            </div>
+        )
+    }
+)
+Input.displayName = "Input"
+
+export { Input }