@c-rex/components 0.3.0-build.35 → 0.3.0-build.36

package/src/results/filter-navbar.tsx

@@ -6,9 +6,11 @@ import { Button } from "@c-rex/ui/button";
 import { Funnel, X } from "lucide-react";
 import { Badge } from "@c-rex/ui/badge";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { OPERATOR_OPTIONS } from "@c-rex/constants";
+import { DEVICE_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants";
 import { Tags } from "@c-rex/interfaces";
+import { useBreakpoint } from "@c-rex/ui/hooks";
 import { applyFacetPropertyVisibility, FacetLabelOverrides, memoizeFilteredTags } from "./filter-sidebar/utils";
+import { useFilterSidebarState } from "./filter-sidebar/context";
 import { useSearchSettingsStore } from "../stores/search-settings-store";
 import { useRestrictionStore } from "../stores/restriction-store";
 import { useSearchNavigationStore } from "../stores/search-navigation-store";
@@ -38,6 +40,9 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
 }) => {
     const t = useTranslations()
     const locale = useLocale()
+    const device = useBreakpoint();
+    const isMobile = device !== null && device === DEVICE_OPTIONS.MOBILE
+    const { setIsMobileFiltersOpen } = useFilterSidebarState();
     const restrictionList = useRestrictionStore((state) => state.restrictionList);
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
     const [params, setParams] = useQueryStates({
@@ -59,8 +64,6 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
         history: 'push',
         shallow: false,
     });
-    const isMobile = false
-
 
     const filteredTags = useMemo(() => {
         const resolved = memoizeFilteredTags(tags, params.filter, params.packages, {
@@ -70,6 +73,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
         });
         return applyFacetPropertyVisibility(resolved, includeProperties, excludeProperties);
     }, [tags, params.filter, params.packages, locale, facetLabelOverrides, includeZeroHits, includeProperties, excludeProperties]);
+    const hasMobileFilters = Object.entries(filteredTags).length > 0;
 
     const humanizeMetadataKey = (key: string): string =>
         key
@@ -193,99 +197,100 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
             })
 
         return filters
