Files
shadcn/apps/v4/examples/base/aspect-ratio-rtl.tsx
zeekay 05fc512820 feat: sync upstream shadcn/ui — [email protected], v4 app, font system, chart improvements
Upstream sync from shadcn-ui/ui (1686 commits since last merge base).

Key changes:
- packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors)
- apps/v4 replaces apps/www as the primary docs/registry app
- Font system: 25+ heading font registries, font markers utility, @supports override
- Chart improvements: recharts v3 compat, radial chart fixes
- templates/ updated with monorepo variants (astro, vite, react-router, start)
- skills/shadcn AI skill definitions added
- deprecated/ removed (auth, auth-firebase, cli, www)

Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
2026-03-24 19:04:31 -07:00

52 lines
1.1 KiB
TypeScript

"use client"
import * as React from "react"
import Image from "next/image"
import { AspectRatio } from "@/examples/base/ui-rtl/aspect-ratio"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
const translations: Translations = {
en: {
dir: "ltr",
values: {
caption: "Beautiful landscape",
},
},
ar: {
dir: "rtl",
values: {
caption: "منظر طبيعي جميل",
},
},
he: {
dir: "rtl",
values: {
caption: "נוף יפה",
},
},
}
export function AspectRatioRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<figure className="w-full max-w-sm" dir={dir}>
<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
<figcaption className="mt-2 text-center text-sm text-muted-foreground">
{t.caption}
</figcaption>
</figure>
)
}