42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
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 (
|
|
<>
|
|
<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>
|
|
</>
|
|
)
|
|
}
|