Add contextual help links to admin pages

resources/js/admin/mobile/components/ContextHelpLink.tsx

@@ -0,0 +1,42 @@
+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 { adminPath } from '../../constants';
+import { useAdminTheme } from '../theme';
+
+type ContextHelpLinkProps = {
+  slug: string;
+  label?: string;
+};
+
+export function ContextHelpLink({ slug, label = 'Help' }: ContextHelpLinkProps) {
+  const navigate = useNavigate();
+  const { border, primary, surfaceMuted, textStrong } = useAdminTheme();
+
+  return (
+    <Pressable
+      onPress={() => navigate(adminPath(`/mobile/help/${encodeURIComponent(slug)}`))}
+      aria-label={label}
+    >
+      <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}>
+          {label}
+        </Text>
+      </XStack>
+    </Pressable>
+  );
+}