From f6e86c246a4b47112a5161ddb75fb3195919be57 Mon Sep 17 00:00:00 2001
From: Excleson <excleson@gmail.com>
Date: Fri, 30 Jun 2023 15:57:07 +0700
Subject: [PATCH 1/5] initial commit

---
 components/Buttons.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 pages/index.tsx        | 13 +++++++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 components/Buttons.tsx

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
new file mode 100644
index 0000000..151aa2e
--- /dev/null
+++ b/components/Buttons.tsx
@@ -0,0 +1,38 @@
+import React, { MouseEventHandler } from 'react';
+
+interface Props {
+    text: string,
+    disabled?: boolean,
+    type: string,
+    onClicked?: MouseEventHandler
+}
+const buttonStyle = "text-white font-bold py-2 px-4 rounded";
+
+const defaultColor = "bg-gray-500 hover:bg-gray-700 ";
+const primaryColor = "bg-blue-500 hover:bg-blue-700 ";
+const cancelColor = "bg-red-500 hover:bg-red-700 ";
+
+const disabledButton = " opacity-50 cursor-not-allowed";
+
+export const ButtonComponent: React.FC<Props> = ({
+    text,
+    disabled = false,
+    type,
+    onClicked
+}) => {
+    let className: string;
+    if (type === "cancel") {
+        className = cancelColor + buttonStyle + (disabled ? disabledButton : "")
+    }
+    else if (type == "primary") {
+        className = primaryColor + buttonStyle + (disabled ? disabledButton : "")
+    }
+    else {
+        className = defaultColor + buttonStyle + (disabled ? disabledButton : "")
+    }
+    return (
+        <button className={className} onClick={disabled ? () => {return} : onClicked}>
+            {text}
+        </button>
+    )
+}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 6c0943a..f0aa5a6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,12 +1,21 @@
 import { WithDefaultLayout } from '../components/DefautLayout';
 import { Title } from '../components/Title';
+import { ButtonComponent } from '../components/Buttons';
 import { Page } from '../types/Page';
 
 const IndexPage: Page = () => {
+    const disabled = true;
     return (
         <div>
-            <Title>Home</Title>
-            Hello World!
+            <div>
+                <Title>Home</Title>
+                Hello World!
+            </div>
+            <ButtonComponent text="This is primary" type='primary' onClicked={() => console.log("primary")} />
+            <ButtonComponent text="This is default" type='default' onClicked={() => console.log("default")} />
+            <ButtonComponent text="This is cancel" type='cancel' onClicked={() => console.log("cancel")} />
+            <ButtonComponent text="This is disabled with variable" type='default' disabled={disabled} onClicked={() => console.log("disabeld")} />
+            <ButtonComponent text="This is disabled without variable" type='default' disabled onClicked={() => console.log("disabeld")} />
         </div>
     );
 }

From 4f7fcbbea7c9fd80f11111ecb974f4ba2ef1a34b Mon Sep 17 00:00:00 2001
From: Excleson <excleson@gmail.com>
Date: Fri, 30 Jun 2023 16:31:49 +0700
Subject: [PATCH 2/5] change button name and props

---
 components/Buttons.tsx | 32 +++++++++++++-------------------
 pages/index.tsx        | 12 +++++-------
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index 151aa2e..b40fe02 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -1,10 +1,7 @@
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 
-interface Props {
-    text: string,
-    disabled?: boolean,
-    type: string,
-    onClicked?: MouseEventHandler
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    text: string
 }
 const buttonStyle = "text-white font-bold py-2 px-4 rounded";
 
@@ -14,25 +11,22 @@ const cancelColor = "bg-red-500 hover:bg-red-700 ";
 
 const disabledButton = " opacity-50 cursor-not-allowed";
 
