@c-rex/components 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "files": [
     "src"
   ],
@@ -56,11 +56,25 @@
     "./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"
+    },
+    "./cookies": {
+      "types": "./src/cookies.tsx",
+      "import": "./src/cookies.tsx"
+    },
+    "./page-wrapper": {
+      "types": "./src/page-wrapper.tsx",
+      "import": "./src/page-wrapper.tsx"
     }
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
     "@c-rex/eslint-config": "*",
@@ -100,6 +114,7 @@
     "nuqs": "^2.4.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.5.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "eslintConfig": {

package/src/blog-card.tsx

@@ -1,4 +1,5 @@
 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";
@@ -68,6 +69,7 @@ export const BlogCard = ({
                         </p>
                     )}
                 </div>
+                {/*
                 <div className="mt-4 flex items-center space-x-3">
                     <div className="flex items-center -space-x-2">
                         {data.authors && (
@@ -79,6 +81,7 @@ export const BlogCard = ({
                         <p className="text-sm text-muted-foreground">{data.date}</p>
                     )}
                 </div>
+                */}
             </div>
             <Link href={data.slug} className="absolute inset-0" target="_blank">
                 <span className="sr-only">{t("viewArticle")}</span>

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/check-article-lang.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import { FC, useEffect, useRef } from "react";
+import { toast } from "sonner"
+
+interface Props {
+    availableVersions: SidebarAvailableVersionsInterface[]
+    contentLanguage: string
+}
+
+export const CheckArticleLangToast: FC<Props> = ({
+    availableVersions,
+    contentLanguage,
+}) => {
+    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 == contentLanguage) return
+
+        const articleAvailable = availableVersions.find((item) => item.lang === contentLanguage)
+        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/cookies.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { FC, useEffect } from "react";
+import { CONTENT_LANG_KEY, UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
+import { getCookieInFront } from "@c-rex/utils";
+import { setCookie } from "@c-rex/utils/next-cookies";
+import { ConfigInterface, LanguageAndCountries } from "@c-rex/interfaces";
+
+type Props = {
+    configs: ConfigInterface;
+    availableLanguages: LanguageAndCountries[];
+}
+export const SetCookies: FC<Props> = ({ configs, availableLanguages }) => {
+    const manageUILanguage = async (configs: ConfigInterface): Promise<void> => {
+        const hasUILangCookie = await getCookieInFront(UI_LANG_KEY);
+
+        if (hasUILangCookie.value === null) {
+            const browserLang = navigator.language;
+
+            const locale = UI_LANG_OPTIONS.includes(browserLang.toLowerCase())
+                ? browserLang
+                : configs.languageSwitcher.default;
+
+            setCookie(UI_LANG_KEY, locale);
+        }
+    }
+
+    const manageContentLanguage = async (configs: ConfigInterface, availableLanguages: LanguageAndCountries[]): Promise<void> => {
+        const hasContentLangCookie = await getCookieInFront(CONTENT_LANG_KEY);
+
+        if (hasContentLangCookie.value === null) {
+            const browserLang = navigator.language;
+            const hasLang = availableLanguages.some((item) => item.value === browserLang);
+
+            const locale = hasLang
+                ? browserLang
+                : configs.languageSwitcher.default;
+
+
+            setCookie(CONTENT_LANG_KEY, locale);
+        }
+    }
+
+    useEffect(() => {
+        manageUILanguage(configs);
+        manageContentLanguage(configs, availableLanguages);
+    }, [])
+
+    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,42 @@
 'use client'
 
-import React, { FC, startTransition } from "react";
+import React, { FC, startTransition, useEffect, useState } from "react";
 import { LanguageAndCountries } from "@c-rex/interfaces";
 import { SharedLanguageSwitch } from "./shared";
 import { setCookie } from "@c-rex/utils/next-cookies";
-import { CONTENT_LANG_KEY, DEFAULT_UI_LANG } from "@c-rex/constants";
+import { CONTENT_LANG_KEY } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
+import { getCookieInFront } from "@c-rex/utils";
 
 interface ContentLanguageSwitchProps {
     availableLanguagesAndCountries: LanguageAndCountries[];
 }
 export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
-
-    const [contentLanguage, setContentLanguage] = useQueryState('language', {
+    const [selected, setSelected] = useState("");
+    const [queryLanguage, setContentLanguage] = useQueryState('language', {
         history: 'push',
         shallow: false,
-        defaultValue: DEFAULT_UI_LANG
     })
 
+    useEffect(() => {
+        const get = async () => {
+            const uiLang = await getCookieInFront(CONTENT_LANG_KEY)
+
+            if (uiLang.value != null) {
+                setSelected(uiLang.value)
+                return
+            }
+        }
+        get()
+    }, [])
+
     const changeContentLanguage = (locale: string) => {
         startTransition(() => {
             setCookie(CONTENT_LANG_KEY, locale)
-            setContentLanguage(locale)
+
+            if (queryLanguage != null) {
+                setContentLanguage(locale)
+            }
         });
     };
 
@@ -29,7 +44,7 @@ export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availabl
         <SharedLanguageSwitch
             availableLanguagesAndCountries={availableLanguagesAndCountries}
             changeLanguage={changeContentLanguage}
-            selected={contentLanguage}
+            selected={selected}
         />
     );
 };

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,26 +1,35 @@
 "use client"
 
 import React, { FC, startTransition, useEffect, useState } from "react";
-import { LanguageAndCountries } from "@c-rex/interfaces";
 import { SharedLanguageSwitch } from "./shared";
 import { setCookie } from "@c-rex/utils/next-cookies";
-import { DEFAULT_UI_LANG, UI_LANG_KEY } from "@c-rex/constants";
+import { UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
+import { getCookieInFront, getCountryCodeByLang } from "@c-rex/utils";
 
-interface UILanguageSwitchProps {
-    availableLanguagesAndCountries: LanguageAndCountries[];
-}
-export const UILanguageSwitch: FC<UILanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
-    const [selected, setSelected] = useState(DEFAULT_UI_LANG);
+export const UILanguageSwitch: FC = () => {
+    const UILanguages = UI_LANG_OPTIONS.map((lang) => {
+
+        const langCode = lang.split("-")[0] as string;
+        return {
+            value: lang,
+            lang: langCode,
+            country: getCountryCodeByLang(langCode)
+        };
+    })
+
+    const [selected, setSelected] = useState("");
 
     useEffect(() => {
-        const allCookies = document.cookie
-        const uiLang = allCookies
-            .split('; ')
-            .find(row => row.startsWith(`${UI_LANG_KEY}=`))
-            ?.split('=')[1]
-        setSelected(uiLang as string)
-    }, [])
+        const get = async () => {
+            const uiLang = await getCookieInFront(UI_LANG_KEY)
 
+            if (uiLang.value != null) {
+                setSelected(uiLang.value.toLowerCase())
+                return
+            }
+        }
+        get()
+    }, [])
 
     const setUILanguage = (locale: string) => {
         startTransition(() => {
@@ -30,7 +39,7 @@ export const UILanguageSwitch: FC<UILanguageSwitchProps> = ({ availableLanguages
 
     return (
         <SharedLanguageSwitch
-            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            availableLanguagesAndCountries={UILanguages}
             changeLanguage={setUILanguage}
             selected={selected}
         />

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,43 +13,36 @@ 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 { Search, 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 { Input } from "@c-rex/ui/input";
+import { getServerSession } from "next-auth";
+import { getConfigs } from "@c-rex/utils/next-cookies";
+import { LanguageService } from "@c-rex/services";
+
 
 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();
-    const session = await getServerSession()
+    const configs = await getConfigs();
+    const languageService = new LanguageService(configs.languageSwitcher.endpoint);
+    const availableLanguagesAndCountries = await languageService.getLanguagesAndCountries();
 
-    const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
-    if (!jsonConfigs) {
-        return null;
+    let session: any;
+    if (configs.OIDC.user.enabled) {
+        session = await getServerSession();
     }
 
-    const configs: ConfigInterface = JSON.parse(jsonConfigs);
-    const service = new LanguageService(configs.languageSwitcher.endpoint);
-    const contentLanguages = await service.getLanguagesAndCountries();
-
-    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"
@@ -60,10 +50,20 @@ 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 ? (
@@ -82,7 +82,7 @@ export const NavBar: FC<NavBarProps> = async () => {
                             <DropdownMenuTrigger>
                                 <Settings />
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent>
+                            <DropdownMenuContent align="start" sideOffset={20} alignOffset={20}>
                                 <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
                                 <DropdownMenuSeparator />
 
@@ -94,7 +94,7 @@ export const NavBar: FC<NavBarProps> = async () => {
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
                                             <ContentLanguageSwitch
-                                                availableLanguagesAndCountries={contentLanguages}
+                                                availableLanguagesAndCountries={availableLanguagesAndCountries}
                                             />
                                         </DropdownMenuSubContent>
                                     </DropdownMenuPortal>
@@ -108,9 +108,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/result-list.tsx

@@ -1,21 +1,36 @@
 import React, { FC } from "react";
-import { ConfigInterface, informationUnitsItems } from "@c-rex/interfaces";
+import { ConfigInterface, DefaultPageInfo, informationUnitsResponseItems, } from "@c-rex/interfaces";
 import { Empty } from "./empty";
 import BlogView from './result-view/blog';
 import TableView from './result-view/table';
+import { Pagination } from "./pagination";
 
 interface ResultListProps {
-    items: informationUnitsItems[];
-    configs: ConfigInterface
+    items: informationUnitsResponseItems[];
+    configs: ConfigInterface;
+    pagination: DefaultPageInfo;
 }
 
-export const ResultList: FC<ResultListProps> = ({ items, configs }) => {
-    const ViewComponent = configs.resultViewStyle == "table" ? TableView : BlogView;
+export const ResultList: FC<ResultListProps> = ({ items, configs, pagination }: ResultListProps) => {
+    const ViewComponent = configs.results.resultViewStyle == "table" ? TableView : BlogView;
 
     return (
         <>
             {
-                items.length == 0 ? <Empty /> : <ViewComponent items={items} />
+                items.length == 0 ? (
+                    <Empty />
+                ) : (
+                    <>
+                        <ViewComponent
+                            items={items}
+                        />
+
+                        <Pagination
+                            totalPages={pagination.pageCount}
+                            currentPage={pagination.pageNumber}
+                        />
+                    </>
+                )
             }
         </>
     );

package/src/result-view/blog.tsx

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

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, ReactNode } from "react";
+import React, { FC } from "react";
 import {
     Table,
     TableBody,
@@ -6,46 +6,74 @@ import {
     TableHeader,
     TableRow,
 } from "@c-rex/ui/table";
-import { informationUnitsItems, Labels } from "@c-rex/interfaces";
-import Link from "next/link";
+import { informationUnitsResponseItems } 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[];
+    items: informationUnitsResponseItems[];
 }
 
 const TableView: FC<TableViewProps> = ({ items }) => {
     const t = useTranslations("results")
 
-    const getTitle = (labels: Labels[]): string => {
-        return labels.map((item) => item.value).join();
-    };
-    const getIcons = (languages: string[]): string => {
-        return languages.map((lang) => lang.split("-")[1]).join(",");
-    };
-
     return (
         <div className="rounded-md border">
             <Table>
                 <TableHeader>
                     <TableRow>
                         <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) => (
-                        <TableRow key={index}>
-                            <Link
-                                key={index}
-                                href={`info/${item.shortId}`}
-                                target="_blank"
-                            >
-                                <TableCell>{getTitle(item.labels)}</TableCell>
-                            </Link>
-                            <TableCell>{getIcons(item.languages)}</TableCell>
-                        </TableRow>
-                    ))}
+                    {items.map((item, index) => {
+                        const clazz = `h-12 c-rex_result_row c-rex_result_${item.type.toLowerCase()} ${item.disabled ? "c-rex_result_row_disabled" : ""}`
+
+                        return (
+                            <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>
+                            </TableRow>
+                        )
+                    })}
                 </TableBody>
             </Table>
         </div>

package/src/sidebar.tsx

@@ -4,6 +4,7 @@ import React, { ComponentProps, JSX } from "react";
 import {
     Sidebar,
     SidebarContent,
+    SidebarFooter,
     SidebarGroup,
     SidebarGroupLabel,
     SidebarMenu,
@@ -12,20 +13,20 @@ import {
     SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem,
-    SidebarRail
 } from "@c-rex/ui/sidebar";
 import { Skeleton } from "@c-rex/ui/skeleton";
-import { TreeOfContent } from "@c-rex/interfaces";
+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[];
     loading?: boolean;
-    availableVersions: any
+    availableVersions: SidebarAvailableVersionsInterface[]
 }
 
-export function AppSidebar({ data, availableVersions, loading, ...props }: SidebarProps) {
+export function AppSidebar({ data, availableVersions, loading, className, ...props }: SidebarProps) {
     const t = useTranslations();
 
     const getFlagIcon = (countryCode: string): JSX.Element | null => {
@@ -36,75 +37,90 @@ export function AppSidebar({ data, availableVersions, loading, ...props }: Sideb
         return <FlagComponent />;
     };
 
-    return (
-        <Sidebar collapsible="icon" {...props}>
-            <SidebarContent>
-                <SidebarGroup className="my-4">
-                    <SidebarGroupLabel>{t("tableOfContent")}:</SidebarGroupLabel>
-                    <SidebarMenu>
-                        {loading ? (
-                            <>
-                                <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" />
-                                <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 ml-8" />
-                                <Skeleton className="w-auto h-10 mb-2" />
-                            </>
-                        ) : (
-                            <>
-                                {data.map((item) => (
-                                    <SidebarMenuItem key={item.id}>
-                                        <SidebarMenuButton asChild isActive={item.active}>
-                                            <a href={item.link} title={item.label}>
-                                                {item.label}
-                                            </a>
-                                        </SidebarMenuButton>
+    const tableOfContentGroup = (): JSX.Element | null => {
+        if (loading) {
+            return (
+                <>
+                    <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" />
+                    <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 ml-8" />
+                    <Skeleton className="w-auto h-10 mb-2" />
+                </>
+            )
+        }
+
+        if (data.length == 0) return null;
+
+        return (
+            <SidebarGroup>
+                <SidebarMenu>
+                    {data.map((item) => (
+                        <SidebarMenuItem key={item.id}>
+                            <SidebarMenuButton asChild isActive={item.active}>
+                                <a href={item.link} title={item.label}>
+                                    {item.label}
+                                </a>
+                            </SidebarMenuButton>
 
-                                        {item.children?.length ? (
-                                            <SidebarMenuSub>
-                                                {item.children.map((item) => (
-                                                    <SidebarMenuSubItem key={item.label}>
-                                                        <SidebarMenuSubButton
-                                                            asChild
-                                                            isActive={item.active}
-                                                        >
-                                                            <a href={item.link} title={item.label}>
-                                                                {item.label}
-                                                            </a>
-                                                        </SidebarMenuSubButton>
-                                                    </SidebarMenuSubItem>
-                                                ))}
-                                            </SidebarMenuSub>
-                                        ) : null}
-                                    </SidebarMenuItem>
-                                ))}
-                            </>
-                        )}
-                    </SidebarMenu>
-                </SidebarGroup>
+                            {item.children?.length ? (
+                                <SidebarMenuSub>
+                                    {item.children.map((item) => (
+                                        <SidebarMenuSubItem key={item.label}>
+                                            <SidebarMenuSubButton
+                                                asChild
+                                                isActive={item.active}
+                                            >
+                                                <a href={item.link} title={item.label}>
+                                                    {item.label}
+                                                </a>
+                                            </SidebarMenuSubButton>
+                                        </SidebarMenuSubItem>
+                                    ))}
+                                </SidebarMenuSub>
+                            ) : null}
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroup>
+        );
+    }
 
-                <SidebarGroup>
-                    <SidebarGroupLabel>{t("availableIn")}:</SidebarGroupLabel>
-                    <SidebarMenu>
+    const availableVersionsGroup = (): JSX.Element | null => {
 
-                        {availableVersions.map((item: any) => {
-                            return (
+        if (availableVersions.length == 0) return null;
 
-                                <SidebarMenuItem key={item.shortId}>
-                                    <SidebarMenuButton asChild isActive={item.active}>
-                                        <a href={`../info/${item.shortId}`} title={item.lang}>
-                                            {getFlagIcon(item.country)} {item.lang}
-                                        </a>
-                                    </SidebarMenuButton>
-                                </SidebarMenuItem>
-                            )
-                        })}
-                    </SidebarMenu>
-                </SidebarGroup>
+        return (
+            <>
+                <SidebarGroupLabel>{t("availableIn")}:</SidebarGroupLabel>
+                <SidebarMenu>
+                    {availableVersions.map((item) => {
+                        return (
+                            <SidebarMenuItem key={item.shortId}>
+                                <SidebarMenuButton asChild isActive={item.active}>
+                                    <a href={item.link} title={item.lang}>
+                                        {getFlagIcon(item.country)} {item.lang}
+                                    </a>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        )
+                    })}
+                </SidebarMenu>
+            </>
+        )
+
+    }
+
+    return (
+        <Sidebar className={cn(className, "pt-20")} {...props}>
+            <SidebarContent>
+                {tableOfContentGroup()}
             </SidebarContent>
-            <SidebarRail />
+            <SidebarFooter>
+                {availableVersionsGroup()}
+            </SidebarFooter>
         </Sidebar>
     );
 }