diff --git a/src/components/templates/video/VideoTemplatesCategorySidebar.tsx b/src/components/templates/video/VideoTemplatesCategorySidebar.tsx index 09170cc..eea5148 100644 --- a/src/components/templates/video/VideoTemplatesCategorySidebar.tsx +++ b/src/components/templates/video/VideoTemplatesCategorySidebar.tsx @@ -29,11 +29,10 @@ const SIDEBAR_CATEGORIES: { id: VideoSidebarCategoryId; labelKey: string; icon: ComponentType<{ className?: string }>; - count?: number; }[] = [ { id: "all", labelKey: "categoryAll", icon: LayoutGrid }, - { id: "animation", labelKey: "categoryAnimation", icon: Play, count: 418 }, - { id: "intros", labelKey: "categoryIntros", icon: Clapperboard, count: 851 }, + { id: "animation", labelKey: "categoryAnimation", icon: Play }, + { id: "intros", labelKey: "categoryIntros", icon: Clapperboard }, { id: "editing", labelKey: "categoryEditing", icon: Scissors }, { id: "invitation", labelKey: "categoryInvitation", icon: Mail }, { id: "holiday", labelKey: "categoryHoliday", icon: Gift }, @@ -54,6 +53,8 @@ interface VideoTemplatesCategorySidebarProps { onAspectRatioChange: (value: AspectRatioFilter) => void; showFilters: boolean; onToggleFilters: () => void; + /** Live template count per category id (+ "all"), computed from the catalog. */ + counts?: Record; } export function VideoTemplatesCategorySidebar({ @@ -65,6 +66,7 @@ export function VideoTemplatesCategorySidebar({ onAspectRatioChange, showFilters, onToggleFilters, + counts, }: VideoTemplatesCategorySidebarProps) { const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesCategorySidebar"); return ( @@ -93,9 +95,9 @@ export function VideoTemplatesCategorySidebar({ aria-hidden /> {t(category.labelKey)} - {category.count !== undefined ? ( + {counts?.[category.id] ? ( - {category.count} + {counts[category.id].toLocaleString()} ) : null} diff --git a/src/components/templates/video/VideoTemplatesPageContent.tsx b/src/components/templates/video/VideoTemplatesPageContent.tsx index d61dd3c..adc5544 100644 --- a/src/components/templates/video/VideoTemplatesPageContent.tsx +++ b/src/components/templates/video/VideoTemplatesPageContent.tsx @@ -66,6 +66,15 @@ export function VideoTemplatesPageContent({ // Real admin-sourced templates only — no hardcoded demo fallback. const catalog = initialCatalog ?? []; + // Live template count per sidebar category (+ total), computed from the catalog. + const categoryCounts = useMemo(() => { + const counts: Record = { all: catalog.length }; + for (const tpl of catalog) { + counts[tpl.videoCategory] = (counts[tpl.videoCategory] ?? 0) + 1; + } + return counts; + }, [catalog]); + const filtered = useMemo( () => filterVideoCatalog(catalog, { @@ -120,6 +129,7 @@ export function VideoTemplatesPageContent({ onAspectRatioChange={setAspectRatio} showFilters={showFilters} onToggleFilters={() => setShowFilters((v) => !v)} + counts={categoryCounts} />