Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 2x 18x 9x 9x 4x 4x 18x 2x | import * as React from "react";
import { cn } from "@/lib/utils";
import { SendHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
export interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
onSubmit?: () => void;
inputTestId?: string;
buttonTestId?: string;
}
export const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
(
{
className,
onSubmit,
inputTestId,
buttonTestId,
disabled,
onKeyDown,
...props
},
ref,
) => {
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (onKeyDown) onKeyDown(e as any);
if (e.key === "Enter") {
e.preventDefault();
if (!disabled && onSubmit) onSubmit();
}
};
return (
<div className={cn("w-full", className)}>
<div className="flex items-center w-full rounded-md border border-border bg-input overflow-hidden transition-colors duration-150 focus-within:ring-0 focus-within:outline-none">
<input
ref={ref}
{...props}
data-testid={inputTestId}
onKeyDown={handleKeyDown}
className={cn(
"flex-1 bg-transparent px-3 py-2 text-ui-md placeholder-muted-foreground text-foreground focus:outline-none",
"rounded-none border-0",
)}
style={{
fontSize: "var(--ui-font-size)",
lineHeight: "var(--ui-line-height)",
height: "var(--ui-button-height)",
}}
/>
<Button
type="button"
onClick={onSubmit}
size="sm"
disabled={disabled}
data-testid={buttonTestId}
className={cn(
"h-[var(--ui-button-height)] w-[var(--ui-button-height)] p-0 flex items-center justify-center transition-colors duration-150 rounded-none",
disabled
? "bg-background text-muted-foreground"
: "bg-green-600 hover:bg-green-700 text-white",
// remove default border so edges flush
"border-0",
)}
>
<SendHorizontal className="h-4 w-4" />
</Button>
</div>
</div>
);
},
);
InputGroup.displayName = "InputGroup";
export default InputGroup;
|