Add setup and restore flow

This commit is contained in:
2026-08-06 08:22:33 +02:00
parent 19e4621aeb
commit 72229cf14c
15 changed files with 511 additions and 94 deletions
+35 -27
View File
@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { helpSections } from "../help-content";
import { cn } from "../lib/utils";
function WorkflowList({ items }: { items: string[] }) {
return (
@@ -68,38 +69,44 @@ export function FaqPage() {
</Card>
<div className="grid gap-3 xl:grid-cols-2">
{helpSections.map((section) => (
<Card key={section.id} id={section.id} className="scroll-mt-16">
{helpSections.map((section) => {
const isWide = section.id === "grundprinzip" || section.id === "monatsworkflow";
const isWorkflow = section.id === "monatsworkflow";
return (
<Card key={section.id} id={section.id} className={cn("scroll-mt-16", isWide ? "xl:col-span-2" : "")}>
<CardHeader className="p-4">
<CardTitle>{section.title}</CardTitle>
<CardDescription>{section.description}</CardDescription>
</CardHeader>
<CardContent className="space-y-4 px-4 pb-4">
<div className="rounded-md border bg-muted/20 p-3">
<p className="mb-2 text-sm font-medium">Kurzfassung</p>
<ul className="space-y-2 text-sm text-muted-foreground">
{section.quickItems.map((item) => (
<li key={item} className="flex gap-2">
<span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary" />
<span>{item}</span>
</li>
))}
</ul>
<CardContent className={cn("px-4 pb-4", isWorkflow ? "grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.9fr)]" : "space-y-4")}>
<div className="space-y-4">
<div className="rounded-md border bg-muted/20 p-3">
<p className="mb-2 text-sm font-medium">Kurzfassung</p>
<ul className="space-y-2 text-sm text-muted-foreground">
{section.quickItems.map((item) => (
<li key={item} className="flex gap-2">
<span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary" />
<span>{item}</span>
</li>
))}
</ul>
</div>
<div>
<p className="mb-2 text-sm font-medium">Details</p>
<ul className="space-y-2 text-sm text-muted-foreground">
{section.details.map((item) => (
<li key={item} className="flex gap-2">
<span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary/70" />
<span>{item}</span>
</li>
))}
</ul>
</div>
{section.workflow ? <WorkflowList items={section.workflow} /> : null}
</div>
<div>
<p className="mb-2 text-sm font-medium">Details</p>
<ul className="space-y-2 text-sm text-muted-foreground">
{section.details.map((item) => (
<li key={item} className="flex gap-2">
<span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary/70" />
<span>{item}</span>
</li>
))}
</ul>
</div>
{section.workflow ? <WorkflowList items={section.workflow} /> : null}
{section.diagram ? <FlowDiagram items={section.diagram} /> : null}
<div className="flex justify-end">
<div className={cn("flex justify-end", isWorkflow ? "lg:col-span-2" : "")}>
<Button asChild variant="ghost" size="sm">
<a href="#top">
<ArrowUp className="size-4" />
@@ -109,7 +116,8 @@ export function FaqPage() {
</div>
</CardContent>
</Card>
))}
);
})}
</div>
</div>
);