54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { ListTreeIcon } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer";
|
|
|
|
export interface GuideSectionLink {
|
|
id: string;
|
|
label: string;
|
|
}
|
|
|
|
export function SectionDrawer({ sections }: { sections: GuideSectionLink[] }) {
|
|
return (
|
|
<div className="lg:hidden">
|
|
<Drawer showSwipeHandle>
|
|
<DrawerTrigger render={<Button variant="outline" className="w-full" />}>
|
|
<ListTreeIcon aria-hidden="true" />
|
|
สารบัญหน้านี้
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>สารบัญหน้านี้</DrawerTitle>
|
|
<DrawerDescription>เลือกหัวข้อเพื่อเลื่อนไปยังเนื้อหา</DrawerDescription>
|
|
</DrawerHeader>
|
|
<nav aria-label="สารบัญบนมือถือ" className="grid gap-1 overflow-y-auto p-4">
|
|
{sections.map((section) => (
|
|
<DrawerClose
|
|
key={section.id}
|
|
render={
|
|
<a
|
|
href={`#${section.id}`}
|
|
className="flex min-h-11 items-center rounded-lg px-3 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
/>
|
|
}
|
|
>
|
|
{section.label}
|
|
</DrawerClose>
|
|
))}
|
|
</nav>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
}
|