68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useMemo, useState } 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 { fetchPublishedManualsCatalog } from '@/lib/manuals-live-catalog'
|
|
import type { Manual } from '@/lib/manuals-types'
|
|
|
|
interface ManualsPageExperienceProps {
|
|
initialManuals: Manual[]
|
|
}
|
|
|
|
export function ManualsPageExperience({ initialManuals }: ManualsPageExperienceProps) {
|
|
const [manuals, setManuals] = useState(initialManuals)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
void (async () => {
|
|
const liveManuals = await fetchPublishedManualsCatalog()
|
|
if (cancelled || liveManuals.length === 0) {
|
|
return
|
|
}
|
|
|
|
setManuals((current) => {
|
|
if (liveManuals.length === current.length) {
|
|
return current
|
|
}
|
|
|
|
return liveManuals
|
|
})
|
|
})()
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [])
|
|
|
|
const groupedManuals = useMemo(() => groupManuals(manuals), [manuals])
|
|
const manufacturers = useMemo(() => getManufacturers(manuals), [manuals])
|
|
const categories = useMemo(() => getCategories(manuals), [manuals])
|
|
|
|
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>{manuals.length}</strong> manuals available from <strong>{manufacturers.length}</strong> manufacturers
|
|
</span>
|
|
</PublicInset>
|
|
</PublicPageHeader>
|
|
|
|
<div className="mt-8 md:mt-10">
|
|
<ManualsPageShell
|
|
manuals={manuals}
|
|
groupedManuals={groupedManuals}
|
|
manufacturers={manufacturers}
|
|
categories={categories}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|