Aspect Ratio

import { AspectRatio } from "@/components/ui/aspect-ratio";

export function AspectRatioDemo() {
	return (
		<AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
			<img
				src="https://avatar.vercel.sh/shadcn1"
				alt="Aspect ratio demo"
				className="size-full rounded-lg object-cover"
			/>
		</AspectRatio>
	);
}

import { AspectRatio } from "@/components/ui/aspect-ratio";

export function AspectRatioSquare() {
	return (
		<AspectRatio
			ratio={1 / 1}
			className="w-full max-w-[12rem] rounded-lg bg-muted"
		>
			<img
				src="https://avatar.vercel.sh/shadcn1"
				alt="Square aspect ratio"
				className="size-full rounded-lg object-cover"
			/>
		</AspectRatio>
	);
}

import { AspectRatio } from "@/components/ui/aspect-ratio";

export function AspectRatioPortrait() {
	return (
		<AspectRatio
			ratio={9 / 16}
			className="w-full max-w-[10rem] rounded-lg bg-muted"
		>
			<img
				src="https://avatar.vercel.sh/shadcn1"
				alt="Portrait aspect ratio"
				className="size-full rounded-lg object-cover"
			/>
		</AspectRatio>
	);
}

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { AspectRatio } from "@/components/ui/aspect-ratio";

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, language, t } = useTranslation(translations, "ar");

	return (
		<figure className="w-full max-w-sm" lang={language} dir={dir}>
			<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
				<img
					src="https://avatar.vercel.sh/shadcn1"
					alt="Landscape"
					className="size-full rounded-lg object-cover"
				/>
			</AspectRatio>
			<figcaption className="mt-2 text-center text-muted-foreground text-sm">
				{t.caption}
			</figcaption>
		</figure>
	);
}