chore: nova propriedade "color" nos botões

erikfig · Sep 12, 2024 · cda39f2 · cda39f2
1 parent efa87a2
commit cda39f2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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>