83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, forwardRef } from "react";
|
|
import { cn } from "@/utils/cn";
|
|
|
|
// Input Component
|
|
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
error?: boolean;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, error, ...props }, ref) => {
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
className={cn(
|
|
"bg-[#0f0f0f] border text-white placeholder-gray-600 rounded-sm px-3 py-2 text-sm transition-colors",
|
|
"focus:outline-none focus:ring-1",
|
|
error
|
|
? "border-red-500/50 focus:border-red-500 focus:ring-red-500/20"
|
|
: "border-[#262626] focus:border-[#1db954]/50 focus:ring-purple-500/20",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = "Input";
|
|
|
|
// Textarea Component
|
|
export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
error?: boolean;
|
|
}
|
|
|
|
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
({ className, error, ...props }, ref) => {
|
|
return (
|
|
<textarea
|
|
ref={ref}
|
|
className={cn(
|
|
"bg-[#0f0f0f] border text-white placeholder-gray-600 rounded-sm px-3 py-2 text-sm resize-none transition-colors",
|
|
"focus:outline-none focus:ring-1",
|
|
error
|
|
? "border-red-500/50 focus:border-red-500 focus:ring-red-500/20"
|
|
: "border-[#262626] focus:border-[#1db954]/50 focus:ring-purple-500/20",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Textarea.displayName = "Textarea";
|
|
|
|
// Select Component
|
|
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
error?: boolean;
|
|
}
|
|
|
|
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
|
({ className, error, children, ...props }, ref) => {
|
|
return (
|
|
<select
|
|
ref={ref}
|
|
className={cn(
|
|
"bg-[#0f0f0f] border text-white rounded-sm px-3 py-2 text-sm appearance-none cursor-pointer transition-colors",
|
|
"focus:outline-none",
|
|
error
|
|
? "border-red-500/50 focus:border-red-500"
|
|
: "border-[#262626] focus:border-[#1db954]/50",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</select>
|
|
);
|
|
}
|
|
);
|
|
|
|
Select.displayName = "Select";
|