-    }, [filteredTags, params]);
+    }, [filteredTags, params, resolveSectionLabelByKey, restrictionList, t]);
 
     if (filters == null || filters.length === 0) {
         return null;
     }
 
     return (
-        <div className="pb-4 flex justify-between">
-
-            <div className="flex flex-wrap gap-2">
+        <div className="pb-4 flex flex-wrap gap-1">
+            {hasMobileFilters && (
                 <Button
                     size="sm"
                     variant="secondary"
-                    //onClick={() => setOpen(true)}
-                    className="md:hidden"
+                    className="lg:hidden"
+                    aria-label={t("filter.filters")}
+                    onClick={() => setIsMobileFiltersOpen(true)}
                 >
                     <Funnel className="h-2" />
                 </Button>
-
-                {filters.length > 0 && (
-                    <>
-                        {filters.slice(0, 1).map((item) => (
-                            <Badge
-                                key={`${item.key}-${item?.value}`}
-                                variant="outline"
-                                className="h-8"
-                            >
-                                {item?.name ? item.name : item.key}: {item.value}
-
-                                {item.removable && (
-                                    <Button size="xs" variant="ghost" onClick={() => {
-                                        startSearchNavigation();
-                                        setParams({ [item.key]: item?.default })
-                                    }}>
-                                        <X className="h-2" />
-                                    </Button>
-                                )}
-                            </Badge>
-                        ))}
-
-
-                        {isMobile ? (
-                            <TooltipProvider>
-                                <Tooltip delayDuration={100}>
-                                    <TooltipTrigger>
-                                        <Badge
-                                            key={`grouped-filters`}
-                                            variant="outline"
-                                            className="h-8"
-                                        >
-                                            +{filters.length - 1} {t("filter.filters")}
-                                        </Badge>
-
-                                    </TooltipTrigger>
-
-                                    <TooltipContent>
-                                        {filters.slice(1).map((item) => {
-                                            const label = item?.name ? item.name : item.key
-                                            const returnString = `${label}: ${item.value}`;
-                                            return <div className="capitalize" key={returnString}>{returnString}</div>;
-                                        })}
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                        ) : (
-                            <>
-                                {filters.slice(1).map((item) => (
+            )}
+
+            {filters.length > 0 && (
+                <>
+                    {filters.slice(0, 1).map((item) => (
+                        <Badge
+                            key={`${item.key}-${item?.value}`}
+                            variant="outline"
+                            className="h-8"
+                        >
+                            {item?.name ? item.name : item.key}: {item.value}
+
+                            {item.removable && (
+                                <Button size="xs" variant="ghost" onClick={() => {
+                                    startSearchNavigation();
+                                    setParams({ [item.key]: item?.default })
+                                }}>
+                                    <X className="h-2" />
+                                </Button>
+                            )}
+                        </Badge>
+                    ))}
+
+
+                    {isMobile && filters.length > 1 ? (
+                        <TooltipProvider>
+                            <Tooltip delayDuration={100}>
+                                <TooltipTrigger>
                                     <Badge
-                                        key={`${item.key}-${item?.value}`}
+                                        key={`grouped-filters`}
                                         variant="outline"
                                         className="h-8"
                                     >
-                                        {item?.name ? item.name : item.key}: {item.value}
-
-                                        {item.removable && (
-                                            <Button size="xs" variant="ghost" onClick={() => {
-                                                startSearchNavigation();
-                                                setParams({ [item.key]: item?.default })
-                                            }}>
-                                                <X className="h-2" />
-                                            </Button>
-                                        )}
+                                        +{filters.length - 1} {t("filter.filters")}
                                     </Badge>
-                                ))}
-                            </>
-                        )}
-                    </>
-                )}
-            </div>
+
+                                </TooltipTrigger>
+
+                                <TooltipContent>
+                                    {filters.slice(1).map((item) => {
+                                        const label = item?.name ? item.name : item.key
+                                        const returnString = `${label}: ${item.value}`;
+                                        return <div className="capitalize" key={returnString}>{returnString}</div>;
+                                    })}
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    ) : (
+                        <>
+                            {filters.slice(1).map((item) => (
+                                <Badge
+                                    key={`${item.key}-${item?.value}`}
+                                    variant="outline"
+                                    className="h-8"
+                                >
+                                    {item?.name ? item.name : item.key}: {item.value}
+
+                                    {item.removable && (
+                                        <Button size="xs" variant="ghost" onClick={() => {
+                                            startSearchNavigation();
+                                            setParams({ [item.key]: item?.default })
+                                        }}>
+                                            <X className="h-2" />
+                                        </Button>
+                                    )}
+                                </Badge>
+                            ))}
+                        </>
+                    )}
+                </>
+            )}
 
             <Button
                 size="sm"
                 variant="secondary"
+                className="ml-auto"
                 onClick={() => {
                     startSearchNavigation();
                     setParams({ filter: null, packages: null })
@@ -294,6 +299,6 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
                 {t("reset")}
             </Button>
 
-        </div>
+        </div >
     );
 };

package/src/results/filter-sidebar/context.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FC, ReactNode, createContext, useContext, useMemo, useState } from "react";
+
+type FilterSidebarContextValue = {
+    isMobileFiltersOpen: boolean
+    setIsMobileFiltersOpen: (open: boolean) => void
+};
+
+const noop = () => undefined;
+
+const FilterSidebarContext = createContext<FilterSidebarContextValue>({
+    isMobileFiltersOpen: false,
+    setIsMobileFiltersOpen: noop,
+});
+
+export const FilterSidebarProvider: FC<{ children: ReactNode }> = ({ children }) => {
+    const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
+
+    const value = useMemo(() => ({
+        isMobileFiltersOpen,
+        setIsMobileFiltersOpen,
+    }), [isMobileFiltersOpen]);
+
+    return (
+        <FilterSidebarContext.Provider value={value}>
+            {children}
+        </FilterSidebarContext.Provider>
+    );
+};
+
+export const useFilterSidebarState = () => useContext(FilterSidebarContext);

