Merge branch 'main' of http://192.168.1.163:3000/inmake/stream.graff.tech-new

client/src/components/ui/ActionsPopover.tsx

@@ -1,4 +1,6 @@
 import { useState, useRef, useEffect } from "react";
+import Button from "./Button";
+import MoreIcon from "../icons/MoreIcon";
 
 interface ActionsPopoverProps {
   options: {
@@ -37,9 +39,6 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
       const buttonRect = buttonRef.current.getBoundingClientRect();
       const spaceBelow = window.innerHeight - buttonRect.bottom;
       const spaceAbove = buttonRect.top;
-
-      console.log(spaceBelow, menuHeight, spaceAbove);
-      // Если снизу недостаточно места, но сверху достаточно - открываем вверх
       if (spaceBelow < menuHeight && spaceAbove > menuHeight) {
         setOpenUpwards(true);
       } else {
@@ -52,12 +51,12 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
     <div className="relative" ref={popoverRef}>
       <button
         ref={buttonRef}
-        className="flex items-center justify-center gap-[0.139vw] size-[1.667vw]"
+        className="flex items-center justify-center gap-[0.139vw] size-[1.667vw] rounded-[0.556vw] text-[#CCCCCC] hover:text-[#7D7D7D] hover:bg-[#F3F3F3] active:text-[#141414] "
         onClick={() => setIsOpened(!isOpened)}
       >
-        <div className="size-[0.208vw] rounded-full bg-[#CCCCCC]" />
-        <div className="size-[0.208vw] rounded-full bg-[#CCCCCC]" />
-        <div className="size-[0.208vw] rounded-full bg-[#CCCCCC]" />
+        <div className="size-[1.111vw] rounded-[0.556vw]">
+          <MoreIcon />
+        </div>
       </button>
 
       {isOpened && (
@@ -65,24 +64,21 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
           ref={(el) => {
             setMenuHeight(el?.offsetHeight || 0);
           }}
-          className={`absolute z-10 right-0 w-[13.333vw] bg-white rounded-[1.111vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] ${
+          className={`absolute z-10 right-0 w-[13.333vw] bg-white rounded-[1.111vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] overflow-hidden ${
             openUpwards ? "bottom-[100%]" : "top-[100%]"
           }`}
         >
           {options.map((option) => (
-            <button
-              className="p-[0.833vw] button-s text-[#7D7D7D] w-full flex items-center gap-[0.556vw]"
+            <Button
+              variant="tertiary"
+              className="p-[0.833vw] button-s w-full flex items-center !rounded-none !justify-start gap-[0.556vw]"
               key={option.label}
               onClick={option.onClick}
               disabled={option.disabled}
-              style={{
-                backgroundColor: option.disabled ? "#F6F6F6" : "transparent",
-                opacity: option.disabled ? 0.5 : 1,
-              }}
             >
               <div className="size-[1.111vw] ">{option.icon}</div>
               {option.label}
-            </button>
+            </Button>
           ))}
         </div>
       )}

client/src/components/ui/Avatar.tsx

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import Warning from "../indicators/Warning";
+import Admin from "../indicators/Admin";
+
+interface AvatarProps {
+  size: "small" | "medium" | "large";
+  status?: "caution" | "admin";
+  src?: string;
+  name?: string;
+}
+
+export default function Avatar({ size, status, src, name }: AvatarProps) {
+  return (
+    <div
+      className={clsx(
+        "rounded-full text-white relative",
+        size === "small" && "size-[2.222vw] button-s",
+        size === "medium" && "size-[2.5vw] button-m",
+        size === "large" && "size-[3.333vw] title-s"
+      )}
+    >
+      {GetAvatarImage(src, name)}
+      <div
+        className={clsx(
+          "absolute",
+          size === "small" && "bottom-[1.389vw] left-[1.389vw]",
+          size === "medium" && "bottom-[1.667vw] left-[1.667vw]",
+          size === "large" && "bottom-[2.5vw] left-[2.5vw]"
+        )}
+      >
+        {status === "caution" && <Warning type="caution" />}
+        {status === "admin" && <Admin />}
+      </div>
+    </div>
+  );
+}
+
+function GetAvatarImage(src?: string, name?: string) {
+  // Aninymous avatar
+  if (!src && !name) {
+    return <img src="/img/popups/MessageUserPfp.png" alt="avatar" />;
+  }
+
+  // Name avatar
+  if (name && !src) {
+    const nameParts = name.split(" ");
+    const firstLetter = nameParts[0][0].toUpperCase();
+    const secondLetter =
+      nameParts.length > 1
+        ? nameParts[nameParts.length - 1][0].toUpperCase()
+        : "";
+
+    return (
+      <div className="bg-[#7B60F3] size-full rounded-full flex items-center justify-center">
+        <span className="">
+          {firstLetter}
+          {secondLetter}
+        </span>
+      </div>
+    );
+  }
+
+  // Src avatar
+  return <img src={src} alt="avatar" />;
+}