-export const ButtonComponent: React.FC<Props> = ({
-    text,
-    disabled = false,
-    type,
-    onClicked
-}) => {
+export const AButton: React.FC<ButtonProps> = (
+    props
+) => {
     let className: string;
-    if (type === "cancel") {
-        className = cancelColor + buttonStyle + (disabled ? disabledButton : "")
+    if (props.type === "reset") {
+        className = cancelColor + buttonStyle + (props.disabled ? disabledButton : "")
     }
-    else if (type == "primary") {
-        className = primaryColor + buttonStyle + (disabled ? disabledButton : "")
+    else if (props.type == "submit") {
+        className = primaryColor + buttonStyle + (props.disabled ? disabledButton : "")
     }
     else {
-        className = defaultColor + buttonStyle + (disabled ? disabledButton : "")
+        className = defaultColor + buttonStyle + (props.disabled ? disabledButton : "")
     }
     return (
-        <button className={className} onClick={disabled ? () => {return} : onClicked}>
-            {text}
+        <button {...props} className={className}>
+            {props.text}
         </button>
     )
 }
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index f0aa5a6..374f27f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,21 +1,19 @@
 import { WithDefaultLayout } from '../components/DefautLayout';
 import { Title } from '../components/Title';
-import { ButtonComponent } from '../components/Buttons';
+import { AButton } from '../components/Buttons';
 import { Page } from '../types/Page';
 
 const IndexPage: Page = () => {
-    const disabled = true;
     return (
         <div>
             <div>
                 <Title>Home</Title>
                 Hello World!
             </div>
-            <ButtonComponent text="This is primary" type='primary' onClicked={() => console.log("primary")} />
-            <ButtonComponent text="This is default" type='default' onClicked={() => console.log("default")} />
-            <ButtonComponent text="This is cancel" type='cancel' onClicked={() => console.log("cancel")} />
-            <ButtonComponent text="This is disabled with variable" type='default' disabled={disabled} onClicked={() => console.log("disabeld")} />
-            <ButtonComponent text="This is disabled without variable" type='default' disabled onClicked={() => console.log("disabeld")} />
+            <AButton text="This is submit" type='submit' onClick={() => console.log("submit")} />
+            <AButton text="This is default" type='button' onClick={() => console.log("default")} />
+            <AButton text="This is reset" type='reset' onClick={() => console.log("cancel")} />
+            <AButton text="This is disabled" disabled onClick={() => console.log("disabeld")} />
         </div>
     );
 }

From f04b64f743fa8ef526071d402b38abed5ac0fed8 Mon Sep 17 00:00:00 2001
From: Excleson <excleson@gmail.com>
Date: Fri, 30 Jun 2023 17:16:34 +0700
Subject: [PATCH 3/5] add comments and function for get className

---
 components/Buttons.tsx | 36 +++++++++++++++++++++++++++---------
 pages/index.tsx        |  2 +-
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index b40fe02..70c85a5 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
 
+/**
+ * Button property
+ */
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     text: string
+    //add here for custom property or property that not included in HTMLButtonElement
 }
+
+/**
+ * Default style for buttons using Tailwind CSS
+ */
 const buttonStyle = "text-white font-bold py-2 px-4 rounded";
 
 const defaultColor = "bg-gray-500 hover:bg-gray-700 ";
@@ -11,21 +19,31 @@ const cancelColor = "bg-red-500 hover:bg-red-700 ";
 
 const disabledButton = " opacity-50 cursor-not-allowed";
 
-export const AButton: React.FC<ButtonProps> = (
-    props
-) => {
+/**
+ * Function for get button style
+ * @param buttonType type for the button (reset | submit | cancel)
+ * @param disabled is the button disabled (true | false)
+ * @returns style for the button
+ */
+function getButtonClassNames(buttonType?: string, disabled?: boolean): string {
     let className: string;
-    if (props.type === "reset") {
-        className = cancelColor + buttonStyle + (props.disabled ? disabledButton : "")
+    if (buttonType === "reset") {
+        className = cancelColor + buttonStyle + (disabled ? disabledButton : "")
     }
-    else if (props.type == "submit") {
-        className = primaryColor + buttonStyle + (props.disabled ? disabledButton : "")
+    else if (buttonType == "submit") {
+        className = primaryColor + buttonStyle + (disabled ? disabledButton : "")
     }
     else {
-        className = defaultColor + buttonStyle + (props.disabled ? disabledButton : "")
+        className = defaultColor + buttonStyle + (disabled ? disabledButton : "")
     }
+    return className;
+}
+
+export const AButton: React.FC<ButtonProps> = (
+    props
+) => {
     return (
-        <button {...props} className={className}>
+        <button {...props} className={getButtonClassNames(props.type, props.disabled)}>
             {props.text}
         </button>
     )
diff --git a/pages/index.tsx b/pages/index.tsx
index 374f27f..274e1a8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,7 @@ const IndexPage: Page = () => {
             <AButton text="This is submit" type='submit' onClick={() => console.log("submit")} />
             <AButton text="This is default" type='button' onClick={() => console.log("default")} />
             <AButton text="This is reset" type='reset' onClick={() => console.log("cancel")} />
-            <AButton text="This is disabled" disabled onClick={() => console.log("disabeld")} />
+            <AButton text="This is disabled" disabled />
         </div>
     );
 }

From 6935a769aff8f774e40e1598173e36f4d5009830 Mon Sep 17 00:00:00 2001
From: Excleson <30332626+Excleson@users.noreply.github.com>
Date: Fri, 30 Jun 2023 17:22:48 +0700
Subject: [PATCH 4/5] change comment

Co-authored-by: Tieantono <tietieantono@gmail.com>
---
 components/Buttons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index 70c85a5..1773eec 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -5,7 +5,7 @@ import React from 'react';
  */
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     text: string
-    //add here for custom property or property that not included in HTMLButtonElement
+    // Add your custom properties here.
 }
 
 /**

From f11790f0e4fdf0fdfd3218d03e90c5771eb44d1e Mon Sep 17 00:00:00 2001
From: Excleson <excleson@gmail.com>
Date: Mon, 3 Jul 2023 12:26:27 +0700
Subject: [PATCH 5/5] Add more detailed documentations.

---
 components/Buttons.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index 1773eec..ffb6e2b 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 /**
- * Button property
+ * AButton component's props definitions.
  */
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     text: string
@@ -9,7 +9,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 /**
- * Default style for buttons using Tailwind CSS
+ * Default style for buttons using Tailwind CSS.
  */
 const buttonStyle = "text-white font-bold py-2 px-4 rounded";
 
@@ -20,10 +20,10 @@ const cancelColor = "bg-red-500 hover:bg-red-700 ";
 const disabledButton = " opacity-50 cursor-not-allowed";
 
 /**
- * Function for get button style
- * @param buttonType type for the button (reset | submit | cancel)
- * @param disabled is the button disabled (true | false)
- * @returns style for the button
+ * Function for conditionally assigning the button's style.
+ * @param buttonType Type for the button (reset | submit | cancel)
+ * @param disabled The disabled flag for marking the button disabled state. (true | false).
+ * @returns Named class name for the button component.
  */
 function getButtonClassNames(buttonType?: string, disabled?: boolean): string {
     let className: string;
@@ -39,6 +39,9 @@ function getButtonClassNames(buttonType?: string, disabled?: boolean): string {
     return className;
 }
 
+/**
+ * AButton component definitions.
+ */
 export const AButton: React.FC<ButtonProps> = (
     props
 ) => {