From cda39f22ce81afc4bc240b6defea0123e361070c Mon Sep 17 00:00:00 2001
From: Erik Figueiredo <erik.figueiredo@gmail.com>
Date: Thu, 12 Sep 2024 10:12:18 -0300
Subject: [PATCH] =?UTF-8?q?chore:=20nova=20propriedade=20"color"=20nos=20b?=
 =?UTF-8?q?ot=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/index.tsx |  7 +++++--
 src/pages/forms.tsx             | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 6cc68ba..9e8cfb5 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -3,11 +3,12 @@ import { ReactNode, HTMLAttributes, HTMLProps, createElement } from 'react'
 export type ButtonProps = HTMLAttributes<HTMLButtonElement> & HTMLProps<HTMLAnchorElement> & {
   children?: ReactNode,
   type?: "button" | "submit" | "reset",
+  color?: string,
 }
 
-export const Button = ({ children, className, ...props }: ButtonProps) => {
+export const Button = ({ children, className, color, ...props }: ButtonProps) => {
   let tag = 'button'
-  let localClassName = 'text-white bg-primary hover:bg-dark font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 transition-all duration-300'
+  let localClassName = 'text-white hover:bg-dark font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 transition-all duration-300'
 
   if (props.href) {
     tag = 'a'
@@ -17,5 +18,7 @@ export const Button = ({ children, className, ...props }: ButtonProps) => {
     localClassName = `${localClassName} ${className}`
   }
 
+  localClassName = `${localClassName} ${color ? color : `bg-primary`}`
+
   return createElement(tag, { ...props, className: localClassName }, children)
 }
diff --git a/src/pages/forms.tsx b/src/pages/forms.tsx
index 5229511..46b113a 100644
--- a/src/pages/forms.tsx
+++ b/src/pages/forms.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from '../components/button'
 import { Card } from '../components/card'
 import { FormContainer } from '../components/form/form-container'
@@ -17,6 +17,17 @@ export const Forms = () => {
 
   const { handleOnChange, handleOnChangeMultiple } = useOnChange<typeof formData>(formData, setFormData)
 
+  const reset = useCallback(() => {
+    setFormData({
+      'input-password': null,
+      'input-text-checkbox': null,
+      'input-text-radio': null,
+      'input-text-toggle': null,
+      'input-text-select': null,
+      'input-text-select-multiple': null,
+    })
+  }, [formData])
+
   return (
     <Card>
       <FormContainer>
@@ -154,7 +165,7 @@ export const Forms = () => {
 
         <div>
           <Button>Confirm button</Button>
-          <Button type="reset" className="bg-gray-500 hover:bg-dark">Reset button</Button>
+          <Button type="reset" color="bg-gray-600" onClick={reset}>Reset button</Button>
         </div>
       </FormContainer>
     </Card>