126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { BluetoothIcon } from "lucide-react"
|
|
|
|
import {
|
|
useTranslation,
|
|
type Translations,
|
|
} from "@/components/language-selector"
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogMedia,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/styles/radix-nova/ui-rtl/alert-dialog"
|
|
import { Button } from "@/styles/radix-nova/ui-rtl/button"
|
|
|
|
const translations: Translations = {
|
|
en: {
|
|
dir: "ltr",
|
|
values: {
|
|
showDialog: "Show Dialog",
|
|
showDialogSm: "Show Dialog (sm)",
|
|
title: "Are you absolutely sure?",
|
|
description:
|
|
"This action cannot be undone. This will permanently delete your account from our servers.",
|
|
cancel: "Cancel",
|
|
continue: "Continue",
|
|
smallTitle: "Allow accessory to connect?",
|
|
smallDescription:
|
|
"Do you want to allow the USB accessory to connect to this device?",
|
|
dontAllow: "Don't allow",
|
|
allow: "Allow",
|
|
},
|
|
},
|
|
ar: {
|
|
dir: "rtl",
|
|
values: {
|
|
showDialog: "إظهار الحوار",
|
|
showDialogSm: "إظهار الحوار (صغير)",
|
|
title: "هل أنت متأكد تمامًا؟",
|
|
description:
|
|
"لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.",
|
|
cancel: "إلغاء",
|
|
continue: "متابعة",
|
|
smallTitle: "السماح للملحق بالاتصال؟",
|
|
smallDescription: "هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟",
|
|
dontAllow: "عدم السماح",
|
|
allow: "السماح",
|
|
},
|
|
},
|
|
he: {
|
|
dir: "rtl",
|
|
values: {
|
|
showDialog: "הצג דיאלוג",
|
|
showDialogSm: "הצג דיאלוג (קטן)",
|
|
title: "האם אתה בטוח לחלוטין?",
|
|
description:
|
|
"פעולה זו לא ניתנת לביטול. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.",
|
|
cancel: "ביטול",
|
|
continue: "המשך",
|
|
smallTitle: "לאפשר להתקן להתחבר?",
|
|
smallDescription: "האם אתה רוצה לאפשר להתקן USB להתחבר למכשיר זה?",
|
|
dontAllow: "אל תאפשר",
|
|
allow: "אפשר",
|
|
},
|
|
},
|
|
}
|
|
|
|
export function AlertDialogRtl() {
|
|
const { dir, t, language } = useTranslation(translations, "ar")
|
|
|
|
return (
|
|
<div className="flex gap-4" dir={dir}>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="outline">{t.showDialog}</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent
|
|
dir={dir}
|
|
data-lang={dir === "rtl" ? language : undefined}
|
|
>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{t.title}</AlertDialogTitle>
|
|
<AlertDialogDescription>{t.description}</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>{t.cancel}</AlertDialogCancel>
|
|
<AlertDialogAction>{t.continue}</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="outline">{t.showDialogSm}</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent
|
|
size="sm"
|
|
dir={dir}
|
|
data-lang={dir === "rtl" ? language : undefined}
|
|
>
|
|
<AlertDialogHeader>
|
|
<AlertDialogMedia>
|
|
<BluetoothIcon />
|
|
</AlertDialogMedia>
|
|
<AlertDialogTitle>{t.smallTitle}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{t.smallDescription}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>{t.dontAllow}</AlertDialogCancel>
|
|
<AlertDialogAction>{t.allow}</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
)
|
|
}
|