adding in user stream and carbon components workonig now!

packages/desktop/src/components/header/index.tsx

@@ -2,6 +2,7 @@ import { Header, HeaderName } from "carbon-components-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Avatar } from "antd";
+import { Button } from "@carbon/react";
 import Logo from "../Logo";
 import { useGetUserDetails } from "../../controller/index";
 
@@ -17,22 +18,31 @@ export default function NirvanaHeader() {
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: true })
       .then((stream: MediaStream) => {
-        if (userVideo) userVideo.current.srcObject = stream;
+        if (userVideo?.current) userVideo.current.srcObject = stream;
         setUserVideoStream(stream);
       });
   }, []);
 
   if (isLoading) return <>loading</>;
 
-  const userRepresentation = useMemo(() => {
-    if (userVideoStream) return;
-  }, []);
-
   return (
     <div className="flex flex-row items-center h-12 bg-gray-100">
       <Logo type="small" className="scale-[0.2]" />
 
-      {userDetailsRes?.user?.picture && <></>}
+      <Button kind="ghost">flow state</Button>
+
+      <video
+        className="ml-auto"
+        ref={userVideo}
+        height={"50px"}
+        width={"50px"}
+        muted
+        autoPlay
+      />
+
+      {!userVideoStream && userDetailsRes?.user?.picture && (
+        <Avatar src={userDetailsRes?.user?.picture} />
+      )}
     </div>
   );
 }

packages/desktop/src/pages/nirvanaApp.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from "react-query";
 
-import { GlobalTheme } from "@carbon/react";
+import { GlobalTheme } from "@carbon/react/lib/components/Theme";
 import Login from "./Login";
 import NirvanaRouter from "./router";
 import ProtectedRoute from "../components/ProtectedRoute";