front/dev

FRONT/DEV/src/components/UI/inputs/input.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+    placeholderText: string;
+    id: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    type?: string;
+    multiple?: boolean;
+    style?: React.CSSProperties;
+    search?: boolean;
+    onFocus?: any
+    onBlur?: any
+    $size?: string
+}
+
+const InputContainer = styled.div`
+    width: 100%;
+    display: flex;
+    flex: 3;
+    
+`;
+
+const StyledInput = styled.input`
+    padding: 8px 10px;
+    color: black;
+    border-radius: 8px;
+    border: 1px solid #A1A1A1;
+    background-color: transparent;
+    &:focus{
+        border: 1px solid #adadad;
+    }
+    width: 100%;
+    font-size: 18px;
+    color: ${props=>props.theme.textColor}
+`;
+
+const Input = React.forwardRef<HTMLInputElement, Props>(({ placeholderText, id, value, onChange, onFileChange, type = "text", multiple, style, onFocus, onBlur }, ref) => {
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target;
+        if (onChange) {
+            onChange(value);
+        }
+    };
+
+    return (
+        <InputContainer>
+            <StyledInput
+                type={type}
+                placeholder={placeholderText}
+                value={value}
+                multiple={multiple}
+                onChange={type === "file" && onFileChange ? onFileChange : handleInputChange}
+                ref={ref}
+                style={style}
+                onFocus={onFocus}
+                onBlur={onBlur}
+            />
+        </InputContainer>
+    );
+});
+
+export default Input;