Availability Component UI

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.513.0",
+    "@material-tailwind/react": "^2.1.8",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",

src/components/ClientOnly.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import {useEffect, useState} from "react";
+
+interface ClientOnlyProps {
+    children: React.ReactNode;
+}
+
+const ClientOnly:React.FC<ClientOnlyProps> = ({
+    children
+}) => {
+    const [hasMounted, setHasMounted] = useState(false);
+
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+
+    if (!hasMounted) {
+        return null;
+    }
+
+    return(
+        <>
+        {children}
+        </>
+    )
+}
+
+export default ClientOnly;

src/components/appbar/AgentStatus.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React, {useState} from 'react';
+import {Chip} from "@material-tailwind/react";
+import {Button} from "../ui/button";
+
+const AgentStatus:React.FC = () => {
+
+    const [isAvailable, setIsAvailable] = useState(false);
+
+    const toggleAvailability = async () => {
+        const newAvailability = !isAvailable;
+        setIsAvailable(newAvailability);
+    }
+
+    return(
+        <div className="flex gap-2 justify-center items-center">
+            <Button 
+                variant="outline"
+                onClick={toggleAvailability}>
+                {isAvailable? 'Go Unavailable' : 'Go Available'}
+            </Button>
+        <div className="flex gap-2 border border-gray-300 p-2 m-4 bg-gray-100 rounded">
+
+
+
+        <div>Status</div>
+
+        <div>
+            {isAvailable? 
+                <>
+            <Chip
+                variant="ghost"
+                color="green"
+                size="sm"
+                value="Available"
+                icon={
+                  <span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-green-900 content-['']" />
+                }
+              /></> 
+
+                    : 
+                <>
+                    <Chip
+                        variant="ghost"
+                        color="red"
+                        size="sm"
+                        value="Unavailable"
+                        icon={
+                        <span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-red-900 content-['']" />
+                        }
+      />
+                    </> }
+
+        </div>
+
+        </div>
+        </div>
+    )
+}
+
+export default AgentStatus