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>	);}