@c-rex/components 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "files": [
     "src"
   ],
@@ -25,13 +25,21 @@
       "types": "./src/breadcrumb.tsx",
       "import": "./src/breadcrumb.tsx"
     },
+    "./flag": {
+      "types": "./src/flag.tsx",
+      "import": "./src/flag.tsx"
+    },
     "./pagination": {
       "types": "./src/pagination.tsx",
       "import": "./src/pagination.tsx"
     },
+    "./info-table": {
+      "types": "./src/info/info-table.tsx",
+      "import": "./src/info/info-table.tsx"
+    },
     "./info-card": {
-      "types": "./src/info-card.tsx",
-      "import": "./src/info-card.tsx"
+      "types": "./src/info/info-card.tsx",
+      "import": "./src/info/info-card.tsx"
     },
     "./empty": {
       "types": "./src/empty.tsx",
@@ -61,9 +69,13 @@
       "types": "./src/result-view/dropdown-menu.tsx",
       "import": "./src/result-view/dropdown-menu.tsx"
     },
-    "./sidebar": {
-      "types": "./src/sidebar.tsx",
-      "import": "./src/sidebar.tsx"
+    "./left-sidebar": {
+      "types": "./src/left-sidebar.tsx",
+      "import": "./src/left-sidebar.tsx"
+    },
+    "./right-sidebar": {
+      "types": "./src/right-sidebar.tsx",
+      "import": "./src/right-sidebar.tsx"
     },
     "./dialog-filter": {
       "types": "./src/dialog-filter.tsx",

package/src/autocomplete.tsx

@@ -81,7 +81,7 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
     }, [query]);
 
     return (
-        <div className="relative" ref={containerRef}>
+        <div className="relative flex-1" ref={containerRef}>
             <Input
                 variant={embedded ? "embedded" : undefined}
                 type="text"

package/src/breadcrumb.tsx

@@ -1,15 +1,21 @@
 import React, { FC, Fragment, ReactNode } from "react";
 import {
     Breadcrumb as BreadcrumbComponent,
+    BreadcrumbEllipsis,
     BreadcrumbItem,
     BreadcrumbLink,
     BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator
 } from "@c-rex/ui/breadcrumb";
+import { Button } from "@c-rex/ui/button";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@c-rex/ui/drawer";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { TreeOfContent } from "@c-rex/interfaces";
 import { useTranslations } from 'next-intl';
+import Link from "next/link"
+import { useBreakpoint } from "@c-rex/ui/hooks"
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 interface BreadcrumbProps {
     items: TreeOfContent[];
@@ -19,9 +25,12 @@ interface BreadcrumbProps {
 
 export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
     const t = useTranslations("breadcrumbs");
-    if (!items) {
-        return null;
-    }
+    const device = useBreakpoint();
+    const isMobile = (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
+
+    if (!items) return null
+
+    const lastItem = items[items.length - 1] as TreeOfContent;
 
     if (loading) {
         return (
@@ -43,15 +52,49 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
         );
     }
 
-    const homeItem: TreeOfContent = {
-        link: "/",
-        label: t("home"),
-        id: "home",
-        active: false,
-        children: [],
-    };
+    const renderDrawer = () => {
+        if (items.length < 2) return null
+
+        return (
+            <>
+                <BreadcrumbItem>
+                    <Drawer>
+                        <DrawerTrigger asChild>
+                            <BreadcrumbEllipsis className="h-4 w-4" />
+                        </DrawerTrigger>
+                        <DrawerContent>
+                            <DrawerHeader className="text-left">
+                                <DrawerTitle>Navigate to</DrawerTitle>
+                                <DrawerDescription>
+                                    Select a page to navigate to.
+                                </DrawerDescription>
+                            </DrawerHeader>
+
+                            <div className="grid gap-1 px-4">
+                                {items.slice(0, -1).map((item, index) => (
+                                    <Link
+                                        key={index}
+                                        href={item.link}
+                                        className="py-1 text-sm"
+                                    >
+                                        {item.label}
+                                    </Link>
+                                ))}
+                            </div>
 
-    const newItemList: TreeOfContent[] = [homeItem, ...items];
+                            <DrawerFooter className="pt-4">
+                                <DrawerClose asChild>
+                                    <Button variant="outline">Close</Button>
+                                </DrawerClose>
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </Drawer>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+            </>
+
+        );
+    };
 
     const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
         if (showLink) {
@@ -62,22 +105,37 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
     };
 
     return (
-        <BreadcrumbComponent lang={lang}>
+        <BreadcrumbComponent lang={lang} className="hidden sm:block">
             <BreadcrumbList>
-                {newItemList.map((item, index) => {
-                    const isLast = index === newItemList.length - 1;
-
-                    return (
-                        <Fragment key={`${item.label}-fragment`}>
-                            <BreadcrumbItem key={`${item.label}-item`}>
-                                {renderLink(!isLast, item)}
-                            </BreadcrumbItem>
-                            {!isLast && (
-                                <BreadcrumbSeparator key={`${item.label}-separator`} />
-                            )}
-                        </Fragment>
-                    );
-                })}
+                <BreadcrumbItem>
+                    <BreadcrumbLink asChild>
+                        <BreadcrumbLink href="/">{t("home")}</BreadcrumbLink>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+
+                {isMobile ? renderDrawer() : (
+                    <>
+                        {items.slice(0, -1).map((item, index) => {
+                            const isLast = index === items.length - 1;
+
+                            return (
+                                <Fragment key={`${item.label}-fragment`}>
+                                    <BreadcrumbItem key={`${item.label}-item`} className={index.toString()}>
+                                        {renderLink(!isLast, item)}
+                                    </BreadcrumbItem>
+                                    {!isLast && (
+                                        <BreadcrumbSeparator key={`${item.label}-separator`} />
+                                    )}
+                                </Fragment>
+                            );
+                        })}
+                    </>
+                )}
+
+                <BreadcrumbPage>
+                    {renderLink(false, lastItem)}
+                </BreadcrumbPage>
             </BreadcrumbList>
         </BreadcrumbComponent>
     );

package/src/check-article-lang.tsx

@@ -2,12 +2,12 @@
 
 import { FC, useEffect } from "react";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
-import { SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
 
 interface Props {
-    availableVersions: SidebarAvailableVersionsInterface[]
+    availableVersions: AvailableVersionsInterface[]
 }
 
 export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {

package/src/dialog-filter.tsx

@@ -113,7 +113,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
-                    <DialogTitle>{t("filters")}</DialogTitle>
+                    <DialogTitle>{t("searchSettings")}</DialogTitle>
                 </DialogHeader>
 
                 <div className="grid grid-cols-2 items-center pt-2">

package/src/flag.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from "react";
+import * as Flags from 'country-flag-icons/react/3x2';
+
+interface FlagProps {
+    countryCode: string;
+}
+export const Flag: FC<FlagProps> = ({ countryCode }) => {
+
+    type CountryCode = keyof typeof Flags;
+    const FlagComponent = Flags[countryCode as CountryCode];
+
+    if (!FlagComponent) return null;
+
+    return <FlagComponent />;
+};

package/src/{info-card.tsx → info/info-card.tsx}

@@ -1,6 +1,9 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import { getFromCookieString } from "@c-rex/utils";
 import { useTranslations } from "next-intl";
 import React, { FC } from "react";
+import { filteredItems, renderValue } from "./shared";
+import { UI_LANG_KEY } from "@c-rex/constants";
 
 type Props = {
     title: string;
@@ -12,6 +15,8 @@ type Props = {
 }
 export const InfoCard: FC<Props> = ({ title, items }) => {
     const t = useTranslations();
+    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY)
+    const newItems = filteredItems(items)
 
     return (
         <Card>
@@ -19,7 +24,7 @@ export const InfoCard: FC<Props> = ({ title, items }) => {
                 <CardTitle className="text-lg">{title}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
-                {items.map((item, index) => (
+                {newItems.map((item, index) => (
                     <div key={index} className="border-b border-blog-divider last:border-0 pb-3 last:pb-0">
                         {item.link ? (
                             <a href={item.link}>
@@ -29,7 +34,7 @@ export const InfoCard: FC<Props> = ({ title, items }) => {
                             <h4 className="text-sm font-medium mb-1">{t(item.label)}</h4>
                         )}
 
-                        <span className="text-xs text-muted-foreground">{item.value}</span>
+                        <span className="text-xs text-muted-foreground">{renderValue(item, uiLang)}</span>
                     </div>
                 ))}
             </CardContent>

package/src/info/info-table.tsx

@@ -0,0 +1,127 @@
+import React, { FC } from "react";
+import { articleInfoItemType, DocumentsType } from "@c-rex/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+} from "@c-rex/ui/table"
+import { useTranslations } from "next-intl";
+import { getFromCookieString } from "@c-rex/utils";
+import { UI_LANG_KEY } from "@c-rex/constants";
+import { filteredItems, renderValue } from "./shared";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu";
+import { CloudDownload, Eye } from "lucide-react";
+
+import { FaFilePdf } from "react-icons/fa6";
+import { AvailableVersionsInterface } from "@c-rex/interfaces";
+import { Flag } from "../flag";
+
+type Props = {
+    title: string;
+    files?: DocumentsType
+    items: articleInfoItemType[]
+    availableVersions?: AvailableVersionsInterface[]
+}
+
+const IconsToFileExtension: Record<string, React.ReactNode> = {
+    "application/pdf": <FaFilePdf className="h-6 w-6" />,
+};
+
+export const InfoTable: FC<Props> = ({ title, items, files, availableVersions }) => {
+    const t = useTranslations();
+    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY)
+    const newItems = filteredItems(items)
+
+    return (
+        <Card className="p-0 !pt-4">
+            <CardHeader>
+                <CardTitle className="text-lg">{title}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 !p-0">
+                <Table>
+                    <TableBody>
+                        {newItems.map((item, index) => (
+                            <TableRow key={index} className="h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    {item.link ? (
+                                        <a href={item.link} className="underline">
+                                            <h4 className="text-sm font-medium">{t(item.label)}</h4>
+                                        </a>
+                                    ) : (
+                                        <h4 className="text-sm font-medium">{t(item.label)}</h4>
+                                    )}
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 h-12">
+                                    {renderValue(item, uiLang)}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+
+                        {files && (
+                            <TableRow className="h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium">{t("files")}</h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 h-12">
+
+                                    {Object.keys(files).map((item, index) => {
+                                        if (!files[item]) return null
+
+                                        return (
+                                            <DropdownMenu key={index}>
+                                                <DropdownMenuTrigger className="mx-2">
+                                                    {IconsToFileExtension[item]}
+                                                </DropdownMenuTrigger>
+                                                <DropdownMenuContent>
+                                                    <DropdownMenuItem>
+                                                        <a href={files[item].view} target="_blank" rel="noreferrer" className="flex items-center">
+                                                            <Eye className="mr-2 " /> Open
+                                                        </a>
+                                                    </DropdownMenuItem>
+                                                    <DropdownMenuItem>
+                                                        <a href={files[item].download} target="_blank" rel="noreferrer" className="flex items-center">
+                                                            <CloudDownload className="mr-2 " /> Download
+                                                        </a>
+                                                    </DropdownMenuItem>
+
+                                                </DropdownMenuContent>
+                                            </DropdownMenu>
+                                        )
+                                    })}
+
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                        {availableVersions && (
+                            <TableRow className="h-12">
+                                <TableCell className="font-medium w-28 pl-4">
+                                    <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                                </TableCell>
+                                <TableCell className="text-xs text-muted-foreground flex items-center gap-2 h-12">
+                                    {availableVersions.map((item) => {
+                                        return (
+                                            <span className="w-8 block border" key={item.shortId}>
+                                                <a href={item.link} title={item.lang}>
+                                                    <Flag countryCode={item.country} />
+                                                </a>
+                                            </span>
+                                        )
+                                    })}
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                    </TableBody>
+                </Table>
+            </CardContent>
+        </Card>
+    );
+}

package/src/info/shared.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import { articleInfoItemType } from "@c-rex/types";
+import { formatDateToLocale } from "@c-rex/utils";
+import { Flag } from "../flag";
+
+const isDate = (value: string): boolean => {
+    return (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})$/.test(value))
+}
+const isLanguage = (label: string): boolean => {
+    return label === "language" || label === "languages";
+}
+
+export const renderValue = (item: articleInfoItemType, uiLang: string): ReactNode => {
+    if (isDate(item.value)) return formatDateToLocale(item.value, uiLang);
+
+    if (isLanguage(item.label)) {
+        const countryCode = item.value.split("-")[1] || item.value;
+        return (
+            <span className="w-8 block">
+                <Flag countryCode={countryCode} />
+            </span>
+
+        );
+    }
+
+    return item.value;
+}
+
+export const filteredItems = (items: articleInfoItemType[]): articleInfoItemType[] => {
+    const hasTitle = items.some(item => item.label === "titles");
+    return items.filter(item => (hasTitle ? !(item.label == "labels") : true));
+}

package/src/{sidebar.tsx → left-sidebar.tsx}

@@ -4,9 +4,7 @@ import React, { ComponentProps, JSX } from "react";
 import {
     Sidebar,
     SidebarContent,
-    SidebarFooter,
     SidebarGroup,
-    SidebarGroupLabel,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
@@ -15,28 +13,18 @@ import {
     SidebarMenuSubItem,
 } 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 { TreeOfContent } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
 import { cn } from "@c-rex/utils";
 
 interface SidebarProps extends ComponentProps<typeof Sidebar> {
     data: TreeOfContent[];
     loading?: boolean;
-    availableVersions: SidebarAvailableVersionsInterface[]
 }
 
-export function AppSidebar({ data, availableVersions, loading, className, lang, ...props }: SidebarProps) {
+export function LeftSidebar({ data, loading, className, lang, ...props }: SidebarProps) {
     const t = useTranslations();
 
-    const getFlagIcon = (countryCode: string): JSX.Element | null => {
-        type CountryCode = keyof typeof Flags;
-        const FlagComponent = Flags[countryCode as CountryCode];
-        if (!FlagComponent) return null;
-
-        return <FlagComponent />;
-    };
-
     const tableOfContentGroup = (): JSX.Element | null => {
         if (loading) {
             return (
@@ -94,39 +82,11 @@ export function AppSidebar({ data, availableVersions, loading, className, lang,
         );
     }
 
-    const availableVersionsGroup = (): JSX.Element | null => {
-
-        if (availableVersions.length == 0) return null;
-
-        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}>
+        <Sidebar className={cn(className)} {...props}>
             <SidebarContent>
                 {tableOfContentGroup()}
             </SidebarContent>
-            <SidebarFooter>
-                {availableVersionsGroup()}
-            </SidebarFooter>
         </Sidebar>
     );
 }

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

@@ -1,7 +1,7 @@
-import React, { FC, JSX } from "react";
-import * as Flags from 'country-flag-icons/react/3x2';
+import React, { FC } from "react";
 import { LanguageAndCountries } from "@c-rex/interfaces";
 import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@c-rex/ui/dropdown-menu";
+import { Flag } from "../../flag";
 
 interface SharedLanguageSwitchProps {
     availableLanguagesAndCountries: (LanguageAndCountries & { link?: string })[];
@@ -10,14 +10,6 @@ interface SharedLanguageSwitchProps {
 }
 export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableLanguagesAndCountries, changeLanguage, selected }) => {
 
-    const getFlagIcon = (countryCode: string): JSX.Element | null => {
-        type CountryCode = keyof typeof Flags;
-        const FlagComponent = Flags[countryCode as CountryCode];
-        if (!FlagComponent) return null;
-
-        return <FlagComponent />;
-    };
-
     return (
         <DropdownMenuRadioGroup value={selected}>
             {availableLanguagesAndCountries.map(item => {
@@ -31,7 +23,7 @@ export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableL
                             changeLanguage(item.value)
                         }}
                     >
-                        {getFlagIcon(item.country)}
+                        <Flag countryCode={item.country} />
                         <span>{item.lang.toUpperCase()}</span>
                     </DropdownMenuRadioItem>
                 )

package/src/navbar/navbar.tsx

@@ -1,6 +1,5 @@
 import { FC } from "react";
 import Link from "next/link";
-import Image from "next/image";
 import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
 import { getConfigs } from "@c-rex/utils/next-cookies";
@@ -26,24 +25,24 @@ export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter
         <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
+                    <Link href="/" className="flex items-center
+                     space-x-1.5 w-36 sm:w-60">
+                        <img
                             src="/img/logo.png"
                             alt="C-rex Logo"
-                            width={88}
-                            height={50}
+                            className="h-12"
                         />
                     </Link>
 
                     {title.length > 0 && (
                         <div className="flex items-center">
-                            <h1 className="px-4 text-3xl font-bold tracking-tight text-balance">{title}</h1>
+                            <h1 className="sm:px-4 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-balance">{title}</h1>
                         </div>
                     )}
                 </div>
 
                 <div className="flex items-center space-x-3">
-                    <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} />
+                    <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} placedOn="NAVBAR" />
 
                     {configs.OIDC.user.enabled && (
                         <>

package/src/navbar/search-input.tsx

@@ -4,20 +4,25 @@ import React, { FC, useState } from "react";
 import { FileCheck, FileX, Search } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
 import { AutoComplete } from "../autocomplete";
+import { cn } from "@c-rex/utils";
 
+type PlacedOn = "NAVBAR" | "BODY"
 type Props = {
     showInput: boolean
     showPkgFilter: boolean
+    placedOn?: PlacedOn
 }
-export const SearchInput: FC<Props> = ({ showInput, showPkgFilter }) => {
+
+export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "NAVBAR" }) => {
     const [checked, setChecked] = useState<boolean>(true);
 
-    if (!showInput) {
-        return null;
-    }
+    if (!showInput) return null
 
     return (
-        <div className="flex items-center px-3 border rounded-full h-8">
+        <div className={cn(
+            placedOn === "NAVBAR" ? "hidden lg:flex" : "sm:flex-none sm:w-60 md:w-72 lg:w-full lg:hidden flex",
+            "flex-1 items-center px-3 border rounded-full h-8"
+        )}>
             <Search className="h-4 w-4 shrink-0 opacity-50" />
 
             <AutoComplete

package/src/navbar/settings.tsx

@@ -20,7 +20,7 @@ export const SettingsMenu: FC = () => {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger>
+            <DropdownMenuTrigger className="block">
                 <Settings />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>

package/src/navbar/sign-in-out-btns.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React from "react";
-import { signOut, signIn } from "next-auth/react";
+import { signIn } from "next-auth/react";
 import { Button } from "@c-rex/ui/button";
 import { useTranslations } from "next-intl";
 
@@ -19,18 +19,3 @@ export const SignInBtn = () => {
         </Button>
     );
 }
-
-export const SignOut = () => {
-    const t = useTranslations("user")
-    return (
-        <Button
-            className="gap-2 px-5 md:flex"
-            variant="default"
-            size="sm"
-            rounded="full"
-            onClick={() => signOut()}
-        >
-            <span>{t("signOut")}</span>
-        </Button>
-    );
-}

package/src/page-wrapper.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { NavBar } from './navbar/navbar';
+import { MultiSidebarProvider } from "@c-rex/ui/sidebar";
 
 type Props = {
     children: React.ReactNode;
@@ -12,13 +13,13 @@ export const PageWrapper = ({ children, title, pageType }: Props) => {
     const showPkgFilter = pageType === "DOC"
 
     return (
-        <>
+        <MultiSidebarProvider>
             <NavBar
                 title={title}
                 showInput={showInput}
                 showPkgFilter={showPkgFilter}
             />
             {children}
-        </>
+        </MultiSidebarProvider>
     );
 }

package/src/result-list.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { DefaultPageInfo, informationUnitsResponseItem, } from "@c-rex/interfaces";
+import { DefaultPageInfo, informationUnitsResponseItem, TopicsResponseItem, } from "@c-rex/interfaces";
 import { Empty } from "./empty";
 import BlogView from './result-view/blog';
 import TableView from './result-view/table';
@@ -7,25 +7,31 @@ import { Pagination } from "./pagination";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 
 interface ResultListProps {
-    items: informationUnitsResponseItem[];
+    items: informationUnitsResponseItem[] | TopicsResponseItem[];
     pagination: DefaultPageInfo;
 }
 
 export const ResultList: FC<ResultListProps> = ({ items, pagination }: ResultListProps) => {
     const { configs } = useAppConfig()
 
-    const ViewComponent = configs.results.resultViewStyle == "table" ? TableView : BlogView;
+    const isTableView = configs.results.resultViewStyle === "table";
 
     return (
         <>
             {
-                items.length == 0 ? (
+                items.length === 0 ? (
                     <Empty />
                 ) : (
                     <>
-                        <ViewComponent
-                            items={items}
-                        />
+                        {isTableView ? (
+                            <TableView
+                                items={items as informationUnitsResponseItem[]}
+                            />
+                        ) : (
+                            <BlogView
+                                items={items as TopicsResponseItem[]}
+                            />
+                        )}
 
                         <Pagination
                             totalPages={pagination.pageCount}

package/src/result-view/table.tsx

@@ -1,80 +1,100 @@
 import { FC } from "react";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHeader,
-    TableRow,
-} from "@c-rex/ui/table";
 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";
+import { Ban, CloudDownload, Eye } from "lucide-react";
+import { FaFilePdf } from "react-icons/fa6";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@c-rex/ui/dropdown-menu";
+import { cn } from "@c-rex/utils";
+import { Flag } from "../flag";
+import { Badge } from "@c-rex/ui/badge";
 
 interface TableViewProps {
     items: informationUnitsResponseItem[];
 }
 
+
+const IconsToFileExtension: Record<string, React.ReactNode> = {
+    "application/pdf": <FaFilePdf className="h-6 w-6" />,
+};
+
 const TableView: FC<TableViewProps> = ({ items }) => {
     const t = useTranslations("results")
+
     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, index) => {
-                        const clazz = `h-12 c-rex_result_row c-rex_result_${item.type.toLowerCase()} ${item.disabled ? "c-rex_result_item_disabled" : ""}`
+        <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="w-1/2 md:w-2/5 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">{t("type")}</div>
+                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("files")}</div>
+            </div>
+
+            {items.map((item, index) => (
+                <div
+                    className={cn(
+                        "min-h-12 c-rex_result_row flex flex-wrap items-center",
+                        `c-rex_result_${item.type.toLowerCase()}`,
+                        item.disabled && "c-rex_result_item_disabled",
+                        "border-b"
+                    )}
+                    key={index}
+                >
+                    <div className="w-4/5 md:w-2/5 p-2">
+                        {item.disabled ? (item.title) : (<a href={item.link}>{item.title}</a>)}
+                    </div>
+
+                    <div className="w-1/5 md:w-1/5 flex justify-center p-2">
+                        <span className="w-8 inline-block">
+                            {item.language.split("-").length > 1 && (
+                                <Flag countryCode={item.language.split("-")[1] as string} />
+                            )}
+                        </span>
+                    </div>
+
+                    <div className="w-4/5 md:w-1/5 p-2">
+                        <Badge variant="secondary">
+                            {item.type}
+                        </Badge>
+                    </div>
+
+                    <div className="w-1/5 flex justify-center p-2">
+                        {(item.disabled || (Object.keys(item.files).length === 0)) ? (
+                            <Ban />
+                        ) : (
+                            <>
+                                {Object.keys(item.files).map((fileKey, index) => {
+
+                                    if (!item.files[fileKey]) {
+                                        return null
+                                    }
+
+                                    return (
+                                        <DropdownMenu key={index}>
+                                            <DropdownMenuTrigger className="mx-2">
+                                                {IconsToFileExtension[fileKey]}
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem>
+                                                    <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <Eye className="mr-2 " /> Open
+                                                    </a>
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem>
+                                                    <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
+                                                        <CloudDownload className="mr-2 " /> Download
+                                                    </a>
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    )
+                                })}
+                            </>
+                        )}
 
-                        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 />}
-                                                />
-                                            )}
+                    </div>
 
-                                            {item.filesToOpen.length == 0 ? (
-                                                <button disabled className="mx-2">
-                                                    <EyeOff />
-                                                </button>
-                                            ) : (
-                                                <DropdownMenu
-                                                    items={item.filesToOpen}
-                                                    icon={<Eye />}
-                                                />
-                                            )}
-                                        </>
-                                    )}
-                                </TableCell>
-                            </TableRow>
-                        )
-                    })}
-                </TableBody>
-            </Table>
+                </div>
+            ))}
         </div>
     );
 };

package/src/right-sidebar.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { ComponentProps } from "react";
+import {
+    Sidebar,
+    SidebarContent,
+} from "@c-rex/ui/sidebar";
+import { useTranslations } from "next-intl";
+import { cn } from "@c-rex/utils";
+import { articleInfoItemType, DocumentsType } from "@c-rex/types";
+import { InfoTable } from "./info/info-table";
+import { AvailableVersionsInterface } from "@c-rex/interfaces";
+
+interface SidebarProps extends ComponentProps<typeof Sidebar> {
+    articleInfo: articleInfoItemType[],
+    documentInfo: articleInfoItemType[],
+    files: DocumentsType,
+    availableVersions?: AvailableVersionsInterface[]
+
+}
+
+export function RightSidebar({ articleInfo, documentInfo, className, files, availableVersions, ...props }: SidebarProps) {
+    const t = useTranslations();
+
+    return (
+        <Sidebar className={cn(className)} {...props} side="right">
+            <SidebarContent className="p-2">
+                {(articleInfo.length > 0 || documentInfo.length > 0) && (
+                    <div className=" gap-4 flex flex-col">
+
+                        {documentInfo.length > 0 && (
+                            <InfoTable
+                                title={t("aboutDocument")}
+                                items={documentInfo}
+                                files={files}
+                            />
+                        )}
+
+                        {articleInfo.length > 0 && (
+                            <InfoTable
+                                title={t("aboutArticle")}
+                                items={articleInfo}
+                                availableVersions={availableVersions}
+                            />
+                        )}
+
+                    </div>
+                )}
+            </SidebarContent>
+        </Sidebar>
+    );
+}