diff --git a/client/src/components/indicators/Admin.tsx b/client/src/components/indicators/Admin.tsx new file mode 100644 index 0000000..b4c517c --- /dev/null +++ b/client/src/components/indicators/Admin.tsx @@ -0,0 +1,17 @@ +import clsx from "clsx"; +import CrownIcon from "../icons/CrownIcon"; + +export default function Admin({ className }: { className?: string }) { + return ( +
+
+ +
+
+ ); +} diff --git a/client/src/components/indicators/Booked.tsx b/client/src/components/indicators/Booked.tsx new file mode 100644 index 0000000..f148db3 --- /dev/null +++ b/client/src/components/indicators/Booked.tsx @@ -0,0 +1,17 @@ +import clsx from "clsx"; +import BookedIcon from "../icons/BookedIcon"; + +export default function Booked({ className }: { className?: string }) { + return ( +
+
+ +
+
+ ); +} diff --git a/client/src/components/indicators/Counter.tsx b/client/src/components/indicators/Counter.tsx new file mode 100644 index 0000000..bd20858 --- /dev/null +++ b/client/src/components/indicators/Counter.tsx @@ -0,0 +1,20 @@ +import clsx from "clsx"; + +export default function Counter({ + count, + className, +}: { + count?: number; + className?: string; +}) { + return ( +
+
{count || "#"}
+
+ ); +} diff --git a/client/src/components/indicators/Favorites.tsx b/client/src/components/indicators/Favorites.tsx new file mode 100644 index 0000000..2832b75 --- /dev/null +++ b/client/src/components/indicators/Favorites.tsx @@ -0,0 +1,17 @@ +import clsx from "clsx"; +import HearthFilledIcon from "../icons/HearthFilledIcon"; + +export default function Favorites({ className }: { className?: string }) { + return ( +
+
+ +
+
+ ); +} diff --git a/client/src/components/indicators/Warning.tsx b/client/src/components/indicators/Warning.tsx new file mode 100644 index 0000000..33a2cdd --- /dev/null +++ b/client/src/components/indicators/Warning.tsx @@ -0,0 +1,22 @@ +import clsx from "clsx"; + +export default function Warning({ + type, + className, +}: { + type: "caution" | "critical"; + className?: string; +}) { + return ( +
+ ! +
+ ); +} diff --git a/client/src/components/popups/ParticipantsPopup.tsx b/client/src/components/popups/ParticipantsPopup.tsx index eeaac15..c13bfee 100644 --- a/client/src/components/popups/ParticipantsPopup.tsx +++ b/client/src/components/popups/ParticipantsPopup.tsx @@ -4,11 +4,12 @@ import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon"; import VideoOffFilledIcon from "../icons/VideoOffFilledIcon"; import HandRaisedFilledIcon from "../icons/HandRaisedFilledIcon"; import XMarkFilledIcon from "../icons/XMarkFilledIcon"; +import Avatar from "../ui/Avatar"; export default function ParticipantsPopup() { const participants = [1, 2, 3]; return ( - +
    {participants.map((participant, index) => ( @@ -29,13 +30,7 @@ function ParticipantItem({ id }: { id: string }) { return (
    -
    - user -
    +
    Иван Иванович {id} Роль diff --git a/client/src/components/ui/ActionsPopover.tsx b/client/src/components/ui/ActionsPopover.tsx index 044a449..89cb045 100644 --- a/client/src/components/ui/ActionsPopover.tsx +++ b/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) {
    {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) => ( - + ))}
    )} diff --git a/client/src/components/ui/Avatar.tsx b/client/src/components/ui/Avatar.tsx new file mode 100644 index 0000000..45552ca --- /dev/null +++ b/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 ( +
    + {GetAvatarImage(src, name)} +
    + {status === "caution" && } + {status === "admin" && } +
    +
    + ); +} + +function GetAvatarImage(src?: string, name?: string) { + // Aninymous avatar + if (!src && !name) { + return 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 ( +
    + + {firstLetter} + {secondLetter} + +
    + ); + } + + // Src avatar + return avatar; +} diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx index 5f55ef6..ab75ce3 100644 --- a/client/src/pages/HomePage.tsx +++ b/client/src/pages/HomePage.tsx @@ -7,7 +7,7 @@ import usePopupStore from "../store/popupStore"; import SettingsModal from "../components/modals/SettingsModal"; import useModalStore from "../store/modalStore"; import CogFilledIcon from "../components/icons/CogFilledIcon"; -import SharePopup from "../components/popups/SharePopup"; +import ParticipantsPopup from "../components/popups/ParticipantsPopup"; function HomePage() { const { data: user } = useMe(); @@ -32,11 +32,7 @@ function HomePage() { - setPopup( - - ) - } + onClick={() => setPopup()} >