64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { Breadcrumbs } from "@/components/breadcrumbs"
|
|
import { PublicInset, PublicPageHeader } from "@/components/public-surface"
|
|
import { ManualsPageShell } from "@/components/manuals-page-shell"
|
|
import {
|
|
groupManuals,
|
|
getCategories,
|
|
getManufacturers,
|
|
} from "@/lib/manuals-catalog"
|
|
import type { Manual } from "@/lib/manuals-types"
|
|
|
|
interface ManualsPageExperienceProps {
|
|
initialManuals: Manual[]
|
|
}
|
|
|
|
export function ManualsPageExperience({
|
|
initialManuals,
|
|
}: ManualsPageExperienceProps) {
|
|
const groupedManuals = useMemo(
|
|
() => groupManuals(initialManuals),
|
|
[initialManuals]
|
|
)
|
|
const manufacturers = useMemo(
|
|
() => getManufacturers(initialManuals),
|
|
[initialManuals]
|
|
)
|
|
const categories = useMemo(
|
|
() => getCategories(initialManuals),
|
|
[initialManuals]
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<Breadcrumbs
|
|
className="mb-6"
|
|
items={[{ label: "Manuals", href: "/manuals" }]}
|
|
/>
|
|
|
|
<PublicPageHeader
|
|
eyebrow="Manual Library"
|
|
title="Vending Machine Manuals"
|
|
description="Download manuals, service guides, and parts documentation for hundreds of vending machine models. Browse by manufacturer, machine type, or search by model details."
|
|
>
|
|
<PublicInset className="inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
|
|
<span>
|
|
<strong>{initialManuals.length}</strong> manuals available from{" "}
|
|
<strong>{manufacturers.length}</strong> manufacturers
|
|
</span>
|
|
</PublicInset>
|
|
</PublicPageHeader>
|
|
|
|
<div className="mt-8 md:mt-10">
|
|
<ManualsPageShell
|
|
manuals={initialManuals}
|
|
groupedManuals={groupedManuals}
|
|
manufacturers={manufacturers}
|
|
categories={categories}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|