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>
42 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|