feat: #KAOS 183-Edit Button, add onClick, Children

src/components/Button/Delete.js

@@ -1,7 +1,10 @@
-const Delete = ({ label }) => {
+const Delete = ({ className, children, onClick }) => {
   return (
-    <button className="button bg-error px-6 text-white hover:bg-errorLight hover:shadow-lg hover:shadow-error/50 active:bg-errorDark active:shadow-error/40">
-      {label}
+    <button
+      className={`button bg-error px-6 text-white hover:bg-errorLight hover:shadow-lg hover:shadow-error/50 active:bg-errorDark active:shadow-error/40 ${className}`}
+      onClick={onClick}
+    >
+      {children}
     </button>
   );
 };

src/components/Button/Primary.js

@@ -1,7 +1,10 @@
-const Primary = ({ label }) => {
+const Primary = ({ children, onClick, className }) => {
   return (
-    <button className="button active-border-primary-dark border-2 border-primary-base bg-primary-base text-white shadow-lg hover:border-primary-light hover:bg-primary-light hover:shadow-primary-base/50 active:border-primary-dark active:bg-primary-dark active:shadow-inner">
-      {label}
+    <button
+      className={`button active-border-primary-dark border-2 border-primary-base bg-primary-base text-white shadow-lg hover:border-primary-light hover:bg-primary-light hover:shadow-primary-base/50 active:border-primary-dark active:bg-primary-dark active:shadow-inner ${className}`}
+      onClick={onClick}
+    >
+      {children}
     </button>
   );
 };

src/components/Button/PrimaryWithIcon.js

@@ -1,9 +1,12 @@
 import Image from "next/image";
 
-const PrimaryWithIcon = ({ label, icon }) => {
+const PrimaryWithIcon = ({ icon, className, children, onClick }) => {
   return (
-    <button className="button active-border-primary-dark flex gap-2 border-2 border-primary-base bg-primary-base text-white shadow-lg hover:border-primary-light hover:bg-primary-light hover:shadow-primary-base/50 active:border-primary-dark active:bg-primary-dark active:shadow-inner">
-      {label}
+    <button
+      className={`button active-border-primary-dark flex gap-2 border-2 border-primary-base bg-primary-base text-white shadow-lg hover:border-primary-light hover:bg-primary-light hover:shadow-primary-base/50 active:border-primary-dark active:bg-primary-dark active:shadow-inner ${className} `}
+      onClick={onClick}
+    >
+      {children}
       <Image src={icon} width={24} height={24} alt="Add icon" />
     </button>
   );

src/components/Button/Secondary.js

@@ -1,7 +1,10 @@
-const Secondary = ({ label }) => {
+const Secondary = ({ children, onClick, className }) => {
   return (
-    <button className="button border-2 border-primary-dark bg-white text-primary-dark hover:shadow-lg active:bg-primary-light active:text-white">
-      {label}
+    <button
+      className={`button border-2 border-primary-dark bg-white text-primary-dark hover:shadow-lg active:bg-primary-light active:text-white ${className} `}
+      onClick={onClick}
+    >
+      {children}
     </button>
   );
 };

src/components/TimeInputField.js

@@ -0,0 +1,49 @@
+// //create time input field component for the form with onChange event handler
+const TimeInputField = ({ name, label, value, onChange }) => {
+  return (
+    <div className="form-group">
+      <label htmlFor={name}>{label}</label>
+      <input
+        type="time"
+        name={name}
+        value={value}
+        onChange={onChange}
+        className="form-control"
+      />
+    </div>
+  );
+};
+
+export default TimeInputField;
+
+//create time input field component dropdowm for the form with onChange event handler
+
+// const TimeInputField = ({ name, label, value, onChange }) => {
+//   return (
+//     <div className="form-group">
+//       <label htmlFor={name}>{label}</label>
+//       <select
+//         name={name}
+//         value={value}
+//         onChange={onChange}
+//         className="form-control"
+//       >
+//         <option value="" />
+//         <option value="1">1:00</option>
+//         <option value="2">2:00</option>
+//         <option value="3">3:00</option>
+//         <option value="4">4:00</option>
+//         <option value="5">5:00</option>
+//         <option value="6">6:00</option>
+//         <option value="7">7:00</option>
+//         <option value="8">8:00</option>
+//         <option value="9">9:00</option>
+//         <option value="10">10:00</option>
+//         <option value="11">11:00</option>
+//         <option value="12">12:00</option>
+//       </select>
+//     </div>
+//   );
+// }
+
+// export default TimeInputField;

src/pages/kaos/testComponent.js

@@ -6,6 +6,10 @@ import Button from "~/components/Button";
 const testComponent = () => {
   const isError = true;
 
+  const handleClick = () => {
+    console.log("clicked");
+  };
+
   return (
     <div className="w-100 m-4 flex flex-col gap-4">
       Text input field
@@ -30,15 +34,24 @@ const testComponent = () => {
           isError={isError}
         />
       </div>
-      <div className=" flex flex-col gap-2 ">
-        <Button buttonType={`Primary`} label="I am a button" className="w-12" />
-        <Button buttonType={`Secondary`} label="I am a button" />
-        <Button buttonType={`Delete`} label="I am a button" />
+      <div className="flex flex-col gap-2 ">
+        <Button buttonType={`Primary`} onClick={handleClick}>
+          Edit
+        </Button>
+        <Button buttonType={`Secondary`} onClick={handleClick}>
+          Edit
+        </Button>
+        <Button buttonType={`Delete`} onClick={handleClick}>
+          Edit
+        </Button>
         <Button
           buttonType={`PrimaryWithIcon`}
           label="Waiting for Icon"
           icon={AddIcon}
-        />
+          onClick={handleClick}
+        >
+          Edit
+        </Button>
       </div>
     </div>
   );