openstatus.dev
Openstatus
www.openstatus.dev
1import * as React from "react";
2
3import { cn } from "../lib/utils";
4
5export interface InputWithAddonsProps
6 extends React.InputHTMLAttributes<HTMLInputElement> {
7 leading?: React.ReactNode;
8 trailing?: React.ReactNode;
9}
10
11const InputWithAddons = React.forwardRef<
12 HTMLInputElement,
13 InputWithAddonsProps
14>(({ leading, trailing, className, ...props }, ref) => {
15 return (
16 <div className="border-input ring-offset-background focus-within:ring-ring group flex h-10 w-full rounded-md border bg-transparent text-sm focus-within:outline-hidden focus-within:ring-2 focus-within:ring-offset-2">
17 {leading ? (
18 <div className="border-input bg-muted border-r px-3 py-2">
19 {leading}
20 </div>
21 ) : null}
22 <input
23 className={cn(
24 "bg-background placeholder:text-muted-foreground w-full rounded-md px-3 py-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
25 className
26 )}
27 ref={ref}
28 {...props}
29 />
30 {trailing ? (
31 <div className="border-input bg-muted border-l px-3 py-2">
32 {trailing}
33 </div>
34 ) : null}
35 </div>
36 );
37});
38InputWithAddons.displayName = "InputWithAddons";
39
40export { InputWithAddons };