zetaloop
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
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
|
|
inputSize?: "default" | "lg"
|
|
}
|
|
|
|
function IconInput({
|
|
icon,
|
|
rightElement,
|
|
inputSize = "default",
|
|
className,
|
|
...props
|
|
}: IconInputProps) {
|
|
const isLg = inputSize === "lg"
|
|
return (
|
|
<div className="relative">
|
|
{icon && (
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground",
|
|
isLg ? "left-4 [&_svg]:size-5" : "left-3 [&_svg]:size-4",
|
|
)}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<Input
|
|
className={cn(
|
|
isLg && "h-12 rounded-xl text-base",
|
|
icon && (isLg ? "pl-12" : "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 }
|