96 lines
2.5 KiB
TypeScript
96 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 {
|
|
HoverCard,
|
|
HoverCardTrigger,
|
|
} from "@/styles/aria-nova/ui-rtl/hover-card"
|
|
|
|
const translations: Translations = {
|
|
en: {
|
|
dir: "ltr",
|
|
values: {
|
|
name: "Wireless Headphones",
|
|
price: "$99.99",
|
|
start: "Start",
|
|
left: "Left",
|
|
top: "Top",
|
|
bottom: "Bottom",
|
|
right: "Right",
|
|
end: "End",
|
|
},
|
|
},
|
|
ar: {
|
|
dir: "rtl",
|
|
values: {
|
|
name: "سماعات لاسلكية",
|
|
price: "٩٩.٩٩ $",
|
|
start: "بداية السطر",
|
|
left: "يسار",
|
|
top: "أعلى",
|
|
bottom: "أسفل",
|
|
right: "يمين",
|
|
end: "نهاية السطر",
|
|
},
|
|
},
|
|
he: {
|
|
dir: "rtl",
|
|
values: {
|
|
name: "אוזניות אלחוטיות",
|
|
price: "99.99 $",
|
|
start: "תחילת השורה",
|
|
left: "שמאל",
|
|
top: "למעלה",
|
|
bottom: "למטה",
|
|
right: "ימין",
|
|
end: "סוף השורה",
|
|
},
|
|
},
|
|
}
|
|
|
|
const physicalSides = ["left", "top", "bottom", "right"] as const
|
|
const logicalPlacements = ["start", "end"] as const
|
|
|
|
export function HoverCardRtl() {
|
|
const { dir, t } = useTranslation(translations, "ar")
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{physicalSides.map((side) => (
|
|
<HoverCardTrigger key={side} delay={10} closeDelay={100}>
|
|
<Button variant="outline">{t[side]}</Button>
|
|
<HoverCard
|
|
placement={side}
|
|
dir={dir}
|
|
className="flex w-64 flex-col gap-1"
|
|
>
|
|
<div className="font-semibold">{t.name}</div>
|
|
<div className="text-sm text-muted-foreground">{t.price}</div>
|
|
</HoverCard>
|
|
</HoverCardTrigger>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{logicalPlacements.map((placement) => (
|
|
<HoverCardTrigger key={placement} delay={10} closeDelay={100}>
|
|
<Button variant="outline">{t[placement]}</Button>
|
|
<HoverCard
|
|
placement={placement}
|
|
dir={dir}
|
|
className="flex w-64 flex-col gap-1"
|
|
>
|
|
<div className="font-semibold">{t.name}</div>
|
|
<div className="text-sm text-muted-foreground">{t.price}</div>
|
|
</HoverCard>
|
|
</HoverCardTrigger>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|