mirror of
https://github.com/temetro/temetro.git
synced 2026-08-10 02:29:58 +00:00
Khalid Abdi
d237504af9
Add three UI locales (so/ar/de) with full ~1,660-key translations alongside en/fr, selectable in Settings → Profile. Arabic gets full right-to-left support: - config.ts registers the locales and exports a `dirFor` helper; an inline <head> script in layout.tsx sets <html dir/lang> before first paint (no RTL flash), and i18n-provider keeps them in sync on language change. - ~160 physical direction utilities converted to logical (ms/me/ps/pe/ start/end/text-start/text-end); directional chevrons/arrows get rtl:rotate-180; chat-bubble align variants fixed to logical. - IBM Plex Sans Arabic appended to the sans/heading font stacks for per-character Arabic fallback. - Language persists to the backend user_settings and re-applies on sign-in so it roams across devices (localStorage stays the offline source of truth). - New scripts/check-locales.mjs (npm run check-locales) enforces key/placeholder parity and Arabic CLDR plural completeness. Bump to 0.3.0. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
|
|
import { ChevronDownIcon } from "lucide-react";
|
|
import type React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function Accordion(
|
|
props: AccordionPrimitive.Root.Props,
|
|
): React.ReactElement {
|
|
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
|
}
|
|
|
|
export function AccordionItem({
|
|
className,
|
|
...props
|
|
}: AccordionPrimitive.Item.Props): React.ReactElement {
|
|
return (
|
|
<AccordionPrimitive.Item
|
|
className={cn("border-b last:border-b-0", className)}
|
|
data-slot="accordion-item"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function AccordionTrigger({
|
|
className,
|
|
children,
|
|
...props
|
|
}: AccordionPrimitive.Trigger.Props): React.ReactElement {
|
|
return (
|
|
<AccordionPrimitive.Header className="flex">
|
|
<AccordionPrimitive.Trigger
|
|
className={cn(
|
|
"flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-start font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180",
|
|
className,
|
|
)}
|
|
data-slot="accordion-trigger"
|
|
{...props}
|
|
>
|
|
{children}
|
|
<ChevronDownIcon
|
|
className="pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out"
|
|
data-slot="accordion-indicator"
|
|
/>
|
|
</AccordionPrimitive.Trigger>
|
|
</AccordionPrimitive.Header>
|
|
);
|
|
}
|
|
|
|
export function AccordionPanel({
|
|
className,
|
|
children,
|
|
...props
|
|
}: AccordionPrimitive.Panel.Props): React.ReactElement {
|
|
return (
|
|
<AccordionPrimitive.Panel
|
|
className="h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0"
|
|
data-slot="accordion-panel"
|
|
{...props}
|
|
>
|
|
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
|
</AccordionPrimitive.Panel>
|
|
);
|
|
}
|
|
|
|
export { AccordionPrimitive, AccordionPanel as AccordionContent };
|