(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import React from "react";
2import { clsx } from "clsx";
3
4interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
5 label?: string;
6 error?: string;
7 icon?: React.ReactNode;
8}
9
10export default function Input({
11 label,
12 error,
13 icon,
14 className,
15 ...props
16}: InputProps) {
17 return (
18 <div className="w-full">
19 {label && (
20 <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5">
21 {label}
22 </label>
23 )}
24 <div className="relative">
25 {icon && (
26 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-surface-400 dark:text-surface-500">
27 {icon}
28 </div>
29 )}
30 <input
31 className={clsx(
32 "w-full px-3 py-2 bg-surface-50 dark:bg-surface-800",
33 "border border-surface-200 dark:border-surface-700 rounded-lg",
34 "text-surface-900 dark:text-white",
35 "placeholder:text-surface-400 dark:placeholder:text-surface-500",
36 "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 dark:focus:border-primary-400",
37 "transition-colors text-sm",
38 icon && "pl-10",
39 error && "border-red-500 dark:border-red-400 focus:ring-red-500/20",
40 className,
41 )}
42 {...props}
43 />
44 </div>
45 {error && (
46 <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{error}</p>
47 )}
48 </div>
49 );
50}