Test

components/Chats/Chats.tsx

@@ -0,0 +1,237 @@
+import { chats } from "@pushprotocol/restapi/src/lib/chat";
+import React, { useState } from "react";
+
+interface UserProfile {
+  name: string;
+  avatar: string;
+  role: string;
+  status: string;
+}
+
+interface ActiveConversation {
+  name: string;
+  avatar: string;
+  unreadCount?: number;
+  chatId: string;
+  did: string; // <-- Add this
+}
+interface Message {
+  sender: "self" | "other";
+  content: string;
+  timestamp: number;
+  // Add any other fields you might need
+}
+
+interface ChatsProps {
+  userProfile: UserProfile;
+  activeConversations: ActiveConversation[];
+  archivedConversations: ActiveConversation[];
+  messages: Message[];
+  onChatSelect: (chatId: string) => void; // Add this line
+  onSendMessage: (recipientDID: string, content: string) => void; // Add this line
+  selectedChatId: string | null;
+}
+
+const Chats: React.FC<ChatsProps> = ({
+  userProfile,
+  activeConversations,
+  archivedConversations,
+  messages,
+  onChatSelect,
+  onSendMessage,
+  selectedChatId,
+}) => {
+  const [inputMessage, setInputMessage] = useState("");
+
+  const selectedChatDID = activeConversations.find(
+    (chat) => chat.chatId === selectedChatId
+  )?.did;
+  const handleSendClick = () => {
+    if (selectedChatDID) {
+      console.log("HERE",selectedChatDID,inputMessage)
+      onSendMessage(selectedChatDID, inputMessage);
+      setInputMessage("");
+    }
+  };
+
+  return (
+    <div className="flex h-screen antialiased text-gray-800">
+      <div className="flex flex-row h-full w-full overflow-x-hidden">
+        <div className="flex flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0">
+          <div className="flex flex-row items-center justify-center h-12 w-full">
+            <div className="flex items-center justify-center rounded-2xl text-indigo-700 bg-indigo-100 h-10 w-10">
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+                ></path>
+              </svg>
+            </div>
+            <div className="ml-2 font-bold text-2xl">Chat</div>
+          </div>
+          <div className="flex flex-col items-center bg-indigo-100 border border-gray-200 mt-4 w-full py-6 px-4 rounded-lg">
+            <div className="h-20 w-20 rounded-full border overflow-hidden">
+              <img
+                src={userProfile.avatar}
+                alt="User Avatar"
+                className="h-full w-full"
+              />
+            </div>
+            <div className="text-sm font-semibold mt-2">{userProfile.name}</div>
+            <div className="text-xs text-gray-500">{userProfile.role}</div>
+            <div className="flex flex-row items-center mt-3">
+              <div className="flex flex-col justify-center h-4 w-8 bg-indigo-500 rounded-full">
+                <div className="h-3 w-3 bg-white rounded-full self-end mr-1"></div>
+              </div>
+              <div className="leading-none ml-1 text-xs">Active</div>
+            </div>
+          </div>
+          <div className="flex flex-col mt-8">
+            <div className="flex flex-row items-center justify-between text-xs">
+              <span className="font-bold">Active Conversations</span>
+              <span className="flex items-center justify-center bg-gray-300 h-4 w-4 rounded-full">
+                {activeConversations.length}
+              </span>
+            </div>
+            <div className="flex flex-col space-y-1 mt-4 -mx-2 h-48 overflow-y-auto">
+              {activeConversations.map((conversation) => (
+                <button
+                  key={conversation.name}
+                  className="flex flex-row items-center hover:bg-gray-100 rounded-xl p-2"
+                  onClick={() => onChatSelect(conversation.chatId)}
+                >
+                  <div className="ml-2 text-sm font-semibold">
+                    {conversation.name}
+                  </div>
+                  {conversation.unreadCount && (
+                    <div className="flex items-center justify-center ml-auto text-xs text-white bg-red-500 h-4 w-4 rounded leading-none">
+                      {conversation.unreadCount}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col flex-auto h-full p-6">
+          <div className="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-100 h-full p-4">
+            <div className="flex flex-col h-full overflow-x-auto mb-4">
+              <div className="flex flex-col h-full">
+                <div className="grid grid-cols-12 gap-y-2">
+                  {messages.map((message, index) => {
+                    if (message.sender === "self") {
+                      return (
+                        <div
+                          key={index}
+                          className="col-start-6 col-end-13 p-3 rounded-lg"
+                        >
+                          <div className="flex items-center justify-start flex-row-reverse">
+                            <div className="relative mr-3 text-sm bg-indigo-100 py-2 px-4 shadow rounded-xl">
+                              <div>{message.content}</div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    } else {
+                      return (
+                        <div
+                          key={index}
+                          className="col-start-1 col-end-8 p-3 rounded-lg"
+                        >
+                          <div className="flex flex-row items-center">
+                            <div className="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl">
+                              <div>{message.content}</div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }
+                  })}
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-row items-center h-16 rounded-xl bg-white w-full px-4">
+              <div>
+                <button className="flex items-center justify-center text-gray-400 hover:text-gray-600">
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                    ></path>
+                  </svg>
+                </button>
+              </div>
+              <div className="flex-grow ml-4">
+                <div className="relative w-full">
+                  <input
+                    type="text"
+                    className="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10"
+                    onChange={(e) => setInputMessage(e.target.value)}
+                  />
+                  <button className="absolute flex items-center justify-center h-full w-12 right-0 top-0 text-gray-400 hover:text-gray-600">
+                    <svg
+                      className="w-6 h-6"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div className="ml-4">
+                <button
+                  onClick={handleSendClick}
+                  className="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
+                >
+                  <span>Send</span>
+                  <span className="ml-2">
+                    <svg
+                      className="w-4 h-4 transform rotate-45 -mt-px"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                      ></path>
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Chats;

components/DashBoard/Coins.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+interface CoinsProps {
+  mode?: "earned" | "spent";
+}
+
+const Coins: React.FC<CoinsProps> = ({ mode = "earned" }) => {
+  const handleMouseEnter = (
+    event: React.MouseEvent<HTMLVideoElement, MouseEvent>
+  ) => {
+    const video = event.currentTarget;
+    video.play();
+  };
+
+  return (
+    <div>
+      <section>
+        <div className="relative items-center w-full px-5  mx-auto md:px-12 lg:px-20 max-w-7xl">
+          <div className="grid w-full grid-cols-2 mx-auto lg:grid-cols-3">
+            {["ETH", "USDT", "USDC"].map((coin) => (
+              <div key={coin} className="max-w-md p-6 mx-auto relative">
+                <video
+                  onMouseEnter={handleMouseEnter}
+                  muted
+                  src={`${coin}.webm`}
+                  className="w-full h-full object-cover rounded-xl"
+                />
+                <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10 bg-gray-800 bg-opacity-60 p-4 px-10 rounded-xl ">
+                  <div className="text-lg font-medium leading-6 text-white">
+                    {`Total ${mode.charAt(0).toUpperCase() + mode.slice(1)}`}
+                    <br />
+                    <div className="flex items-center justify-center h-full">
+                      <span className="font-light">{`200 ${coin}`}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Coins;