Saardev

.env

@@ -0,0 +1,26 @@
+NEXT_PUBLIC_SANITY_DATASET=production
+NEXT_PUBLIC_SANITY_PROJECT_ID=mlxdtup8
+NEXT_PUBLIC_BASE_URL=http://localhost:3000/
+SANITY_API_TOKEN=skT2G7wl4BFGvOLkELSIrcnFEBG3MyrXC71IJgv5iBOj5yxJx75MjgBzbbTvIwUtckXFIluhN2iEHiV37jNA0EcJmbTkMT1LJKwCNWH3ddJnof3mPQWDoVNggRM4ZCNgTDpbGqvjf4FE7xb5TkkTVUX5Rf1Fp4Z3IWZmlmwkSR2Fa8UdcikH
+NEXTAUTH_SECRET=k3yf4g3h2u1t4sr5eh6s7i
+NEXTAUTH_URL=http://localhost:3000/
+GOOGLE_CLIENT_ID=618426972732-a7fqd0fdg2aoa8iagu0vb7f6m0sl2hhs.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+TRACING_ENABLED=false
+NEXT_PUBLIC_SOCKET_URL="http://localhost:4000/"
+NEXT_PUBLIC_SOCKETIO_URL_2=http://localhost:5000/
+NEXT_PUBLIC_SHAZAM_CORE_RAPID_API_KEY='2d7b7a8dfcmsh5d7d9d777fe58aap127c50jsn3b17984aa2a3'
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c2FjcmVkLWdhcmZpc2gtNy5jbGVyay5hY2NvdW50cy5kZXYk
+CLERK_SECRET_KEY=sk_test_LPEsuGh4YWMmMpL3t18rOw08KDjht3lBIsCgRq0Hl6
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
+NEXT_PUBLIC_RAPID_API_KEY=0e8903e27emsh2333e866a960be6p1d76cbjsn8250ba0b208d
+NEXT_PUBLIC_TINY=limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m
+NEXT_PUBLIC_CLIENT_SECRET=505a9fece5074f17b4b9a5edee644089
+NEXT_PUBLIC_CLIENT_ID=db6947afde104dbc94f707562b9c20fc
+JWT_SECRET=BQBjHQZbyyIZW-WjQ0TxejxcA9dO4v-CRE3zsHabyeowEWKGhepBwAbAPX1B1cnzZkV15J7KEZXA2pUfAmtc8Hms9TTXuAyQxsCB__qKtHDUteEoTsoipMzsiDXTi2kx9Vz0S1cInDyNsevceq29ivhfV-U3oFCWFtRyknTaEQsH1mCigpn-uXZ5AVD5gSqqPt3mK0Z2e5G40r0HpCJtCLgi1Ld2OufzmzagXiKcv9MY7unDjo5hjthV2UF9rmlAy0E6bUH3FcdtCoSsA7JFqAGZyg
+NEXT_PUBLIC_CATTO_KEY=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
+NEXT_PUBLIC_CHAT_KEY=8ef40a21-bcb4-47f3-928e-2b83389392b1
+NEXT_PUBLIC_CHAT_KEY=pk-ihWDwESgKjNoJBbORkgfGDrBGEqnBSCIVwftLcSjoEgIYuFK

components/ChapterPopup/ChapterPopup.tsx

