@c-rex/components 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "files": [
     "src"
   ],
@@ -25,6 +25,22 @@
       "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/info-card.tsx",
+      "import": "./src/info/info-card.tsx"
+    },
     "./empty": {
       "types": "./src/empty.tsx",
       "import": "./src/empty.tsx"
@@ -53,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

@@ -1,4 +1,4 @@
-import React, { FC, use, useEffect, useState } from "react"
+import React, { FC, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -18,10 +18,10 @@ import { useAppConfig } from "@c-rex/contexts/config-provider"
 import { LanguageAndCountries } from "@c-rex/interfaces"
 import { WILD_CARD_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants"
 import { Switch } from "@c-rex/ui/switch"
+import { useSearchContext } from "@c-rex/contexts/search"
 
 interface DialogFilterProps {
     trigger: React.ReactNode;
-    setLoading: (loading: boolean) => void;
 }
 interface Languages {
     lang: string;
@@ -29,8 +29,9 @@ interface Languages {
     checked: boolean;
 }
 
-export const DialogFilter: FC<DialogFilterProps> = ({ trigger, setLoading }) => {
+export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const t = useTranslations("filter");
+    const { setLoading } = useSearchContext();
     const { availableLanguagesAndCountries } = useAppConfig()
     const [params, setParams] = useQueryStates({
         language: parseAsString,
@@ -112,7 +113,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger, setLoading }) =>
             </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/info-card.tsx

@@ -0,0 +1,43 @@
+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;
+    items: {
+        label: string;
+        value: string;
+        link?: string;
+    }[]
+}
+export const InfoCard: FC<Props> = ({ title, items }) => {
+    const t = useTranslations();
+    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY)
+    const newItems = filteredItems(items)
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-lg">{title}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {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}>
+                                <h4 className="text-sm font-medium mb-1">{t(item.label)}</h4>
+                            </a>
+                        ) : (
+                            <h4 className="text-sm font-medium mb-1">{t(item.label)}</h4>
+                        )}
+
+                        <span className="text-xs text-muted-foreground">{renderValue(item, uiLang)}</span>
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    );
+}

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/content-language-switch.tsx

@@ -3,7 +3,7 @@
 import { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
 import { getFromCookieString, setCookie } from "@c-rex/utils";
-import { CONTENT_LANG_KEY } from "@c-rex/constants";
+import { BLOG_TYPE_AND_LINK, CONTENT_LANG_KEY, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { useTranslations } from "next-intl";
@@ -12,8 +12,22 @@ import { toast } from "sonner"
 export const ContentLanguageSwitch = () => {
     const t = useTranslations();
     const contentLang = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
-    const { availableLanguagesAndCountries, setContentLang, availableVersions } = useAppConfig()
+    const { availableLanguagesAndCountries: aux, setContentLang, availableVersions } = useAppConfig()
 
+    const availableLanguagesAndCountries = () => {
+        let result = aux.map(item => ({ ...item, link: "#" }))
+        if (availableVersions == null) return result
+
+        result = aux.map(item => {
+            const availableVersion = availableVersions.find(version => version.lang === item.value)
+            return {
+                ...item,
+                link: availableVersion?.link ?? "#"
+            }
+        })
+
+        return result;
+    }
     const [queryLanguage, setContentLanguage] = useQueryState('language', {
         history: 'push',
         shallow: false,
@@ -23,10 +37,19 @@ export const ContentLanguageSwitch = () => {
         startTransition(() => {
             setCookie(CONTENT_LANG_KEY, locale)
             setContentLang(locale)
+
             if (queryLanguage != null) {
                 setContentLanguage(locale)
             }
 
+            const currentPath = window.location.pathname;
+            const isTopicOrBlogOrDocument = currentPath.includes(TOPICS_TYPE_AND_LINK) || currentPath.includes(BLOG_TYPE_AND_LINK) || currentPath.includes(DOCUMENTS_TYPE_AND_LINK)
+
+            if (!isTopicOrBlogOrDocument) {
+                window.location.reload();
+                return;
+            }
+
             if (availableVersions !== null) {
                 const filteredList = availableVersions.filter((item) => item.lang === locale)
 
@@ -48,7 +71,7 @@ export const ContentLanguageSwitch = () => {
 
     return (
         <SharedLanguageSwitch
-            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            availableLanguagesAndCountries={availableLanguagesAndCountries()}
             changeLanguage={changeContentLanguage}
             selected={contentLang}
         />

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

@@ -1,29 +1,29 @@
-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[];
+    availableLanguagesAndCountries: (LanguageAndCountries & { link?: string })[];
     selected: string;
     changeLanguage: (locale: string) => void;
 }
 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} onValueChange={changeLanguage}>
+        <DropdownMenuRadioGroup value={selected}>
             {availableLanguagesAndCountries.map(item => {
                 return (
-                    <DropdownMenuRadioItem key={item.value} value={item.value}>
-                        {getFlagIcon(item.country)}
+                    <DropdownMenuRadioItem
+                        key={item.value}
+                        value={item.value}
+                        link={item?.link}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            changeLanguage(item.value)
+                        }}
+                    >
+                        <Flag countryCode={item.country} />
                         <span>{item.lang.toUpperCase()}</span>
                     </DropdownMenuRadioItem>
                 )