snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
upstream-mirror
180
apps/v4/examples/radix/context-menu-rtl.tsx
Normal file
180
apps/v4/examples/radix/context-menu-rtl.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ArrowLeftIcon, ArrowRightIcon, RotateCwIcon } from "lucide-react"
|
||||
|
||||
import {
|
||||
useTranslation,
|
||||
type Translations,
|
||||
} from "@/components/language-selector"
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuContent,
|
||||
ContextMenuGroup,
|
||||
ContextMenuItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuRadioGroup,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuTrigger,
|
||||
} from "@/styles/radix-nova/ui-rtl/context-menu"
|
||||
|
||||
const translations: Translations = {
|
||||
en: {
|
||||
dir: "ltr",
|
||||
values: {
|
||||
rightClick: "Right click here",
|
||||
longPress: "Long press here",
|
||||
navigation: "Navigation",
|
||||
back: "Back",
|
||||
forward: "Forward",
|
||||
reload: "Reload",
|
||||
moreTools: "More Tools",
|
||||
savePage: "Save Page...",
|
||||
createShortcut: "Create Shortcut...",
|
||||
nameWindow: "Name Window...",
|
||||
developerTools: "Developer Tools",
|
||||
delete: "Delete",
|
||||
showBookmarks: "Show Bookmarks",
|
||||
showFullUrls: "Show Full URLs",
|
||||
people: "People",
|
||||
pedro: "Pedro Duarte",
|
||||
colm: "Colm Tuite",
|
||||
},
|
||||
},
|
||||
ar: {
|
||||
dir: "rtl",
|
||||
values: {
|
||||
rightClick: "انقر بزر الماوس الأيمن هنا",
|
||||
longPress: "اضغط مطولاً هنا",
|
||||
navigation: "التنقل",
|
||||
back: "رجوع",
|
||||
forward: "تقدم",
|
||||
reload: "إعادة تحميل",
|
||||
moreTools: "المزيد من الأدوات",
|
||||
savePage: "حفظ الصفحة...",
|
||||
createShortcut: "إنشاء اختصار...",
|
||||
nameWindow: "تسمية النافذة...",
|
||||
developerTools: "أدوات المطور",
|
||||
delete: "حذف",
|
||||
showBookmarks: "إظهار الإشارات المرجعية",
|
||||
showFullUrls: "إظهار عناوين URL الكاملة",
|
||||
people: "الأشخاص",
|
||||
pedro: "Pedro Duarte",
|
||||
colm: "Colm Tuite",
|
||||
},
|
||||
},
|
||||
he: {
|
||||
dir: "rtl",
|
||||
values: {
|
||||
rightClick: "לחץ לחיצה ימנית כאן",
|
||||
longPress: "לחץ לחיצה ארוכה כאן",
|
||||
navigation: "ניווט",
|
||||
back: "חזור",
|
||||
forward: "קדימה",
|
||||
reload: "רענן",
|
||||
moreTools: "כלים נוספים",
|
||||
savePage: "שמור עמוד...",
|
||||
createShortcut: "צור קיצור דרך...",
|
||||
nameWindow: "שם חלון...",
|
||||
developerTools: "כלי מפתח",
|
||||
delete: "מחק",
|
||||
showBookmarks: "הצג סימניות",
|
||||
showFullUrls: "הצג כתובות URL מלאות",
|
||||
people: "אנשים",
|
||||
pedro: "Pedro Duarte",
|
||||
colm: "Colm Tuite",
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export function ContextMenuRtl() {
|
||||
const { t, dir, language } = useTranslation(translations, "ar")
|
||||
const [people, setPeople] = React.useState("pedro")
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
|
||||
<span className="hidden pointer-fine:inline-block">{t.rightClick}</span>
|
||||
<span className="hidden pointer-coarse:inline-block">
|
||||
{t.longPress}
|
||||
</span>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent
|
||||
className="w-48"
|
||||
data-lang={dir === "rtl" ? language : undefined}
|
||||
>
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger>{t.navigation}</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent
|
||||
className="w-44"
|
||||
data-lang={dir === "rtl" ? language : undefined}
|
||||
>
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuItem>
|
||||
<ArrowLeftIcon />
|
||||
{t.back}
|
||||
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem disabled>
|
||||
<ArrowRightIcon />
|
||||
{t.forward}
|
||||
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem>
|
||||
<RotateCwIcon />
|
||||
{t.reload}
|
||||
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
|
||||
</ContextMenuItem>
|
||||
</ContextMenuGroup>
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuSub>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger>{t.moreTools}</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent
|
||||
className="w-44"
|
||||
data-lang={dir === "rtl" ? language : undefined}
|
||||
>
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuItem>{t.savePage}</ContextMenuItem>
|
||||
<ContextMenuItem>{t.createShortcut}</ContextMenuItem>
|
||||
<ContextMenuItem>{t.nameWindow}</ContextMenuItem>
|
||||
</ContextMenuGroup>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuItem>{t.developerTools}</ContextMenuItem>
|
||||
</ContextMenuGroup>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuItem variant="destructive">
|
||||
{t.delete}
|
||||
</ContextMenuItem>
|
||||
</ContextMenuGroup>
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuSub>
|
||||
</ContextMenuGroup>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuCheckboxItem checked>
|
||||
{t.showBookmarks}
|
||||
</ContextMenuCheckboxItem>
|
||||
<ContextMenuCheckboxItem>{t.showFullUrls}</ContextMenuCheckboxItem>
|
||||
</ContextMenuGroup>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuGroup>
|
||||
<ContextMenuRadioGroup value={people} onValueChange={setPeople}>
|
||||
<ContextMenuLabel>{t.people}</ContextMenuLabel>
|
||||
<ContextMenuRadioItem value="pedro">{t.pedro}</ContextMenuRadioItem>
|
||||
<ContextMenuRadioItem value="colm">{t.colm}</ContextMenuRadioItem>
|
||||
</ContextMenuRadioGroup>
|
||||
</ContextMenuGroup>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user