upd

src/components/Chat.tsx

@@ -98,7 +98,7 @@ function Chat({ className, handleClose }: ChatProps) {
       ].join(" ")}
     >
       <div className="border-b pb-3 border-y-neutral-800 flex justify-between">
-        <p className="text-2xl ">Chat</p>
+        <p className="text-2xl font-gilroy">Чат</p>
         <button onClick={handleClose}>
           <CloseIcon />
         </button>
@@ -109,7 +109,7 @@ function Chat({ className, handleClose }: ChatProps) {
       >
         {messages.map((data, index) => (
           <p key={index} className="break-words">
-            <b>{data.id}:</b> <span>{data.message}</span>
+            <b>{data.city && data.city + ":"}</b> <span>{data.message}</span>
           </p>
         ))}
 
@@ -141,7 +141,7 @@ function Chat({ className, handleClose }: ChatProps) {
         <input
           ref={inputRef}
           type="text"
-          placeholder="Message"
+          placeholder="Написать сообщение..."
           autoFocus
           autoComplete="off"
           value={message}
@@ -152,7 +152,7 @@ function Chat({ className, handleClose }: ChatProps) {
           type="submit"
           className="p-2 bg-blue-700 hover:bg-blue-800 transition-colors outline-none rounded"
         >
-          Send
+          Отправить
         </button>
       </form>
     </div>

src/components/modals/AFKTimerModal.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import useModalStore from "../../stores/useModalStore";
+
+function AFKTimerModal() {
+  const setModal = useModalStore((state) => state.setModal);
+  const [afkTimer, setAfkTimer] = useState<number>(60);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setAfkTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px]">
+      <div className="flex flex-col gap-4">
+        <p className="text-2xl">AFK Check</p>
+        <p>Session will end in {afkTimer} seconds</p>
+        <button
+          onClick={() => setModal(null)}
+          className="px-3 py-2 bg-blue-600 hover:bg-blue-700 transition-colors rounded"
+        >
+          I'm here
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default AFKTimerModal;