11bb83a85d
- Add CreatePlugin.tsx page for custom plugin creation with code editor - Add HelpButton component for contextual help links - Create 21 new help pages covering all dashboard features: - Core: Dashboard, Scheduler, Tasks - Manage: Customers, Services, Resources, Staff - Communicate: Messages (Ticketing already existed) - Money: Payments - Extend: Plugins overview and creation guide - Settings: General, Resource Types, Booking, Appearance, Email, Domains, API, Auth, Billing, Quota - Update HelpGuide.tsx as main documentation hub with quick start guide - Add routes for all help pages in App.tsx - Add HelpButton to Dashboard, Customers, Services, and Tasks pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
34 lines
978 B
TypeScript
34 lines
978 B
TypeScript
/**
|
|
* HelpButton Component
|
|
*
|
|
* A contextual help button that appears at the top-right of pages
|
|
* and links to the relevant help documentation.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { HelpCircle } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface HelpButtonProps {
|
|
helpPath: string;
|
|
className?: string;
|
|
}
|
|
|
|
const HelpButton: React.FC<HelpButtonProps> = ({ helpPath, className = '' }) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Link
|
|
to={helpPath}
|
|
className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors ${className}`}
|
|
title={t('common.help', 'Help')}
|
|
>
|
|
<HelpCircle size={18} />
|
|
<span className="hidden sm:inline">{t('common.help', 'Help')}</span>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default HelpButton;
|