Files
zeekay 16c4453cc1 feat: sync with upstream shadcn/ui (through [email protected])
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in:
- [email protected] through [email protected] releases
- New apps/v4 directory structure
- Registry system improvements and MCP server
- Framework support (Vue, Svelte, React Native)
- New templates (vite-app, monorepo-next, laravel)
- Zod 4 compatibility (scoped override for zod@>4)
- Test fixture corrections for alias resolution

All 867 merge conflicts resolved preserving Hanzo customizations.
1020/1020 shadcn tests pass.
2026-02-09 10:44:26 -08:00

80 lines
2.0 KiB
TypeScript

"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui-rtl/button"
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/examples/base/ui-rtl/item"
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
const translations: Translations = {
en: {
dir: "ltr",
values: {
basicItem: "Basic Item",
basicItemDesc: "A simple item with title and description.",
action: "Action",
verifiedTitle: "Your profile has been verified.",
},
},
ar: {
dir: "rtl",
values: {
basicItem: "عنصر أساسي",
basicItemDesc: "عنصر بسيط يحتوي على عنوان ووصف.",
action: "إجراء",
verifiedTitle: "تم التحقق من ملفك الشخصي.",
},
},
he: {
dir: "rtl",
values: {
basicItem: "פריט בסיסי",
basicItemDesc: "פריט פשוט עם כותרת ותיאור.",
action: "פעולה",
verifiedTitle: "הפרופיל שלך אומת.",
},
},
}
export function ItemRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<div className="flex w-full max-w-md flex-col gap-6" dir={dir}>
<Item variant="outline" dir={dir}>
<ItemContent>
<ItemTitle>{t.basicItem}</ItemTitle>
<ItemDescription>{t.basicItemDesc}</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
{t.action}
</Button>
</ItemActions>
</Item>
<Item variant="outline" size="sm" render={<a href="#" />} dir={dir}>
<ItemMedia>
<BadgeCheckIcon className="size-5" />
</ItemMedia>
<ItemContent>
<ItemTitle>{t.verifiedTitle}</ItemTitle>
</ItemContent>
<ItemActions>
<ChevronRightIcon className="size-4" />
</ItemActions>
</Item>
</div>
)
}