@c-rex/components 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "files": [
     "src"
   ],
@@ -49,6 +49,10 @@
       "types": "./src/result-view/table.tsx",
       "import": "./src/result-view/table.tsx"
     },
+    "./dropdown-menu": {
+      "types": "./src/result-view/dropdown-menu.tsx",
+      "import": "./src/result-view/dropdown-menu.tsx"
+    },
     "./sidebar": {
       "types": "./src/sidebar.tsx",
       "import": "./src/sidebar.tsx"
@@ -56,6 +60,18 @@
     "./dialog-filter": {
       "types": "./src/dialog-filter.tsx",
       "import": "./src/dialog-filter.tsx"
+    },
+    "./check-article-lang": {
+      "types": "./src/check-article-lang.tsx",
+      "import": "./src/check-article-lang.tsx"
+    },
+    "./render-article": {
+      "types": "./src/render-article.tsx",
+      "import": "./src/render-article.tsx"
+    },
+    "./page-wrapper": {
+      "types": "./src/page-wrapper.tsx",
+      "import": "./src/page-wrapper.tsx"
     }
   },
   "scripts": {
@@ -102,6 +118,7 @@
     "nuqs": "^2.4.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.5.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "eslintConfig": {

package/src/autocomplete.tsx

@@ -31,6 +31,10 @@ export const AutoComplete = ({
     const [suggestions, setSuggestions] = useState<string[]>([]);
     const [open, setOpen] = useState(false);
 
+    useEffect(() => {
+        setQuery(initialValue);
+    }, [initialValue]);
+
     useEffect(() => {
         const debounceFetch = setTimeout(() => {
             if (query) {
@@ -56,7 +60,7 @@ export const AutoComplete = ({
                             onMouseDown={() => setOpen(false)}
                             onFocus={() => setOpen(true)}
                         >
-                            <Input />
+                            <Input value={query} />
                         </CommandPrimitive.Input>
                     </PopoverAnchor>
 
@@ -75,36 +79,29 @@ export const AutoComplete = ({
                         }}
                         className="w-[--radix-popover-trigger-width] p-0"
                     >
-                        <CommandList>
-                            {/*isLoading && (
-                                <CommandPrimitive.Loading>
-                                    <div className="p-1">
-                                        <Skeleton className="h-6 w-full" />
-                                    </div>
-                                </CommandPrimitive.Loading>
-                            )*/}
-
-                            {suggestions.length > 0 ? (
-                                <CommandGroup>
-                                    {suggestions.map((option) => (
-                                        <CommandItem
-                                            key={option}
-                                            value={option}
-                                            onMouseDown={(e) => e.preventDefault()}
-                                            onSelect={(inputValue) => {
-                                                setOpen(false);
-                                                onSelect(inputValue ?? "");
-                                            }}
-                                        >
-                                            <Check className="mr-2 h-4 w-4 opacity-0" />
-                                            {option}
-                                        </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                            ) : (
-                                <CommandEmpty>No suggestions.</CommandEmpty>
-                            )}
-                        </CommandList>
+                        {query.length > 0 && (
+                            <CommandList>
+                                {suggestions.length > 0 ? (
+                                    <CommandGroup>
+                                        {suggestions.map((option) => (
+                                            <CommandItem
+                                                key={option}
+                                                value={option}
+                                                onMouseDown={(e) => e.preventDefault()}
+                                                onSelect={(inputValue) => {
+                                                    setOpen(false);
+                                                    onSelect(inputValue);
+                                                }}
+                                            >
+                                                {option}
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                ) : (
+                                    <CommandEmpty>No suggestions.</CommandEmpty>
+                                )}
+                            </CommandList>
+                        )}
                     </PopoverContent>
                 </Command>
             </Popover>

package/src/blog-card.tsx

@@ -1,58 +1,52 @@
 import Link from "next/link";
-import React from "react";
 import { cn } from "@c-rex/utils";
 import { BlurImage } from "./blur-image";
 import { useTranslations } from "next-intl";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
 
 interface BlogCardProp {
-    data: {
-        title: string;
-        blurDataURL: string;
-        image: string;
-        description: string;
-        authors: string;
-        _id: string;
-        date: string;
-        slug: string;
-    };
+    item: informationUnitsResponseItem;
     priority?: boolean;
     horizontal?: boolean;
 }
 
 export const BlogCard = ({
-    data,
+    item,
     priority,
     horizontal = false,
 }: BlogCardProp) => {
     const t = useTranslations("results")
+    const image = "/img/blog-post-1.webp"
+    const blurDataURL = "/img/blog-post-1.webp"
 
     return (
         <article
             className={cn(
-                "group relative",
+                "group relative", `c-rex_result_${item.type.toLowerCase()}`,
                 horizontal
                     ? "grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
                     : "flex flex-col space-y-2",
+                item.disabled ? "c-rex_result_item_disabled" : ""
             )}
         >
-            {data.image && (
-                <div className="w-full overflow-hidden rounded-xl border">
-                    <BlurImage
-                        alt={data.title}
-                        blurDataURL={data.blurDataURL}
-                        className={cn(
-                            "size-full object-cover object-center",
-                            horizontal ? "lg:h-72" : null,
-                        )}
-                        width={800}
-                        height={400}
-                        priority={priority}
-                        placeholder="blur"
-                        src={data.image}
-                        sizes="(max-width: 768px) 750px, 600px"
-                    />
-                </div>
-            )}
+
+            <div className="w-full overflow-hidden rounded-xl border">
+                <BlurImage
+                    alt={item.title}
+                    blurDataURL={blurDataURL}
+                    className={cn(
+                        "size-full object-cover object-center",
+                        horizontal ? "lg:h-72" : null,
+                    )}
+                    width={800}
+                    height={400}
+                    priority={priority}
+                    placeholder="blur"
+                    src={image}
+                    sizes="(max-width: 768px) 750px, 600px"
+                />
+            </div>
+
             <div
                 className={cn(
                     "flex flex-1 flex-col",
@@ -61,31 +55,34 @@ export const BlogCard = ({
             >
                 <div className="w-full">
                     <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
-                        {data.title}
+                        {item.title}
                     </h2>
-                    {data.description && (
+                    {item.type && (
                         <p className="line-clamp-2 text-muted-foreground">
-                            {data.description}
+                            {item.type}
                         </p>
                     )}
                 </div>
                 {/*
                 <div className="mt-4 flex items-center space-x-3">
                     <div className="flex items-center -space-x-2">
-                        {data.authors && (
-                            <p className="text-sm text-muted-foreground">{data.authors}</p>
+                        {item.authors && (
+                            <p className="text-sm text-muted-foreground">{item.authors}</p>
                         )}
                     </div>
 
-                    {data.date && (
-                        <p className="text-sm text-muted-foreground">{data.date}</p>
+                    {item.date && (
+                        <p className="text-sm text-muted-foreground">{item.date}</p>
                     )}
                 </div>
                 */}
             </div>
-            <Link href={data.slug} className="absolute inset-0" target="_blank">
-                <span className="sr-only">{t("viewArticle")}</span>
-            </Link>
+
+            {!item.disabled && (
+                <Link href={item.link} className="absolute inset-0" target="_blank">
+                    <span className="sr-only">{t("viewArticle")}</span>
+                </Link>
+            )}
         </article>
     );
 };

package/src/blur-image.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import type { ComponentProps } from "react";
 import Image from "next/image";
 import { cn } from "@c-rex/utils";

package/src/breadcrumb.tsx

@@ -13,10 +13,11 @@ import { useTranslations } from 'next-intl';
 
 interface BreadcrumbProps {
     items: TreeOfContent[];
+    lang: string;
     loading?: boolean;
 }
 
-export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
+export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
     const t = useTranslations("breadcrumbs");
     if (!items) {
         return null;
@@ -61,7 +62,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
     };
 
     return (
-        <BreadcrumbComponent>
+        <BreadcrumbComponent lang={lang}>
             <BreadcrumbList>
                 {newItemList.map((item, index) => {
                     const isLast = index === newItemList.length - 1;

package/src/check-article-lang.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { FC, useEffect, useRef } from "react";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import { toast } from "sonner"
+
+interface Props {
+    availableVersions: SidebarAvailableVersionsInterface[]
+}
+
+export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
+    const { contentLang } = useAppConfig()
+    const hasRun = useRef(false)
+
+    useEffect(() => {
+        if (hasRun.current) return
+        hasRun.current = true
+
+        const activeArticle = availableVersions.filter((item) => item.active)[0]
+        if (activeArticle == undefined || activeArticle.lang == contentLang) return
+
+        const articleAvailable = availableVersions.find((item) => item.lang === contentLang)
+        if (articleAvailable == undefined) return
+
+        showToast(articleAvailable.lang, articleAvailable.link)
+    }, [])
+
+    const showToast = (lang: string, link: string) => {
+        toast(`Read ${lang} version`, {
+            description: `This article is also available in ${lang}`,
+            action: {
+                label: `Open ${lang} version`,
+                onClick: () => window.location.href = link,
+            },
+            duration: 10000,
+        })
+    }
+
+    return null
+}

package/src/dialog-filter.tsx

@@ -11,7 +11,7 @@ import {
 } from "@c-rex/ui/dialog"
 import { Checkbox } from "@c-rex/ui/checkbox"
 import { Label } from "@c-rex/ui/label"
-import { useQueryState } from "nuqs"
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs"
 import { useTranslations } from "next-intl"
 
 interface DialogFilterProps {
@@ -27,10 +27,13 @@ export const DialogFilter: FC<DialogFilterProps> = ({
 }) => {
     const t = useTranslations();
 
-    const [_, setContentLanguage] = useQueryState('language', {
+    const [params, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+    }, {
         history: 'push',
         shallow: false,
-    })
+    });
 
     const [languages, setLanguages] = useState(availableLanguages.map((item: any) => {
         const checked = startSelectedLanguages.includes(item.value)
@@ -50,7 +53,11 @@ export const DialogFilter: FC<DialogFilterProps> = ({
 
     const apply = () => {
         const selectedLanguages = languages.filter((item: any) => item.checked).map((item: any) => item.value).join(',')
-        setContentLanguage(selectedLanguages)
+
+        setParams({
+            page: 1,
+            language: selectedLanguages,
+        });
     }
 
     return (

package/src/navbar/language-switcher/content-language-switch.tsx

@@ -1,27 +1,28 @@
-'use client'
+"use client"
 
-import React, { FC, startTransition } from "react";
-import { LanguageAndCountries } from "@c-rex/interfaces";
+import React, { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { setCookie } from "@c-rex/utils/next-cookies";
-import { CONTENT_LANG_KEY, DEFAULT_UI_LANG } from "@c-rex/constants";
+import { getFromCookieString, setCookie } from "@c-rex/utils";
+import { CONTENT_LANG_KEY } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
-interface ContentLanguageSwitchProps {
-    availableLanguagesAndCountries: LanguageAndCountries[];
-}
-export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
-
-    const [contentLanguage, setContentLanguage] = useQueryState('language', {
+export const ContentLanguageSwitch = () => {
+    const { availableLanguagesAndCountries, setContentLang } = useAppConfig()
+    const contentLang = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
+    const [queryLanguage, setContentLanguage] = useQueryState('language', {
         history: 'push',
         shallow: false,
-        defaultValue: DEFAULT_UI_LANG
     })
 
     const changeContentLanguage = (locale: string) => {
         startTransition(() => {
             setCookie(CONTENT_LANG_KEY, locale)
-            setContentLanguage(locale)
+            setContentLang(locale)
+
+            if (queryLanguage != null) {
+                setContentLanguage(locale)
+            }
         });
     };
 
@@ -29,7 +30,7 @@ export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availabl
         <SharedLanguageSwitch
             availableLanguagesAndCountries={availableLanguagesAndCountries}
             changeLanguage={changeContentLanguage}
-            selected={contentLanguage}
+            selected={contentLang}
         />
     );
 };

package/src/navbar/language-switcher/shared.tsx

@@ -23,8 +23,8 @@ export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableL
             {availableLanguagesAndCountries.map(item => {
                 return (
                     <DropdownMenuRadioItem key={item.value} value={item.value}>
-                        <span>{item.lang.toUpperCase()}</span>
                         {getFlagIcon(item.country)}
+                        <span>{item.lang.toUpperCase()}</span>
                     </DropdownMenuRadioItem>
                 )
             })}

package/src/navbar/language-switcher/ui-language-switch.tsx

@@ -1,38 +1,37 @@
 "use client"
 
-import React, { FC, startTransition, useEffect, useState } from "react";
-import { LanguageAndCountries } from "@c-rex/interfaces";
+import React, { FC, startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { setCookie } from "@c-rex/utils/next-cookies";
-import { DEFAULT_UI_LANG, UI_LANG_KEY } from "@c-rex/constants";
-
-interface UILanguageSwitchProps {
-    availableLanguagesAndCountries: LanguageAndCountries[];
-}
-export const UILanguageSwitch: FC<UILanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
-    const [selected, setSelected] = useState(DEFAULT_UI_LANG);
-
-    useEffect(() => {
-        const allCookies = document.cookie
-        const uiLang = allCookies
-            .split('; ')
-            .find(row => row.startsWith(`${UI_LANG_KEY}=`))
-            ?.split('=')[1]
-        setSelected(uiLang as string)
-    }, [])
+import { UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
+import { getCountryCodeByLang, getFromCookieString, setCookie } from "@c-rex/utils";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
+export const UILanguageSwitch: FC = () => {
+    const { setUiLang } = useAppConfig()
+    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY).toLowerCase()
+    const UILanguages = UI_LANG_OPTIONS.map((lang) => {
+        const langCode = lang.split("-")[0] as string;
+        return {
+            value: lang,
+            lang: langCode,
+            country: getCountryCodeByLang(langCode)
+        };
+    })
 
     const setUILanguage = (locale: string) => {
         startTransition(() => {
             setCookie(UI_LANG_KEY, locale)
+            setUiLang(locale)
+
+            window.location.reload()
         });
     }
 
     return (
         <SharedLanguageSwitch
-            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            availableLanguagesAndCountries={UILanguages}
             changeLanguage={setUILanguage}
-            selected={selected}
+            selected={uiLang}
         />
     );
 };

package/src/navbar/navbar.tsx

@@ -2,9 +2,6 @@ import React, { FC } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { SignOut, SignInBtn } from "./sign-in-out-btns";
-import { getServerSession } from "next-auth";
-import { getCookie } from '@c-rex/utils/next-cookies';
-import { ConfigInterface } from "@c-rex/interfaces";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -16,47 +13,31 @@ import {
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@c-rex/ui/dropdown-menu"
-import { SDK_CONFIG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
-import { LanguageService } from "@c-rex/services";
 import { Settings } from "lucide-react";
 import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
 import { getTranslations } from "next-intl/server";
-import { getCountryCodeByLang } from "@c-rex/utils";
 import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
+import { getServerSession } from "next-auth";
+import { getConfigs } from "@c-rex/utils/next-cookies";
 
 interface NavBarProps {
-    scroll?: boolean;
-    large?: boolean;
+    title: string;
 }
 
-export const NavBar: FC<NavBarProps> = async () => {
+export const NavBar: FC<NavBarProps> = async ({ title }) => {
     const t = await getTranslations();
-    let session;
-
-    const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
-    if (!jsonConfigs) {
-        return null;
-    }
-
-    const configs: ConfigInterface = JSON.parse(jsonConfigs);
-    const service = new LanguageService(configs.languageSwitcher.endpoint);
-    const contentLanguages = await service.getLanguagesAndCountries();
+    const configs = getConfigs();
 
+    let session: any;
     if (configs.OIDC.user.enabled) {
         session = await getServerSession();
     }
 
-    const UILanguages = UI_LANG_OPTIONS.map((lang) => ({
-        value: lang,
-        lang: lang,
-        country: getCountryCodeByLang(lang)
-    }));
-
     return (
-        <header className="sticky top-0 z-40 flex w-full bg-background/60 backdrop-blur-xl transition-all bg-transparent border-b justify-center py-4">
-            <div className="container flex justify-between">
-                <div className="flex gap-6 md:gap-10">
-                    <Link href="/" className="flex items-center space-x-1.5">
+        <header className="sticky top-0 z-40 flex w-full backdrop-blur-xl transition-all bg-transparent border-b justify-center py-4">
+            <div className="w-full px-4 flex justify-between">
+                <div className="flex">
+                    <Link href="/" className="flex items-center justify-center space-x-1.5 w-60">
                         <Image
                             src="/img/logo.png"
                             alt="C-rex Logo"
@@ -64,10 +45,22 @@ export const NavBar: FC<NavBarProps> = async () => {
                             height={50}
                         />
                     </Link>
-                    {configs.projectName}
+
+                    {title.length > 0 && (
+                        <div className="flex items-center">
+                            <h1 className="px-4 text-3xl font-bold tracking-tight text-balance">{title}</h1>
+                        </div>
+                    )}
                 </div>
 
                 <div className="flex items-center space-x-3">
+                    {/*
+                    <div className="flex items-center px-3 border rounded-full h-8">
+                        <Search className="h-4 w-4 shrink-0 opacity-50" />
+                        <Input variant="embedded" placeholder="Search" />
+                    </div>
+                        */}
+
                     {configs.OIDC.user.enabled && (
                         <>
                             {session ? (
@@ -86,7 +79,7 @@ export const NavBar: FC<NavBarProps> = async () => {
                             <DropdownMenuTrigger>
                                 <Settings />
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent>
+                            <DropdownMenuContent align="start" sideOffset={20} alignOffset={20}>
                                 <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
                                 <DropdownMenuSeparator />
 
@@ -97,9 +90,7 @@ export const NavBar: FC<NavBarProps> = async () => {
 
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
-                                            <ContentLanguageSwitch
-                                                availableLanguagesAndCountries={contentLanguages}
-                                            />
+                                            <ContentLanguageSwitch />
                                         </DropdownMenuSubContent>
                                     </DropdownMenuPortal>
                                 </DropdownMenuSub>
@@ -112,9 +103,7 @@ export const NavBar: FC<NavBarProps> = async () => {
 
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
-                                            <UILanguageSwitch
-                                                availableLanguagesAndCountries={UILanguages}
-                                            />
+                                            <UILanguageSwitch />
                                         </DropdownMenuSubContent>
                                     </DropdownMenuPortal>
                                 </DropdownMenuSub>

package/src/page-wrapper.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { NavBar } from './navbar/navbar';
+
+type Props = {
+    children: React.ReactNode;
+    title: string;
+}
+
+export const PageWrapper = ({ children, title }: Props) => {
+    return (
+        <>
+            <NavBar title={title} />
+            {children}
+        </>
+    );
+}

package/src/pagination.tsx

@@ -0,0 +1,65 @@
+import React, { FC } from "react";
+import {
+    Pagination as PaginationUI,
+    PaginationContent,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from "@c-rex/ui/pagination"
+import { parseAsInteger, useQueryState } from "nuqs";
+
+interface PaginationProps {
+    totalPages: number;
+    currentPage: number;
+}
+
+export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) => {
+    const disabledClass = "opacity-50 pointer-events-none";
+
+    const [_, setPage] = useQueryState('page',
+        parseAsInteger.withOptions({
+            history: 'push',
+            shallow: false,
+        })
+    )
+
+    return (
+        <PaginationUI className="py-4">
+            <PaginationContent>
+                <PaginationItem>
+                    <PaginationPrevious
+                        href="#"
+                        className={currentPage === 1 ? disabledClass : ""}
+                        onClick={() => setPage(currentPage - 1)}
+                    />
+                </PaginationItem>
+
+                {Array.from({ length: totalPages }, (_, index) => index + 1).map((page) => (
+                    <PaginationItem key={page}>
+                        <PaginationLink
+                            href="#"
+                            isActive={page === currentPage}
+                            onClick={() => setPage(page)}
+                        >
+                            {page}
+                        </PaginationLink>
+                    </PaginationItem>
+                ))}
+
+                {/*
+                <PaginationItem>
+                    <PaginationEllipsis />
+                </PaginationItem>
+                    */}
+                <PaginationItem>
+                    <PaginationNext
+                        href="#"
+                        onClick={() => setPage(currentPage + 1)}
+                        className={currentPage === totalPages ? disabledClass : ""}
+                    />
+                </PaginationItem>
+            </PaginationContent>
+        </PaginationUI>
+    )
+}

package/src/render-article.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+type Props = {
+    htmlContent: string,
+    contentLang: string
+}
+
+export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
+    return (
+        <div
+            lang={contentLang}
+            className="pb-4"
+            dangerouslySetInnerHTML={{ __html: htmlContent }}
+        />
+    );
+}

package/src/result-list.tsx

@@ -1,72 +1,37 @@
 import React, { FC } from "react";
-import { ConfigInterface, informationUnitsItems, Labels } from "@c-rex/interfaces";
+import { ConfigInterface, DefaultPageInfo, informationUnitsResponseItem, } from "@c-rex/interfaces";
 import { Empty } from "./empty";
 import BlogView from './result-view/blog';
 import TableView from './result-view/table';
-import { useLocale } from "next-intl";
-import { DEFAULT_UI_LANG, RESULT_TYPES } from "@c-rex/constants";
+import { Pagination } from "./pagination";
 
 interface ResultListProps {
-    items: informationUnitsItems[];
-    configs: ConfigInterface
+    items: informationUnitsResponseItem[];
+    configs: ConfigInterface;
+    pagination: DefaultPageInfo;
 }
 
-export const ResultList: FC<ResultListProps> = ({ items, configs }) => {
-    const locale = useLocale();
-    const ViewComponent = configs.resultViewStyle == "table" ? TableView : BlogView;
-
-    const getTitle = (labels: Labels[]): string => {
-        if (labels === undefined) {
-            return "";
-        }
-        return labels.map((item) => item.value).join();
-    };
-
-    const getType = (labels: Labels[]): { localeLabel: string, comparableLabel: string } => {
-        const localeLabel = labels.find((item) => item.language === locale);
-        const comparableLabel = labels.find((item) => item.language === DEFAULT_UI_LANG);
-
-        if (!localeLabel || !comparableLabel) {
-            return {
-                localeLabel: "",
-                comparableLabel: ""
-            }
-        }
-
-        return {
-            localeLabel: localeLabel.value,
-            comparableLabel: comparableLabel.value
-        }
-    }
-
-    const handleByType = (type: string, shortId: string) => {
-        switch (type) {
-            case RESULT_TYPES.TOPIC:
-                window.location.href = `/topics/${shortId}`;
-                break;
-            case RESULT_TYPES.DOCUMENT:
-                //should check if its a pdf or not
-                // if pdf then open in new tab
-                // else download the file
-                window.open(`/documents/${shortId}`, '_blank');
-                break;
-        }
-    }
+export const ResultList: FC<ResultListProps> = ({ items, configs, pagination }: ResultListProps) => {
+    const ViewComponent = configs.results.resultViewStyle == "table" ? TableView : BlogView;
 
     return (
-        <div>
+        <>
             {
                 items.length == 0 ? (
                     <Empty />
                 ) : (
-                    <ViewComponent
-                        items={items}
-                        getTitle={getTitle}
-                        getType={getType}
-                        handleByType={handleByType}
-                    />
+                    <>
+                        <ViewComponent
+                            items={items}
+                        />
+
+                        <Pagination
+                            totalPages={pagination.pageCount}
+                            currentPage={pagination.pageNumber}
+                        />
+                    </>
                 )
             }
-        </div>
+        </>
     );
 };

package/src/result-view/blog.tsx

@@ -1,32 +1,18 @@
 import React, { FC } from "react";
 import { BlogCard } from "../blog-card";
-import { informationUnitsItems, Labels } from "@c-rex/interfaces";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
 
 interface BlogViewProps {
-    items: informationUnitsItems[];
-    getType: (labels: Labels[]) => { localeLabel: string, comparableLabel: string };
-    getTitle: (labels: Labels[]) => string;
+    items: informationUnitsResponseItem[];
 }
 
-const BlogView: FC<BlogViewProps> = ({ items, getTitle, getType }) => {
-
+const BlogView: FC<BlogViewProps> = ({ items }) => {
     return (
         <div className="grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3">
             {items.map((item, index) => {
+
                 return (
-                    <BlogCard
-                        key={index}
-                        data={{
-                            title: getTitle(item.labels),
-                            blurDataURL: "/img/blog-post-1.webp",
-                            image: "/img/blog-post-1.webp",
-                            description: getType(item.class.labels).localeLabel,
-                            authors: "item.authors",
-                            _id: "item._id",
-                            date: "item.date",
-                            slug: `info/${item.shortId}`,
-                        }}
-                    />
+                    <BlogCard key={index} item={item} />
                 );
             })}
         </div>

package/src/result-view/dropdown-menu.tsx

@@ -0,0 +1,39 @@
+import React, { FC, JSX } from "react";
+import {
+    DropdownMenu as DropdownMenuComp,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu";
+
+interface DropdownMenuProps {
+    items: {
+        format: string;
+        link: string;
+    }[];
+    icon: JSX.Element;
+}
+
+export const DropdownMenu: FC<DropdownMenuProps> = ({
+    items, icon
+}) => {
+
+    return (
+        <DropdownMenuComp>
+            <DropdownMenuTrigger className="mx-2">
+                {icon}
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                {items.map((file, index) => {
+                    return (
+                        <DropdownMenuItem key={index}>
+                            <a href={file.link} target="_blank" rel="noreferrer">
+                                {file.format}
+                            </a>
+                        </DropdownMenuItem>
+                    )
+                })}
+            </DropdownMenuContent>
+        </DropdownMenuComp>
+    );
+};

package/src/result-view/table.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
     Table,
     TableBody,
@@ -6,19 +6,17 @@ import {
     TableHeader,
     TableRow,
 } from "@c-rex/ui/table";
-import { informationUnitsItems, Labels } from "@c-rex/interfaces";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
+import { Ban, CloudDownload, CloudOff, Eye, EyeOff } from "lucide-react";
+import { DropdownMenu } from "./dropdown-menu";
 
 interface TableViewProps {
-    items: informationUnitsItems[];
-    getType: (labels: Labels[]) => { localeLabel: string, comparableLabel: string };
-    getTitle: (labels: Labels[]) => string;
-    handleByType: any;
+    items: informationUnitsResponseItem[];
 }
 
-const TableView: FC<TableViewProps> = ({ items, getType, getTitle, handleByType }) => {
+const TableView: FC<TableViewProps> = ({ items }) => {
     const t = useTranslations("results")
-
     return (
         <div className="rounded-md border">
             <Table>
@@ -27,25 +25,51 @@ const TableView: FC<TableViewProps> = ({ items, getType, getTitle, handleByType
                         <TableCell>{t("title")}</TableCell>
                         <TableCell>{t("type")}</TableCell>
                         <TableCell>{t("language")}</TableCell>
+                        <TableCell>{t("files")}</TableCell>
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    {items.map((item: informationUnitsItems, index: number) => {
-                        const type = getType(item.class.labels);
-                        let lang = "";
-
-                        if (item.languages.length > 0) {
-                            lang = item.languages[0] as string;
-                            lang = lang.split("-")[0] as string;
-                        }
+                    {items.map((item, index) => {
+                        const clazz = `h-12 c-rex_result_row c-rex_result_${item.type.toLowerCase()} ${item.disabled ? "c-rex_result_item_disabled" : ""}`
 
                         return (
-                            <TableRow key={index}>
-                                <TableCell className="cursor-pointer" onClick={() => handleByType(type.comparableLabel.toUpperCase(), item.shortId)}>
-                                    {getTitle(item.labels)}
+                            <TableRow key={index} className={clazz}>
+                                <TableCell className="h-12 c-rex_result_cell">
+                                    {item.disabled ? (item.title) : (<a href={item.link}>{item.title}</a>)}
+                                </TableCell>
+                                <TableCell>{item.type}</TableCell>
+                                <TableCell>{item.language}</TableCell>
+                                <TableCell>
+                                    {(item.disabled || (item.filesToDownload.length == 0 && item.filesToOpen.length == 0)) ? (
+                                        <button disabled className="mx-2">
+                                            <Ban />
+                                        </button>
+                                    ) : (
+                                        <>
+                                            {item.filesToDownload.length == 0 ? (
+                                                <button disabled className="mx-2">
+                                                    <CloudOff />
+                                                </button>
+                                            ) : (
+                                                <DropdownMenu
+                                                    items={item.filesToDownload}
+                                                    icon={<CloudDownload />}
+                                                />
+                                            )}
+
+                                            {item.filesToOpen.length == 0 ? (
+                                                <button disabled className="mx-2">
+                                                    <EyeOff />
+                                                </button>
+                                            ) : (
+                                                <DropdownMenu
+                                                    items={item.filesToOpen}
+                                                    icon={<Eye />}
+                                                />
+                                            )}
+                                        </>
+                                    )}
                                 </TableCell>
-                                <TableCell>{type.localeLabel}</TableCell>
-                                <TableCell>{lang.toUpperCase()}</TableCell>
                             </TableRow>
                         )
                     })}

package/src/sidebar.tsx

@@ -4,6 +4,7 @@ import React, { ComponentProps, JSX } from "react";
 import {
     Sidebar,
     SidebarContent,
+    SidebarFooter,
     SidebarGroup,
     SidebarGroupLabel,
     SidebarMenu,
@@ -12,12 +13,12 @@ import {
     SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem,
-    SidebarRail
 } from "@c-rex/ui/sidebar";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { SidebarAvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
 import * as Flags from 'country-flag-icons/react/3x2';
 import { useTranslations } from "next-intl";
+import { cn } from "@c-rex/utils";
 
 interface SidebarProps extends ComponentProps<typeof Sidebar> {
     data: TreeOfContent[];
@@ -25,7 +26,7 @@ interface SidebarProps extends ComponentProps<typeof Sidebar> {
     availableVersions: SidebarAvailableVersionsInterface[]
 }
 
-export function AppSidebar({ data, availableVersions, loading, ...props }: SidebarProps) {
+export function AppSidebar({ data, availableVersions, loading, className, lang, ...props }: SidebarProps) {
     const t = useTranslations();
 
     const getFlagIcon = (countryCode: string): JSX.Element | null => {
@@ -39,7 +40,7 @@ export function AppSidebar({ data, availableVersions, loading, ...props }: Sideb
     const tableOfContentGroup = (): JSX.Element | null => {
         if (loading) {
             return (
-                <>
+                <SidebarGroup className="pt-4">
                     <Skeleton className="w-auto h-10 mb-2" />
                     <Skeleton className="w-auto h-10 mb-2" />
                     <Skeleton className="w-auto h-10 mb-2 ml-8" />
@@ -47,15 +48,20 @@ export function AppSidebar({ data, availableVersions, loading, ...props }: Sideb
                     <Skeleton className="w-auto h-10 mb-2 ml-8" />
                     <Skeleton className="w-auto h-10 mb-2 ml-8" />
                     <Skeleton className="w-auto h-10 mb-2" />
-                </>
+                </SidebarGroup>
             )
         }
 
         if (data.length == 0) return null;
 
+        const langProp = {} as any
+
+        if (lang) {
+            langProp.lang = lang
+        }
+
         return (
-            <SidebarGroup className="my-4">
-                <SidebarGroupLabel>{t("tableOfContent")}:</SidebarGroupLabel>
+            <SidebarGroup {...langProp}>
                 <SidebarMenu>
                     {data.map((item) => (
                         <SidebarMenuItem key={item.id}>
@@ -93,10 +99,10 @@ export function AppSidebar({ data, availableVersions, loading, ...props }: Sideb
         if (availableVersions.length == 0) return null;
 
         return (
-            <SidebarGroup>
+            <>
                 <SidebarGroupLabel>{t("availableIn")}:</SidebarGroupLabel>
                 <SidebarMenu>
-                    {availableVersions.map((item: any) => {
+                    {availableVersions.map((item) => {
                         return (
                             <SidebarMenuItem key={item.shortId}>
                                 <SidebarMenuButton asChild isActive={item.active}>
@@ -108,18 +114,19 @@ export function AppSidebar({ data, availableVersions, loading, ...props }: Sideb
                         )
                     })}
                 </SidebarMenu>
-            </SidebarGroup>
+            </>
         )
 
     }
 
     return (
-        <Sidebar collapsible="icon" {...props}>
+        <Sidebar className={cn(className, "pt-20")} {...props}>
             <SidebarContent>
                 {tableOfContentGroup()}
-                {availableVersionsGroup()}
             </SidebarContent>
-            <SidebarRail />
+            <SidebarFooter>
+                {availableVersionsGroup()}
+            </SidebarFooter>
         </Sidebar>
     );
 }