46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Input } from "../input";
|
|
import { Label } from "../label";
|
|
import { useId } from "react";
|
|
|
|
interface TextInputProps extends React.ComponentProps<typeof Input> {
|
|
label?: string;
|
|
}
|
|
|
|
function TextInput({ className, label, ...props }: TextInputProps) {
|
|
const id = useId();
|
|
const inputId = props.id || id;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{label && (
|
|
<Label
|
|
htmlFor={inputId}
|
|
className="text-muted-foreground font-inter font-medium text-base"
|
|
>
|
|
{label}
|
|
</Label>
|
|
)}
|
|
<Input
|
|
data-slot="text-input"
|
|
className={cn(
|
|
"py-3.5 px-4",
|
|
"font-inter text-[18px]/[28px] font-semibold text-foreground",
|
|
"placeholder:text-muted-foreground placeholder:text-[18px]/[28px] font-medium",
|
|
"border-2 border-primary/30 rounded-2xl",
|
|
className
|
|
)}
|
|
id={inputId}
|
|
{...props}
|
|
/>
|
|
{props["aria-invalid"] && (
|
|
<p className="text-destructive font-inter font-medium text-xs">
|
|
{props["aria-errormessage"]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { TextInput };
|