Files
netbird/client/ui/frontend/src/components/dialog/DialogHeading.tsx
T
Eduard GertandEdward f5707c3485 [client] Add RTL layout support to the desktop UI (#8076)
* [client] Add RTL layout support to the desktop UI

<html dir> follows the active language, Radix primitives get the
matching dir, physical spacing/positioning uses logical utilities, and
directional icons, animations, arrow-key navigation and tooltip sides
flip in RTL.

* [client] Address RTL review feedback

Force LTR with isolation for monospace values, let truncated names
take their direction from their content, and keep the profile name
field in the UI direction.

* [client] Keep translated monospace labels in their own direction

The forced-LTR rule for monospace values now skips elements with an
explicit dir, translated development labels use dir=auto, and
monospace values rendered through TruncatedText opt into LTR.

---------

Co-authored-by: Edward <43848523+thomashacker@users.noreply.github.com>
2026-10-06 12:08:11 +02:00

36 lines
713 B
TypeScript

import { type ReactNode } from "react";
import { cn } from "@/lib/cn";
type DialogAlign = "start" | "center" | "end";
const alignClass: Record<DialogAlign, string> = {
start: "text-start",
center: "text-center",
end: "text-end",
};
type DialogHeadingProps = {
children: ReactNode;
className?: string;
align?: DialogAlign;
id?: string;
};
export const DialogHeading = ({
children,
className,
align = "center",
id,
}: DialogHeadingProps) => (
<h2
id={id}
className={cn(
"w-full select-none text-base font-semibold text-nb-gray-50",
alignClass[align],
className,
)}
>
{children}
</h2>
);