feat: add ohno button

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

Hide file tree

Showing 7 changed files with 181 additions and 6 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -11,16 +11,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "axios": "1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.394.0",
     "next": "14.2.4",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/ui/src/app/layout.js b/ui/src/app/layout.js
@@ -1,17 +1,22 @@
 "use client"; // Add this line to indicate the file is a client component
 
-import { Inter } from "next/font/google";
 import "./globals.css";
 import { useEffect } from "react";
 
+import { Toaster } from "@/components/ui/sonner";
+
 export default function RootLayout({ children }) {
   useEffect(() => {
     document.documentElement.classList.add("dark");
   }, []);
 
   return (
     <html lang="en">
-      <body>{children}</body>
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
     </html>
   );
 }
diff --git a/ui/src/app/page.js b/ui/src/app/page.js
@@ -2,6 +2,7 @@ import CounterDisplay from "@/components/CounterDisplay";
 import Callendar from "@/components/Callendar";
 import { DisplayCard } from "@/components/Card";
 import HealthStatus from "@/components/HealthStatus";
+import { ActionButton } from "@/components/ActionButton";
 
 /**
  * @typedef {Object} CounterApiResponse
@@ -114,7 +115,12 @@ const Home = async () => {
           Click dates to see the details.
         </p>
       </div>
-      <div className="flex flex-col items-center justify-center"></div>
+      <div className="flex flex-col items-center justify-center">
+        <ActionButton
+          toast_message="Ohno event successfully recorded"
+          cta_button="Ohno!"
+        />
+      </div>
     </main>
   );
 };

diff --git a/ui/src/components/ActionButton/index.jsx b/ui/src/components/ActionButton/index.jsx
@@ -0,0 +1,39 @@
+"use client";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import formatCurrentDate from "@/utils/helper";
+
+/**
+ * @typedef {Object} ActionButtonProps
+ * @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
+ */
+
+/**
+ * ActionButton component
+ * @param {ActionButtonProps} actionButtonProps
+ * @returns {JSX.Element}
+ */
+export function ActionButton({ toast_message, cta_button }) {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast(
+          toast_message,
+          {
+            description: formatCurrentDate(),
+            action: {
+              label: "Ok",
+              // onClick: () => console.log("Undo"),
+            },
+          },
+          console.log("Event has been recorded"),
+        )
+      }
+    >
+      {cta_button}
+    </Button>
+  );
+}
diff --git a/ui/src/components/ui/sonner.jsx b/ui/src/components/ui/sonner.jsx
@@ -0,0 +1,29 @@
+"use client";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    (<Sonner
+      theme={theme}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props} />)
+  );
+}
+
+export { Toaster }
diff --git a/ui/src/utils/helper.js b/ui/src/utils/helper.js
@@ -0,0 +1,20 @@
+/*
+ * This function formats the current date and time in a human-readable format.
+ * @returns {string} formattedNow - The formatted date and time in the following format
+ * Thursday, June 20 at 2024 at 2:41 PM
+ */
+const formatCurrentDate = () => {
+  const options = {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  };
+  const now = new Date();
+  return now.toLocaleString("en-US", options).replace(/,([^,]*)$/, " at$1");
+};
+
+export default formatCurrentDate;