From 40bd12332a8ca5feae40a23d13aad7409ccbd0b2 Mon Sep 17 00:00:00 2001
From: Lucas Constantino Silva <lucasconstantinosilva@gmail.com>
Date: Sat, 11 Jun 2022 00:02:39 +0200
Subject: [PATCH] feat: added input inline error message

---
 src/features/ui/components/Input/index.tsx | 5 ++++-
 src/features/ui/components/Input/styled.ts | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/features/ui/components/Input/index.tsx b/src/features/ui/components/Input/index.tsx
index 980ae59..c86df52 100644
--- a/src/features/ui/components/Input/index.tsx
+++ b/src/features/ui/components/Input/index.tsx
@@ -6,13 +6,14 @@ import {
   InputWrapper,
   Label,
   LabelText,
+  ErrorMessage,
   PasswordToggle,
   StyledInput,
 } from './styled'
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label: string
-  error?: string
+  error?: string | null
 }
 
 export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
@@ -40,6 +41,8 @@ export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
             <EyeIcon />
           </PasswordToggle>
         )}
+
+        {error ? <ErrorMessage>{error}</ErrorMessage> : null}
       </Label>
     </InputWrapper>
   )
diff --git a/src/features/ui/components/Input/styled.ts b/src/features/ui/components/Input/styled.ts
index bab7f1f..8d7f9f9 100644
--- a/src/features/ui/components/Input/styled.ts
+++ b/src/features/ui/components/Input/styled.ts
@@ -79,6 +79,10 @@ export const Label = styled.label<{ hasError?: boolean }>`
     `}
 `
 
+export const ErrorMessage = styled.span`
+  color: ${colors.accent.destructive};
+`
+
 export const PasswordToggle = styled.button.attrs({ type: 'button' })<{
   isActive: boolean
 }>`