zetaloop
28 lines
791 B
TypeScript
28 lines
791 B
TypeScript
import type * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Input } from "./input"
|
|
|
|
interface IconInputProps extends React.ComponentProps<"input"> {
|
|
icon?: React.ReactNode
|
|
rightElement?: React.ReactNode
|
|
}
|
|
|
|
function IconInput({ icon, rightElement, className, ...props }: IconInputProps) {
|
|
return (
|
|
<div className="relative">
|
|
{icon && (
|
|
<div className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:size-4">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<Input className={cn(icon && "pl-10", rightElement && "pr-10", className)} {...props} />
|
|
{rightElement && (
|
|
<div className="absolute right-3 top-1/2 -translate-y-1/2">{rightElement}</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { IconInput }
|