diff --git a/web/sidebar/subchannels-button.css b/web/sidebar/subchannels-button.css new file mode 100644 --- /dev/null +++ b/web/sidebar/subchannels-button.css @@ -0,0 +1,18 @@ +.iconWrapper { + width: 16px; + height: 16px; + align-items: center; + justify-content: center; + display: flex; + margin-right: 2px; +} + +.icon { + color: var(--drawer-expand-button); +} + +.text { + color: var(--drawer-expand-button); + font-size: var(--s-font-14); + font-weight: var(--semi-bold); +} diff --git a/web/sidebar/subchannels-button.react.js b/web/sidebar/subchannels-button.react.js new file mode 100644 --- /dev/null +++ b/web/sidebar/subchannels-button.react.js @@ -0,0 +1,39 @@ +// @flow + +import * as React from 'react'; +import { CornerDownRight } from 'react-feather'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import type { ThreadInfo } from 'lib/types/thread-types'; + +import css from './subchannels-button.css'; +import Button from '../components/button.react.js'; +import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react.js'; + +type Props = { + +threadInfo: ThreadInfo, +}; + +function SubchannelsButton(props: Props): React.Node { + const { threadInfo } = props; + const { pushModal, popModal } = useModalContext(); + + const onClick = React.useCallback( + () => + pushModal( + , + ), + [popModal, pushModal, threadInfo.id], + ); + + return ( + + ); +} + +export default SubchannelsButton;