input

Author: Prafful Kumar

src/App.tsx

@@ -1,4 +1,5 @@
 import Button from "./components/Button";
+import Input from "./components/Input";
 
 function App() {
     return (
@@ -7,16 +8,26 @@ function App() {
                 // background: 'rgb(47 116 192)',
                 height: '100vh',
                 padding: '20px',
+                display: 'flex',
+                flexDirection: 'column',
+                width: '20%',
             }}
         >
             <Button
                 raise
             >
                 Click me please
-            </Button><br /><br />
+            </Button>
+            <br />
             <Button>
                 Hello
             </Button>
+            <br />
+            <Input
+                placeholder="Input"
+                error="This field is required."
+            />
+            <br />
         </div>
     );
 }

src/components/Button.tsx

@@ -43,14 +43,17 @@ function Button({
         letter-spacing: 0.3px;
         text-transform: ${uppercase ? 'uppercase' : ''};
         cursor: pointer;
+        
         &:focus{
             outline: none;
         }
+        
         &:active{
             outline: none;
             box-shadow: 0 3px 0 rgb(9 30 66 / 10 %);
             top: 3px;
         }
+        
         &:hover{
             box-shadow: ${boxShadow ? '0 3px 5px rgb(9 30 66 / 10%), 0 0 1px rgb(9 30 66 / 31%)' : ''};
             transform: ${raise ? 'translate3d(0px, -2px, 0px)' : 'none'};
@@ -65,4 +68,5 @@ function Button({
         </StyledButton>
     )
 }
+
 export default Button;

src/components/Input.tsx

@@ -0,0 +1,49 @@
+import { InputHTMLAttributes } from "react";
+import styled from "styled-components";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    error?: string,
+}
+
+function Input({
+    error,
+    ...props
+}: Props) {
+    const StyledInput = styled.input`
+        padding: 8px;
+        border: none;
+        background: #fff;
+        border: 1px solid ${error ? 'red' : '#c8c8c8'};
+        letter-spacing: 0.3px;
+        line-height: 1;
+        &:focus{
+            outline: none;
+        }
+        &::placeholder{
+            color: #c8c8c8s;
+        }
+    `
+    const ErrorWrapper = styled.small`
+        margin: 5px 0;
+        color: red;
+        font-size: 13px;
+    `
+
+    return (
+        <>
+            <StyledInput
+                {...props}
+            />
+            {
+                error
+                    ?
+                    <ErrorWrapper>
+                        {error}
+                    </ErrorWrapper>
+                    : ''
+            }
+        </>
+    )
+}
+
+export default Input;

src/theme.ts

@@ -1 +1 @@
-export const PRIMARY_COLOR:string='#ff5a5f';
+export const PRIMARY_COLOR: string = "#ff5a5f";