package/src/results/filter-sidebar/index.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { FC, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { useLocale, useTranslations } from 'next-intl'
 import { Check, ChevronDown, ChevronRight } from "lucide-react"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@c-rex/ui/sheet";
 import {
     SidebarContent,
     SidebarGroup,
@@ -30,6 +32,8 @@ import {
 import { FilterItem, Tags } from "@c-rex/interfaces";
 import type { TaxonomyResult } from "@c-rex/services/read-models";
 import { useSearchNavigationStore } from "../../stores/search-navigation-store";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
+import { useFilterSidebarState } from "./context";
 
 
 export interface FilterSidebarProps {
@@ -42,9 +46,7 @@ export interface FilterSidebarProps {
     excludeProperties?: string[]
 }
 
-
-//TODO; check layout on mobile
-export const FilterSidebar: FC<FilterSidebarProps> = ({
+const FilterSidebar: FC<FilterSidebarProps> = ({
     tags,
     totalItemCount,
     facetLabelOverrides,
@@ -55,6 +57,9 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
 }) => {
     const t = useTranslations();
     const locale = useLocale();
+    const device = useBreakpoint();
+    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
+    const { isMobileFiltersOpen, setIsMobileFiltersOpen } = useFilterSidebarState();
     const [params, setParams] = useQueryStates({
         packages: parseAsString,
         filter: parseAsString,
@@ -64,6 +69,10 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
 
+    useEffect(() => {
+        console.log(isMobile, isMobileFiltersOpen)
+    }, [isMobile, isMobileFiltersOpen]);
+
     const filteredTags = useMemo(() => {
         const resolved = memoizeFilteredTags(tags, params.filter, params.packages, {
             uiLanguage: locale,
@@ -379,8 +388,7 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
     };
 
     const content = (
-        <SidebarContent className="!gap-0" suppressHydrationWarning>
-
+        <SidebarContent className="!gap-0 capitalize" suppressHydrationWarning>
             {Object.entries(filteredTags).map(([key, value]) => {
                 const items = value as ResolvedFilterItem[];
                 const hasTaxonomy = Boolean(facetTaxonomies?.[key]);
@@ -403,7 +411,7 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
                             <Collapsible defaultOpen className="py-0 group/collapsible">
                                 <SidebarGroup className="!p-1">
                                     <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
-                                        <CollapsibleTrigger className="!h-8">
+                                        <CollapsibleTrigger className="!h-8 capitalize">
                                             {propertyLabel}
                                             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                         </CollapsibleTrigger>
@@ -517,36 +525,37 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
         </SidebarContent>
     )
 
-    /*
-    if (isMobile) {
-        return (
-            
-        <SheetContent
-        side="left"
-        className="!pt-6 !px-2 w-[400px] overflow-y-auto"
-        >
-        <SheetHeader className="justify-center items-end font-bold">
-        {t("filter.filters")}
-        <span className="text-xs text-muted-foreground leading-5">
-        {totalItemCount} {t("results.results")}
-        </span>
-        </SheetHeader>
-        {content}
-        </SheetContent>
-    )
-    }
-    */
     if (Object.entries(filteredTags).length === 0) return null;
 
     return (
-        <div className="w-60 lg:w-80 bg-sidebar rounded-md border pb-4">
-            <SidebarHeader className="justify-center items-end font-bold">
-                {t("filter.filters")}
-                <span className="text-xs text-muted-foreground leading-5">
-                    {totalItemCount} {t("results.results")}
-                </span>
-            </SidebarHeader>
-            {content}
-        </div>
+        <>
+            <Sheet open={isMobile && isMobileFiltersOpen} onOpenChange={setIsMobileFiltersOpen}>
+                <SheetContent
+                    side="left"
+                    className="w-[calc(100vw-2rem)] max-w-sm overflow-y-auto !px-2 !pt-6 lg:hidden"
+                >
+                    <SheetHeader className="justify-center items-end font-bold">
+                        <SheetTitle>{t("filter.filters")}</SheetTitle>
+                        <span className="text-xs text-muted-foreground leading-5">
+                            {totalItemCount} {t("results.results")}
+                        </span>
+                    </SheetHeader>
+                    {content}
+                </SheetContent>
+            </Sheet>
+
+            <div className="hidden w-60 rounded-md border bg-sidebar pb-4 lg:block lg:w-80">
+                <SidebarHeader className="justify-center items-end font-bold">
+                    {t("filter.filters")}
+                    <span className="text-xs text-muted-foreground leading-5">
+                        {totalItemCount} {t("results.results")}
+                    </span>
+                </SidebarHeader>
+                {content}
+            </div>
+        </>
     );
 };
+
+export { FilterSidebarProvider } from "./context";
+export { FilterSidebar };

package/src/results/generic/search-results-client.tsx

@@ -156,9 +156,7 @@ const SearchResultsBody = <TItem extends CommonItemsModel>({
                     />
 
                     <div className="flex-1 flex flex-col gap-4">
-                        <Pagination pageInfo={data.pageInfo} className="pt-0" />
                         <Empty />
-                        <Pagination pageInfo={data.pageInfo} />
                     </div>
                 </div>
             </div>
@@ -183,7 +181,10 @@ const SearchResultsBody = <TItem extends CommonItemsModel>({
                 />
 
                 <div className="flex-1 flex flex-col gap-4">
-                    <Pagination pageInfo={data.pageInfo} className="pt-0" />
+                    {Number(data.pageInfo.pageCount) > 1 && (
+                        <Pagination pageInfo={data.pageInfo} className="pt-0" />
+                    )}
+
                     <GenericTableResultList
                         items={data.items}
                         query={search}
@@ -217,7 +218,7 @@ export const GenericSearchResultsClient = <
     const t = useTranslations();
 
     return (
-        <div className="container">
+        <div className="flex-1 container">
             <div className="flex gap-6 py-6">
                 <div className="flex-1">
                     <SuggestionsComponent

package/src/results/generic/table-result-list.tsx

@@ -30,12 +30,12 @@ export const GenericTableResultList: FC<Props> = ({
 
     return (
         <div className="rounded-md border mb-6 last:border-b-0">
-            <div className="font-bold text-sm p-2 border-b items-center flex-wrap hidden md:flex">
-                <div className="flex-1 p-2">{t("title")}</div>
-                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("language")}</div>
-                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("type")}</div>
+            <div className="font-bold text-sm px-2 py-4 gap-2 border-b items-center flex">
+                <div className="flex-1">{t("title")}</div>
+                <div className="w-28 flex justify-center">{t("type")}</div>
+                <div className="w-20 flex justify-center">{t("language")}</div>
                 {showFilesColumn &&
-                    <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("files")}</div>
+                    <div className="w-8 flex justify-center">{t("files")}</div>
                 }
             </div>
 
@@ -63,31 +63,31 @@ export const GenericTableResultList: FC<Props> = ({
                 return (
                     <div
                         className={cn(
-                            "min-h-12 c-rex-result-item flex flex-wrap items-center border-b",
+                            "min-h-12 c-rex-result-item flex flex-wrap items-center border-b p-2 gap-2",
                             `c-rex-result-${itemType.toLowerCase()}`,
                         )}
                         key={item.shortId}
                     >
-                        <div className="flex-1 p-2">
+                        <div className="flex-1">
                             <Link href={link} className="hover:underline">{title}</Link>
                         </div>
 
-                        <div className="w-1/5 md:w-1/5 flex justify-center p-2">
-                            <span className="w-8 inline-block">
+                        <div className="w-28 flex justify-center">
+                            <Badge variant="secondary">
+                                {itemType}
+                            </Badge>
+                        </div>
+
+                        <div className="w-20 flex justify-center">
+                            <span className="w-8  inline-block">
                                 {countryCode.length > 0 && (
                                     <Flag countryCode={countryCode} />
                                 )}
                             </span>
                         </div>
 
-                        <div className="w-4/5 md:w-1/5 p-2 flex justify-center">
-                            <Badge>
-                                {itemType}
-                            </Badge>
-                        </div>
-
                         {showFilesColumn &&
-                            <div className="w-1/5 flex justify-center p-2">
+                            <div className="w-1/5 flex justify-center">
                                 <FileDownloadDropdown renditions={item.renditions} />
                             </div>
                         }

package/src/results/information-unit-search-results-card-list.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { useTranslations } from "next-intl";
 import { CommonItemsModel } from "@c-rex/interfaces";
 import { FileStack } from "lucide-react";
 import { FileDownloadDropdown } from "../renditions/file-download";
@@ -32,6 +33,8 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
     imageFragmentSubjectIds = [],
     descriptionFragmentSubjectIds = [],
 }) => {
+    const t = useTranslations();
+
     return (
         <div className="flex-1">
             {items.map((item, index) => {
@@ -115,7 +118,7 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
-                                            Available in: {multipleVersions.join(", ")}
+                                            {t("availableIn")}: {multipleVersions.join(", ")}
                                         </TooltipContent>
                                     </Tooltip>
                                 )}

package/src/results/pagination.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC, MouseEvent } from "react";
+import { FC } from "react";
 import {
     Pagination as PaginationUI,
     PaginationContent,
@@ -10,7 +10,7 @@ import {
     PaginationNext,
     PaginationPrevious,
 } from "@c-rex/ui/pagination"
-import { parseAsInteger, useQueryState } from "nuqs";
+import { usePathname, useSearchParams } from "next/navigation";
 import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
 import { cn } from "@c-rex/utils";
@@ -22,6 +22,30 @@ interface PaginationProps {
 
 type PaginationToken = number | "ellipsis-left" | "ellipsis-right";
 
+const isValidPageNumber = (pageNumber: number, currentPage: number, pageCount: number) => (
+    pageNumber >= 1
+    && pageNumber <= pageCount
+    && pageNumber !== currentPage
+);
+
+export const buildPageHref = (
+    pathname: string,
+    currentSearch: string,
+    pageNumber: number,
+    currentPage: number,
+    pageCount: number,
+) => {
+    if (!isValidPageNumber(pageNumber, currentPage, pageCount)) {
+        return `${pathname}${currentSearch}`;
+    }
+
+    const searchParams = new URLSearchParams(currentSearch);
+    searchParams.set("page", String(pageNumber));
+
+    const queryString = searchParams.toString();
+    return queryString.length > 0 ? `${pathname}?${queryString}` : pathname;
+};
+
 const buildPaginationTokens = (currentPage: number, pageCount: number): PaginationToken[] => {
     if (pageCount <= 7) {
         return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -41,27 +65,8 @@ const buildPaginationTokens = (currentPage: number, pageCount: number): Paginati
 export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const disabledClass = "opacity-50 pointer-events-none";
     const t = useTranslations("results");
-
-    const [, setPage] = useQueryState('page',
-        parseAsInteger.withOptions({
-            history: 'push',
-            shallow: false,
-        })
-    )
-
-    const onChangePage = (event: MouseEvent<HTMLAnchorElement>, pageNumber: number) => {
-        event.preventDefault();
-
-        if (
-            pageNumber < 1
-            || (pageInfo.pageCount !== undefined && pageNumber > pageInfo.pageCount)
-            || pageNumber === pageInfo.pageNumber
-        ) {
-            return;
-        }
-
-        void setPage(pageNumber);
-    }
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
 
     const pageNumber = pageInfo.pageNumber || 1;
     const pageCount = pageInfo.pageCount || 1;
@@ -69,32 +74,25 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const firstItemOnPage = pageInfo.firstItemOnPage || 0;
     const lastItemOnPage = pageInfo.lastItemOnPage || 0;
     const tokens = buildPaginationTokens(pageNumber, pageCount);
+    const currentSearch = searchParams.toString();
+    const search = currentSearch.length > 0 ? `?${currentSearch}` : "";
 
     return (
         <div className={cn("flex flex-col gap-3 py-4", className)}>
-            <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
-                <span>
+            <PaginationUI className="py-4 items-center justify-center sm:justify-between">
+                <span className="hidden sm:block text-sm text-muted-foreground">
                     {t("paginationResults", {
                         first: firstItemOnPage,
                         last: lastItemOnPage,
                         total: totalItemCount,
                     })}
                 </span>
-                <span>
-                    {t("paginationPage", {
-                        page: pageNumber,
-                        pageCount,
-                    })}
-                </span>
-            </div>
 
-            <PaginationUI className="py-0">
-                <PaginationContent className="justify-start">
+                <PaginationContent className="justify-between sm:justify-start w-full sm:w-auto">
                     <PaginationItem>
                         <PaginationPrevious
-                            href="#"
+                            href={buildPageHref(pathname, search, pageNumber - 1, pageNumber, pageCount)}
                             className={pageNumber === 1 ? disabledClass : ""}
-                            onClick={(event) => onChangePage(event, pageNumber - 1)}
                         />
                     </PaginationItem>
 
@@ -102,9 +100,8 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
                         typeof token === "number" ? (
                             <PaginationItem key={token}>
                                 <PaginationLink
-                                    href="#"
+                                    href={buildPageHref(pathname, search, token, pageNumber, pageCount)}
                                     isActive={token === pageNumber}
-                                    onClick={(event) => onChangePage(event, token)}
                                 >
                                     {token}
                                 </PaginationLink>
@@ -118,12 +115,18 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
 
                     <PaginationItem>
                         <PaginationNext
-                            href="#"
-                            onClick={(event) => onChangePage(event, pageNumber + 1)}
+                            href={buildPageHref(pathname, search, pageNumber + 1, pageNumber, pageCount)}
                             className={pageNumber === pageCount ? disabledClass : ""}
                         />
                     </PaginationItem>
                 </PaginationContent>
+
+                <span className="hidden sm:block text-sm text-muted-foreground">
+                    {t("paginationPage", {
+                        page: pageNumber,
+                        pageCount,
+                    })}
+                </span>
             </PaginationUI>
         </div>
     )