@@ -19,7 +19,7 @@ const Dialog = ({ isOpen, onClose, children }: any) => {
       <div className="fixed inset-0 bg-black opacity-50"></div>
       <div
         ref={dialogRef}
-        className="showmodal  z-50  max-w-[50vw] p-6 mx-auto  rounded-xl  shadow-lg"
+        className="showmodal  z-50 flex items-center  justify-center  p-3 mx-auto  rounded-xl  shadow-lg"
       >
         {children}
       </div>

components/Chat/ChannelPreview.tsx

@@ -0,0 +1,31 @@
+const ChannelPreview = ({ channel, onChannelSelect }: any) => {
+  return (
+    <div
+      className="channel-preview-wrapper  "
+      onClick={() => onChannelSelect(channel)}
+    >
+      <img
+        className="channel-preview-cover"
+        width={45}
+        src={channel.coverUrl}
+        alt=""
+      />
+      <div>
+        <div className="channel-preview-name">{channel.name}</div>
+        <div className="channel-preview-last-message">
+          {channel.lastMessage?.messageType === "file"
+            ? channel.lastMessage.name
+            : channel.lastMessage?.message}
+        </div>
+      </div>
+      <div className="channel-preview-last-message-date">
+        {new Intl.DateTimeFormat("en-us", {
+          month: "short",
+          day: "2-digit",
+        }).format(channel.lastMessage?.createdAt)}
+      </div>
+    </div>
+  );
+};
+
+export default ChannelPreview;

components/Chat/Chat.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 // import SendbirdApp from "@sendbird/uikit-react/App";
 import { User } from "../../typings";
-
+import "../../styles/chat.css";
+// @ts-ignore
+import App from "@sendbird/uikit-react/App";
 const APP_ID = "7FB154A3-C967-45D0-90B7-6A63E5F0E3EB";
-const USER_ID = "astrosaard";
 // @ts-ignore
 import SBConversation from "@sendbird/uikit-react/Channel";
 // @ts-ignore
@@ -28,46 +29,9 @@ const Chat = ({ user }: Props) => {
   const [currentChannelUrl, setCurrentChannelUrl] = useState("");
   const [category, setCategory] = useState("");
   return (
-    <div className="h-[86vh] overflow-hidden -ml-6 top-0 w-full scrollbar-none scrollbar">
+    <div className="md:h-[86vh] overflow-y-hidden hidden lg:inline-flex overflow-hidden ml-1 px-0 top-0 py-0 w-full scrollbar-none scrollbar">
       {" "}
-      <SBProvider
-        // ColorSet={myColorSet}
-        theme="dark"
-        appId={APP_ID}
-        userId={user[0].chatid}
-      >
-        <div className="flex justify-between h-full w-full">
-          <div className="w-fit">
-            <SBChannelList
-            allowProfileEdit
-              onChannelSelect={(channel: any) => {
-                if (channel && channel.url) {
-                  setCurrentChannelUrl(channel.url);
-                  setCategory(channel.url);
-                }
-              }}
-            />
-          </div>
-          <div className="w-full">
-            <SBConversation
-              channelUrl={currentChannelUrl}
-              onChatHeaderActionClick={() => {
-                setShowSettings(true);
-              }}
-            />
-          </div>
-          {showSettings && (
-            <div className="">
-              <SBChannelSettings
-                channelUrl={currentChannelUrl}
-                onCloseClick={() => {
-                  setShowSettings(false);
-                }}
-              />
-            </div>
-          )}
-        </div>
-      </SBProvider>
+      <App userId={user[0].chatid} appId={APP_ID} theme="dark" />
     </div>
   );
 };

components/Chat/ChatHeader.tsx

@@ -0,0 +1,14 @@
+import IconArrowLeft from "./icon-arrow-left.svg";
+import "../../styles/chat-mobile.css";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+const ChatHeader = ({ channel, user, onBack }: any) => (
+  <div className="w-full flex  fixed mb-2 text-center bg-[#151515]  justify-between">
+    <button className="w-fit" onClick={onBack}>
+      <ArrowLeftIcon className="h-5 w-5 ml-10 cursor-pointer" />
+    </button>
+    <span className="font-semibold text-[4vw]">{channel.name}</span>
+    <span className="text-transparent opacity-0">{user.nickname}</span>
+  </div>
+);
+
+export default ChatHeader;

components/Chat/ChatMobile.tsx

@@ -0,0 +1,61 @@
+// @ts-ignore
+import SBConversation from "@sendbird/uikit-react/Channel";
+// @ts-ignore
+import SBChannelList from "@sendbird/uikit-react/ChannelList";
+// @ts-ignore
+import SBChannelSettings from "@sendbird/uikit-react/ChannelSettings";
+// @ts-ignore
+import SBProvider from "@sendbird/uikit-react/SendbirdProvider";
+import { useState } from "react";
+import ChatHeader from "./ChatHeader";
+import ChannelPreview from "./ChannelPreview";
+import { User } from "../../typings";
+// @ts-ignore
+import Channel from "@sendbird/uikit-react/Channel";
+const APP_ID = "7FB154A3-C967-45D0-90B7-6A63E5F0E3EB";
+interface Props {
+  user: User[];
+}
+
+export default function ChatMobile({ user }: Props) {
+  const [channel, setChannel] = useState(null);
+
+  const onChannelSelect = (_channel: any) => {
+    setChannel(_channel);
+  };
+
+  const onBack = () => {
+    setChannel(null);
+  };
+
+  return (
+    <div className="h-full overflow-hidden w-screen flex justify-center -mx-2 lg:hidden xl:hidden">
+      <SBProvider appId={APP_ID} userId={user[0].chatid}>
+        <div className="flex  w-full">
+          {channel ? (
+            <div className="h-screen w-screen ">
+              <Channel
+                //   @ts-ignore
+                channelUrl={channel.url}
+                renderChannelHeader={() => (
+                  <ChatHeader channel={channel} user={user} onBack={onBack} />
+                )}
+              />
+            </div>
+          ) : (
+            <div className="h-screen flex justify-center w-full ">
+              <SBChannelList
+                renderChannelPreview={({ channel }: any) => (
+                  <ChannelPreview
+                    channel={channel}
+                    onChannelSelect={onChannelSelect}
+                  />
+                )}
+              />
+            </div>
+          )}
+        </div>
+      </SBProvider>
+    </div>
+  );
+}

components/Clock/Clock.tsx

@@ -2,14 +2,16 @@ import React, { useEffect, useState } from "react";
 import { Inter, Poppins } from "next/font/google";
 import "./clock.css";
 
-type Props = {};
+type Props = {
+  sessionStarted: boolean;
+};
 
 const poppins = Poppins({
   subsets: ["latin"],
   weight: "100",
 });
 
-const Clock = (props: Props) => {
+const Clock = ({ sessionStarted }: Props) => {
   const [currentTime, setCurrentTime] = useState(new Date());
 
   useEffect(() => {
@@ -49,7 +51,7 @@ const Clock = (props: Props) => {
   const year = currentTime.getFullYear();
 
   return (
-    <div className="relative flex items-center justify-center">
+    <div className="relative   flex items-center justify-center">
       <div
         className={`w-[212px] h-[212px] bg-white bg-opacity-30 backdrop-blur-3xl border-opacity-50 border-white border text-white rounded-full flex items-center justify-center gap-5 ${poppins.className}`}
       >
@@ -66,7 +68,7 @@ const Clock = (props: Props) => {
           <div className="text-lg ">{dayOfWeek}</div>
         </div>
       </div>
-      <div className="spinner"></div>
+      {/* {sessionStarted && <div className="spinner"></div>} */}
     </div>
   );
 };