feat: add two buttons

mgierada · Jun 20, 2024 · bfb21fe · bfb21fe
1 parent 72d0c25
commit bfb21fe
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/ui/src/app/page.js b/ui/src/app/page.js
@@ -68,7 +68,7 @@ const fetchCounter = async (endpoint) => {
       resetedAt: null,
       wasEverReset: null,
       isLocked: false,
-      error: "Failed to fetch current value",
+      error: `Failed to fetch ${endpoint} data.`,
     };
   }
 };
@@ -115,10 +115,18 @@ const Home = async () => {
           Click dates to see the details.
         </p>
       </div>
-      <div className="flex flex-col items-center justify-center">
+      <div className="flex flex-row items-center justify-center gap-20">
+        <ActionButton
+          variant="destructive"
+          toast_message="Ohno event successfully recorded"
+          cta_button="OhNo!"
+          icon="biohazard"
+        />
         <ActionButton
+          variant="outline"
           toast_message="Ohno event successfully recorded"
-          cta_button="Ohno!"
+          cta_button="All good"
+          icon="activity"
         />
       </div>
     </main>

diff --git a/ui/src/components/ActionButton/index.jsx b/ui/src/components/ActionButton/index.jsx
@@ -1,29 +1,40 @@
 "use client";
 import { toast } from "sonner";
+import { Biohazard, Activity } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import formatCurrentDate from "@/utils/helper";
+import getAndFormatCurrentDate from "@/utils/helper";
 
 /**
  * @typedef {Object} ActionButtonProps
+ * @property {string} variant - a string that determines the variant of the button
  * @property {string} toast_message - the message to be displayed on on the toast popup
  * @property {string} cta_button - the call to action to be displayed on the button
+ * @property {string} icon - the icon to be displayed on the button
  */
 
 /**
  * ActionButton component
  * @param {ActionButtonProps} actionButtonProps
  * @returns {JSX.Element}
  */
-export function ActionButton({ toast_message, cta_button }) {
+export function ActionButton({ variant, toast_message, cta_button, icon }) {
+  const renderIcon = (icon) => {
+    if (icon === "biohazard") {
+      return <Biohazard className="mr-2 h-4 w-4" />;
+    } else if (icon === "activity") {
+      return <Activity className="mr-2 h-4 w-4" />;
+    }
+    return null;
+  };
   return (
     <Button
-      variant="outline"
+      variant={variant}
       onClick={() =>
         toast(
           toast_message,
           {
-            description: formatCurrentDate(),
+            description: getAndFormatCurrentDate(),
             action: {
               label: "Ok",
               // onClick: () => console.log("Undo"),
@@ -33,7 +44,7 @@ export function ActionButton({ toast_message, cta_button }) {
         )
       }
     >
-      {cta_button}
+      {renderIcon(icon)} {cta_button}
     </Button>
   );
 }
diff --git a/ui/src/utils/helper.js b/ui/src/utils/helper.js
@@ -3,7 +3,7 @@
  * @returns {string} formattedNow - The formatted date and time in the following format
  * Thursday, June 20 at 2024 at 2:41 PM
  */
-const formatCurrentDate = () => {
+const getAndFormatCurrentDate = () => {
   const options = {
     weekday: "long",
     year: "numeric",
@@ -17,4 +17,4 @@ const formatCurrentDate = () => {
   return now.toLocaleString("en-US", options).replace(/,([^,]*)$/, " at$1");
 };
 
-export default formatCurrentDate;
+export default getAndFormatCurrentDate;