echos-ocr/src/app/(dashboard)/docs/layout.tsx
Randall Stillwell 3a75bfa7de Add in-app Contact Support dialog and Help Center docs
Route all support channels to support@stillwell.cloud for Libredesk
email ingest, add a global Contact Support dialog (category/subject/
message) that posts to POST /api/support with per-user rate limiting,
and build a /docs Help Center hub with Getting Started, Uploading
Cards, Forms & Templates, Reports & Exports, FAQ, and Troubleshooting
sections. Replaces stale echoocr.com/echoocr.app addresses across
marketing footer, terms, privacy, pricing, welcome, and features.

Made-with: Cursor
2026-04-24 15:10:56 -05:00

85 lines
2.9 KiB
TypeScript

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
BookOpen,
Rocket,
Upload,
FileText,
Plug,
BarChart3,
HelpCircle,
Wrench,
LifeBuoy,
ArrowRight,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { openContactSupport } from "@/components/support/contact-support-dialog";
const SECTIONS = [
{ href: "/docs", label: "Overview", icon: BookOpen, exact: true },
{ href: "/docs/getting-started", label: "Getting Started", icon: Rocket },
{ href: "/docs/uploading-cards", label: "Uploading Cards", icon: Upload },
{ href: "/docs/forms-templates", label: "Forms & Templates", icon: FileText },
{ href: "/docs/integrations", label: "Integrations", icon: Plug },
{ href: "/docs/reports-exports", label: "Reports & Exports", icon: BarChart3 },
{ href: "/docs/faq", label: "FAQ", icon: HelpCircle },
{ href: "/docs/troubleshooting", label: "Troubleshooting", icon: Wrench },
];
export default function DocsLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
return (
<div className="flex flex-col gap-6 lg:flex-row">
<nav className="flex gap-1 overflow-x-auto lg:sticky lg:top-24 lg:h-fit lg:w-60 lg:shrink-0 lg:flex-col">
{SECTIONS.map((section) => {
const active = section.exact
? pathname === section.href
: pathname === section.href ||
pathname.startsWith(section.href + "/");
const Icon = section.icon;
return (
<Link
key={section.href}
href={section.href}
className={cn(
"flex items-center gap-2.5 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors",
active
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
)}
>
<Icon className="size-4 shrink-0" />
{section.label}
</Link>
);
})}
<div className="mt-4 rounded-xl border border-border/60 bg-muted/30 p-4 lg:max-w-60">
<div className="mb-2 flex items-center gap-2">
<div className="flex size-7 items-center justify-center rounded-md bg-primary/10 text-primary">
<LifeBuoy className="size-3.5" />
</div>
<p className="text-sm font-semibold">Still stuck?</p>
</div>
<p className="mb-3 text-xs leading-relaxed text-muted-foreground">
Can't find what you need? Our team is happy to help.
</p>
<Button size="sm" className="w-full" onClick={openContactSupport}>
Contact support
<ArrowRight className="size-3.5" />
</Button>
</div>
</nav>
<div className="min-w-0 flex-1">{children}</div>
</div>
);
}