tailwind-ui-library/components/form/Input.tsx
Benjamin Toby f73b56cdc4 Updates
2024-10-17 09:06:54 +01:00

27 lines
817 B
TypeScript

import { DetailedHTMLProps, InputHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
/**
* # Input Element
* @className twui-input
*/
export default function Input({
...props
}: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
return (
<input
{...props}
className={twMerge(
"w-full px-4 py-2 border rounded-md",
"border-slate-300 dark:border-white/20",
"focus:border-slate-700 dark:focus:border-white/50",
"outline-slate-300 dark:outline-white/20",
"focus:outline-slate-700 dark:focus:outline-white/50",
"bg-white dark:bg-black",
"twui-input",
props.className
)}
/>
);
}