109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import {
|
|
IconArrowRight,
|
|
IconBook2,
|
|
IconBraces,
|
|
IconCopy,
|
|
IconPlugConnected,
|
|
IconSearch,
|
|
IconTools,
|
|
} from "@tabler/icons-react";
|
|
import Link from "next/link";
|
|
|
|
import { SectionContainer } from "@/components/pages/home/container/section-container";
|
|
|
|
const destinations = [
|
|
{
|
|
href: "/docs/getting-started",
|
|
icon: IconBook2,
|
|
title: "Install Homarr",
|
|
description: "Choose a platform and get your first instance running.",
|
|
},
|
|
{
|
|
href: "/docs/integrations",
|
|
icon: IconPlugConnected,
|
|
title: "Connect integrations",
|
|
description: "Add the services Homarr can monitor and control.",
|
|
},
|
|
{
|
|
href: "/docs/widgets",
|
|
icon: IconTools,
|
|
title: "Configure widgets",
|
|
description: "See available widgets and their configuration.",
|
|
},
|
|
{
|
|
href: "/api-reference",
|
|
icon: IconBraces,
|
|
title: "Explore the API",
|
|
description: "Use the generated reference for supported endpoints.",
|
|
},
|
|
] as const;
|
|
|
|
export function DocsGateway() {
|
|
return (
|
|
<section className="py-12 sm:py-16" aria-labelledby="docs-gateway-title">
|
|
<SectionContainer>
|
|
<div className="grid overflow-hidden border bg-fd-card lg:grid-cols-[0.9fr_1.1fr]">
|
|
<div className="flex flex-col justify-between border-b p-7 sm:p-10 lg:border-b-0 lg:border-r">
|
|
<div>
|
|
<h2 id="docs-gateway-title" className="m-0 text-3xl font-bold tracking-tight sm:text-4xl">
|
|
Documentation
|
|
</h2>
|
|
<p className="mb-0 mt-5 max-w-lg leading-7 text-fd-muted-foreground">
|
|
Choose a starting point, search the documentation, or use the Markdown and LLM-readable versions.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-3 text-sm">
|
|
<div className="flex items-center gap-3 text-fd-muted-foreground">
|
|
<IconSearch aria-hidden="true" size={18} />
|
|
<span>Search all documentation</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-fd-muted-foreground">
|
|
<IconCopy aria-hidden="true" size={18} />
|
|
<span>Copy or view each guide as Markdown</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 pt-2">
|
|
<a
|
|
className="rounded-md bg-fd-muted px-2.5 py-1 font-mono text-xs hover:text-fd-primary"
|
|
href="/llms.txt"
|
|
>
|
|
/llms.txt
|
|
</a>
|
|
<a
|
|
className="rounded-md bg-fd-muted px-2.5 py-1 font-mono text-xs hover:text-fd-primary"
|
|
href="/llms-full.txt"
|
|
>
|
|
/llms-full.txt
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav aria-label="Documentation starting points">
|
|
{destinations.map(({ href, icon: Icon, title, description }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="group grid grid-cols-[2.5rem_1fr_auto] items-center gap-4 border-b p-5 text-fd-foreground transition-colors last:border-b-0 hover:bg-fd-muted/70 sm:p-6"
|
|
>
|
|
<span className="flex size-10 items-center justify-center rounded-md bg-fd-muted text-fd-primary">
|
|
<Icon aria-hidden="true" size={21} />
|
|
</span>
|
|
<span>
|
|
<strong className="block text-sm font-semibold">{title}</strong>
|
|
<span className="mt-1 block text-sm leading-5 text-fd-muted-foreground">{description}</span>
|
|
</span>
|
|
<IconArrowRight
|
|
aria-hidden="true"
|
|
className="text-fd-muted-foreground transition-transform group-hover:translate-x-1 group-hover:text-fd-primary"
|
|
size={19}
|
|
/>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</SectionContainer>
|
|
</section>
|
|
);
|
|
}
|