46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { HelpCircle } from 'lucide-react';
|
|
import { XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { adminPath } from '../../constants';
|
|
import { useAdminTheme } from '../theme';
|
|
|
|
type ContextHelpLinkProps = {
|
|
slug: string;
|
|
label?: string;
|
|
};
|
|
|
|
export function ContextHelpLink({ slug, label }: ContextHelpLinkProps) {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('common');
|
|
const { border, primary, surfaceMuted, textStrong } = useAdminTheme();
|
|
const resolvedLabel = label ?? t('common.help', 'Help');
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={() => navigate(adminPath(`/mobile/help/${encodeURIComponent(slug)}`))}
|
|
aria-label={resolvedLabel}
|
|
>
|
|
<XStack
|
|
alignItems="center"
|
|
space="$1.5"
|
|
paddingHorizontal="$2.5"
|
|
paddingVertical="$1.5"
|
|
borderRadius={999}
|
|
borderWidth={1}
|
|
borderColor={border}
|
|
backgroundColor={surfaceMuted}
|
|
>
|
|
<HelpCircle size={14} color={primary} />
|
|
<Text fontSize="$xs" fontWeight="700" color={textStrong}>
|
|
{resolvedLabel}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
}
|