diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.css b/web/chat/member-list-sidebar/member-list-sidebar-header.css new file mode 100644 index 000000000..9f1c89e95 --- /dev/null +++ b/web/chat/member-list-sidebar/member-list-sidebar-header.css @@ -0,0 +1,28 @@ +.container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + height: 100%; +} + +.headerContent { + display: flex; + align-items: center; + column-gap: 16px; +} + +.headerLabel { + color: var(--text-background-primary-default); + font-size: var(--m-font-16); + font-weight: var(--semi-bold); +} + +.closeButton { + display: flex; + color: var(--button-label-tertiary-default); +} +.closeButton:hover { + cursor: pointer; + color: var(--button-label-tertiary-hover); +} diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.react.js b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js new file mode 100644 index 000000000..bcf37b119 --- /dev/null +++ b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js @@ -0,0 +1,52 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; + +import css from './member-list-sidebar-header.css'; +import { useMemberListSidebarContext } from './member-list-sidebar-provider.react.js'; +import AddButton from '../../components/add-button.react.js'; +import { AddMembersModal } from '../../modals/threads/members/add-members-modal.react.js'; + +type Props = { + +threadID: string, +}; + +function MemberListSidebarHeader(props: Props): React.Node { + const { threadID } = props; + + const { pushModal, popModal } = useModalContext(); + + const onClickAddButton = React.useCallback(() => { + pushModal(); + }, [popModal, pushModal, threadID]); + + const { setShowMemberListSidebar } = useMemberListSidebarContext(); + + const onClickCloseButton = React.useCallback(() => { + setShowMemberListSidebar(false); + }, [setShowMemberListSidebar]); + + const memberListSidebarHeader = React.useMemo( + () => ( + <> +
+
+
Member list
+ +
+
+ +
+
+ + ), + [onClickAddButton, onClickCloseButton], + ); + + return memberListSidebarHeader; +} + +export default MemberListSidebarHeader;