Added SessionTracker and updated UI

package.json

@@ -14,7 +14,8 @@
     "abcjs": "^6.3.0",
     "classnames": "^2.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.tsx

@@ -3,13 +3,16 @@ import Button from "./Components/Button";
 import Modal from "./Components/Modal";
 import NoteDisplay from "./Components/NoteDisplay";
 import { IconSaxophone } from "./Components/Icons/IconSaxophone";
+import useSessionTracker from "./Hooks/useSessionTracker";
 
 function App() {
   const [isStarted, setIsStarted] = useState(false);
+  const { startSession, isEnded, metrics } = useSessionTracker();
+
   return (
-    <div className="dark:bg-slate-900 min-h-screen">
-      <div className="flex flex-col items-center justify-center h-screen w-full">
-        {!isStarted ? (
+    <div className="dark:bg-background min-h-screen">
+      {!isStarted ? (
+        <div className="flex flex-col items-center justify-center h-screen">
           <Modal
             descriptionElement={
               <p className="text-sm font-medium text-gray-400">
@@ -31,18 +34,55 @@ function App() {
             }
             successButton={
               <Button
+                bgFill
                 onClick={() => {
                   setIsStarted(true);
+                  startSession();
                 }}
               >
                 Continue
               </Button>
             }
           />
-        ) : (
-          <NoteDisplay isStarted={isStarted} setIsStarted={setIsStarted} />
-        )}
-      </div>
+        </div>
+      ) : !isEnded ? (
+        <NoteDisplay isStarted={isStarted} setIsStarted={setIsStarted} />
+      ) : (
+        <div className="flex flex-col items-center justify-center h-screen px-4 w-full space-y-5">
+          <div className="flex items-center justify-center">
+            <a className="text-white text-lg font-bold">Session has ended!</a>
+          </div>
+
+          <div className="py-5 px-5 w-full lg:w-[400px] bg-muted rounded-lg flex flex-col">
+            <div className="flex items-center justify-center pb-4">
+              <a className="text-white text-lg font-bold">
+                Results of the session
+              </a>
+            </div>
+            <div className="flex items-center justify-between">
+              <a className="text-gray-200 font-medium lg:font-semibold">
+                Successful Notes
+              </a>
+              <a className="text-lime-400">{metrics.successfulNotes}</a>
+            </div>
+            <div className="flex items-center justify-between">
+              <a className="text-gray-200 font-medium lg:font-semibold">
+                Missed Notes
+              </a>
+              <a className="text-red-400">{metrics.missedNotes}</a>
+            </div>
+          </div>
+
+          <Button
+            onClick={() => {
+              setIsStarted(true);
+              startSession();
+            }}
+          >
+            Restart Session
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

src/Components/Button/index.tsx

@@ -2,13 +2,17 @@ import { FC } from "react";
 
 const Button: FC<{
   onClick?: () => void;
+  bgFill?: boolean;
+  className?: string;
   children: React.ReactNode;
-}> = ({ onClick, children }) => {
+}> = ({ onClick, children, bgFill, className }) => {
   return (
     <button
       onClick={onClick}
       type="button"
-      className="p-4 border-2 border-yellow-500 text-yellow-500 rounded-md uppercase font-bold font-mono hover:bg-yellow-500 hover:text-black transition-colors duration-300 ease-in-out"
+      className={`p-4 border-2 border-yellow ${
+        bgFill ? "bg-primary text-black hover:bg-yellow-300" : "text-primary"
+      } rounded-md uppercase font-bold font-mono border-primary hover:bg-primary hover:text-black transition-colors duration-300 ease-in-out ${className}`}
     >
       <div className="flex items-center gap-1">{children}</div>
     </button>

src/Components/Icons/IconDoorOpen.tsx

@@ -0,0 +1,26 @@
+import { SVGProps } from "react";
+
+function IconDoorOpen(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M13 4h3a2 2 0 0 1 2 2v14" />
+      <path d="M2 20h3" />
+      <path d="M13 20h9" />
+      <path d="M10 12v.01" />
+      <path d="M13 4.562v16.157a1 1 0 0 1-1.242.97L5 20V5.562a2 2 0 0 1 1.515-1.94l4-1A2 2 0 0 1 13 4.561Z" />
+    </svg>
+  );
+}
+
+export default IconDoorOpen;

src/Components/ListboxSelector/index.tsx

@@ -14,7 +14,7 @@ function ListboxSelector({
   return (
     <Listbox value={value} onChange={onChange}>
       <div className={`relative mt-1 ${className}`}>
-        <Listbox.Button className="relative capitalize w-full rounded-lg border-2 border-yellow-500 hover:border-yellow-600 cursor-pointer py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-yellow-700 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+        <Listbox.Button className="relative capitalize w-full rounded-lg border-2 border-primary hover:border-yellow-400 cursor-pointer py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-yellow-700 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
           <span className="block truncate text-white">{buttonTitle}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <IconChevronUpDown
@@ -29,13 +29,13 @@ function ListboxSelector({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+          <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-muted py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
             {options.map((option, index) => (
               <Listbox.Option
                 key={index}
                 className={({ active }) =>
                   `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
-                    active ? "bg-slate-700 text-white" : "text-white"
+                    active ? "bg-mutedSecondary text-white" : "text-white"
                   }`
                 }
                 value={option.value}
@@ -50,7 +50,7 @@ function ListboxSelector({
                       {option.label}
                     </span>
                     {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-yellow-500">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
                         <IconCheckMark className="h-5 w-5" aria-hidden="true" />
                       </span>
                     ) : null}

src/Components/Modal/index.tsx

@@ -44,7 +44,7 @@ function Modal({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-slate-800 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-muted p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
                     as="h3"
                     className="text-lg font-semibold leading-6 text-gray-100"

src/Components/Modal/types.ts

@@ -2,6 +2,6 @@ export interface Props {
   title: string;
   descriptionElement?: React.ReactElement;
   description?: string;
-  openButton: React.ReactElement;
+  openButton?: React.ReactElement;
   successButton: React.ReactElement;
 }