Surface

import { Surface } from "@/components/ui/surface";

export function SurfaceDemo() {
	return (
		<div className="grid w-full gap-3 md:grid-cols-2">
			<Surface className="rounded-3xl border p-6">
				<h4 className="font-medium">Default Surface</h4>
				<p className="mt-1 text-muted-foreground text-sm">
					Use for cards, panels, and grouped content.
				</p>
			</Surface>
			<Surface variant="secondary" className="rounded-3xl border p-6">
				<h4 className="font-medium">Secondary Surface</h4>
				<p className="mt-1 text-muted-foreground text-sm">
					Great for nested sections and subtle emphasis.
				</p>
			</Surface>
		</div>
	);
}

import { Surface } from "@/components/ui/surface";

export function SurfaceVariants() {
	return (
		<div className="grid w-full gap-3 md:grid-cols-2">
			<Surface variant="default" className="rounded-3xl border p-6">
				Default
			</Surface>
			<Surface variant="secondary" className="rounded-3xl border p-6">
				Secondary
			</Surface>
			<Surface variant="tertiary" className="rounded-3xl border p-6">
				Tertiary
			</Surface>
			<Surface variant="transparent" className="rounded-3xl border p-6">
				Transparent
			</Surface>
		</div>
	);
}

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Surface } from "@/components/ui/surface";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			cardTitle: "Project Overview",
			cardDescription: "Use for cards, panels, and grouped content.",
			nestedTitle: "Details",
			nestedDescription: "Great for nested sections and subtle emphasis.",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			cardTitle: "نظرة عامة على المشروع",
			cardDescription: "يُستخدم للبطاقات واللوحات والمحتوى المُجمَّع.",
			nestedTitle: "التفاصيل",
			nestedDescription: "مناسب للأقسام المتداخلة والتمييز الخفي.",
		},
	},
	he: {
		dir: "rtl",
		values: {
			cardTitle: "סקירת פרויקט",
			cardDescription: "לשימוש בכרטיסים, פנלים ותוכן מקובץ.",
			nestedTitle: "פרטים",
			nestedDescription: "מצוין לסקציות מקוננות ודגש עדין.",
		},
	},
};

export function SurfaceRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div className="grid w-full gap-3 md:grid-cols-2" lang={language} dir={dir}>
			<Surface className="rounded-3xl border p-6">
				<h4 className="font-medium">{t.cardTitle}</h4>
				<p className="mt-1 text-muted-foreground text-sm">
					{t.cardDescription}
				</p>
			</Surface>
			<Surface variant="secondary" className="rounded-3xl border p-6">
				<h4 className="font-medium">{t.nestedTitle}</h4>
				<p className="mt-1 text-muted-foreground text-sm">
					{t.nestedDescription}
				</p>
			</Surface>
		</div>
	);
}