Files
wild-central/web/src/components/HelpPanel.tsx
Paul Payne 735f3fcb05 feat: Add Wild Central web app (Central-only UI)
Extract Central pages from the wild-cloud web app into a standalone
React app for Wild Central. Includes:

- Central overview, DNS, DHCP, Firewall, VPN, Ingress, CrowdSec pages
- Simplified sidebar with Central-only navigation
- Branding updated to "Wild Central"
- All Cloud-specific pages, components, hooks, and API services removed
- TypeScript type-check and production build pass

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-07-09 04:10:43 +00:00

42 lines
1.4 KiB
TypeScript

import { useHelp } from '../contexts/HelpContext';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './ui/sheet';
import { Card } from './ui/card';
export function HelpPanel() {
const { helpContent, isHelpOpen, setIsHelpOpen } = useHelp();
if (!helpContent) return null;
return (
<Sheet open={isHelpOpen} onOpenChange={setIsHelpOpen}>
<SheetContent className="w-full sm:max-w-lg overflow-y-auto p-6">
<SheetHeader className="mb-6">
<SheetTitle className="flex items-center gap-3">
{helpContent.icon && (
<div className={`p-2 rounded-lg ${helpContent.color || 'bg-primary/10'}`}>
{helpContent.icon}
</div>
)}
{helpContent.title}
</SheetTitle>
<SheetDescription className="sr-only">
Help information for {helpContent.title}
</SheetDescription>
</SheetHeader>
<div className="space-y-4">
<Card className={`p-4 ${helpContent.color || 'bg-muted/50'}`}>
<div className="prose dark:prose-invert max-w-none text-sm">
{helpContent.description}
</div>
</Card>
{helpContent.actions && (
<div className="flex gap-2 flex-wrap">
{helpContent.actions}
</div>
)}
</div>
</SheetContent>
</Sheet>
);
}