feat: add input

src/shared/ui/input/input.tsx

@@ -1,22 +1,69 @@
+'use client';
+
 import s from './input.module.scss';
-import { clsx } from 'clsx';
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 
-type InputProps = {
-  outerClassName?: string;
-  variant?: 'default' | 'outlined';
-} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+import React, { InputHTMLAttributes, useState } from 'react';
+import clsx from 'clsx';
 
-export default function input({
-  outerClassName,
-  variant = 'default',
+type InputPropsType = {
+  className?: string;
+  placeholder: string;
+  errorMessage?: string | boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const Input = ({
+  placeholder,
+  errorMessage,
+  disabled,
+  className,
+  onChange,
   ...props
-}: InputProps) {
+}: InputPropsType) => {
+  const [onFocus, setOnFocus] = useState(false);
+
+  const hasValue =
+    typeof props.value === 'string'
+      ? props.value.length > 0
+      : props.value !== undefined && props.value !== null;
+
   return (
-    <div
-      className={clsx(s.Container, s['Container_' + variant], outerClassName)}
-    >
-      <input {...props} className={clsx(s.Input, s['Input_' + variant])} />
+    <div>
+      <div
+        className={clsx(s.input, className, {
+          [s['input--error']]: !!errorMessage,
+        })}
+      >
+        <label
+          className={clsx(s.input__placeholder, {
+            [s.input__placeholder_active]: hasValue || onFocus,
+          })}
+        >
+          {placeholder}
+        </label>
+        <input
+          {...props}
+          onChange={onChange}
+          onFocus={(event) => {
+            if (typeof props.onFocus !== 'undefined') {
+              props.onFocus(event);
+            }
+            setOnFocus(true);
+          }}
+          onBlur={(event) => {
+            if (typeof props.onBlur !== 'undefined') {
+              props.onBlur(event);
+            }
+            setOnFocus(false);
+          }}
+          disabled={disabled}
+          className={clsx(s.input__self, { [s['input--disabled']]: disabled })}
+        />
+      </div>
+      {errorMessage && (
+        <span className={s.input__errorMessage}>{errorMessage}</span>
+      )}
     </div>
   );
-}
+};
+
+export default Input;