87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useMatch, useNavigate } from 'react-router-dom';
|
|
import { Box, Text, Tooltip, TooltipProvider, color, toRem } from 'folds';
|
|
import { PageNavHeader } from '../../../components/page';
|
|
import { BOTS_PATH, DIRECT_PATH } from '../../paths';
|
|
import { isNativePlatform } from '../../../utils/capacitor';
|
|
|
|
type SegmentProps = {
|
|
active: boolean;
|
|
disabled?: boolean;
|
|
label: string;
|
|
onClick?: () => void;
|
|
};
|
|
const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
|
|
({ active, disabled, label, onClick }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
type="button"
|
|
onClick={disabled ? undefined : onClick}
|
|
aria-pressed={active}
|
|
aria-disabled={disabled || undefined}
|
|
style={{
|
|
appearance: 'none',
|
|
border: 'none',
|
|
background: active ? color.Background.ContainerActive : 'transparent',
|
|
color: color.Background.OnContainer,
|
|
opacity: disabled ? 0.45 : 1,
|
|
cursor: disabled ? 'default' : 'pointer',
|
|
padding: `${toRem(6)} ${toRem(10)}`,
|
|
borderRadius: toRem(6),
|
|
font: 'inherit',
|
|
fontWeight: active ? 600 : 500,
|
|
fontSize: toRem(13),
|
|
lineHeight: 1.2,
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
)
|
|
);
|
|
|
|
export function DirectStreamHeader() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const comingSoon = t('Direct.segment_coming_soon');
|
|
|
|
const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: false });
|
|
const botsMatch = useMatch({ path: BOTS_PATH, caseSensitive: true, end: false });
|
|
|
|
const navOpts = { replace: isNativePlatform() };
|
|
|
|
return (
|
|
<PageNavHeader>
|
|
<Box alignItems="Center" grow="Yes" gap="100">
|
|
<Segment
|
|
active={!!directMatch}
|
|
label={t('Direct.segment_dm')}
|
|
onClick={() => navigate(DIRECT_PATH, navOpts)}
|
|
/>
|
|
<TooltipProvider
|
|
delay={400}
|
|
position="Bottom"
|
|
tooltip={
|
|
<Tooltip>
|
|
<Text size="T200">{comingSoon}</Text>
|
|
</Tooltip>
|
|
}
|
|
>
|
|
{(triggerRef) => (
|
|
<Segment
|
|
ref={triggerRef as React.RefCallback<HTMLButtonElement>}
|
|
active={false}
|
|
disabled
|
|
label={t('Direct.segment_channels')}
|
|
/>
|
|
)}
|
|
</TooltipProvider>
|
|
<Segment
|
|
active={!!botsMatch}
|
|
label={t('Direct.segment_bots')}
|
|
onClick={() => navigate(BOTS_PATH, navOpts)}
|
|
/>
|
|
</Box>
|
|
</PageNavHeader>
|
|
);
|
|
}
|