95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
useTranslation,
|
|
type Translations,
|
|
} from "@/components/language-selector"
|
|
import { Button } from "@/styles/aria-nova/ui-rtl/button"
|
|
import {
|
|
Popover,
|
|
PopoverDescription,
|
|
PopoverHeader,
|
|
PopoverTitle,
|
|
PopoverTrigger,
|
|
} from "@/styles/aria-nova/ui-rtl/popover"
|
|
|
|
const translations: Translations = {
|
|
en: {
|
|
dir: "ltr",
|
|
values: {
|
|
title: "Dimensions",
|
|
description: "Set the dimensions for the layer.",
|
|
start: "Start",
|
|
left: "Left",
|
|
top: "Top",
|
|
bottom: "Bottom",
|
|
right: "Right",
|
|
end: "End",
|
|
},
|
|
},
|
|
ar: {
|
|
dir: "rtl",
|
|
values: {
|
|
title: "الأبعاد",
|
|
description: "تعيين الأبعاد للطبقة.",
|
|
start: "بداية السطر",
|
|
left: "يسار",
|
|
top: "أعلى",
|
|
bottom: "أسفل",
|
|
right: "يمين",
|
|
end: "نهاية السطر",
|
|
},
|
|
},
|
|
he: {
|
|
dir: "rtl",
|
|
values: {
|
|
title: "מימדים",
|
|
description: "הגדר את המימדים לשכבה.",
|
|
start: "תחילת השורה",
|
|
left: "שמאל",
|
|
top: "למעלה",
|
|
bottom: "למטה",
|
|
right: "ימין",
|
|
end: "סוף השורה",
|
|
},
|
|
},
|
|
}
|
|
|
|
const physicalSides = ["left", "top", "bottom", "right"] as const
|
|
const logicalPlacements = ["start", "end"] as const
|
|
|
|
export function PopoverRtl() {
|
|
const { dir, t } = useTranslation(translations, "ar")
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{physicalSides.map((side) => (
|
|
<PopoverTrigger key={side}>
|
|
<Button variant="outline">{t[side]}</Button>
|
|
<Popover placement={side} dir={dir}>
|
|
<PopoverHeader>
|
|
<PopoverTitle>{t.title}</PopoverTitle>
|
|
<PopoverDescription>{t.description}</PopoverDescription>
|
|
</PopoverHeader>
|
|
</Popover>
|
|
</PopoverTrigger>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{logicalPlacements.map((placement) => (
|
|
<PopoverTrigger key={placement}>
|
|
<Button variant="outline">{t[placement]}</Button>
|
|
<Popover placement={placement} dir={dir}>
|
|
<PopoverHeader>
|
|
<PopoverTitle>{t.title}</PopoverTitle>
|
|
<PopoverDescription>{t.description}</PopoverDescription>
|
|
</PopoverHeader>
|
|
</Popover>
|
|
</PopoverTrigger>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|