Separator

import { Separator } from "@/components/ui/separator";

export function SeparatorDemo() {
	return (
		<div className="flex max-w-sm flex-col gap-4 text-sm">
			<div className="flex flex-col gap-1.5">
				<div className="font-medium leading-none">herocn</div>
				<div className="text-muted-foreground">
					HeroUI design system, shadcn/ui abstraction
				</div>
			</div>
			<Separator />
			<div>Beautifully designed components for your next application.</div>
		</div>
	);
}

import { Separator } from "@/components/ui/separator";

export function SeparatorVertical() {
	return (
		<div className="flex h-5 items-center gap-4 text-sm">
			<div>Blog</div>
			<Separator orientation="vertical" />
			<div>Docs</div>
			<Separator orientation="vertical" />
			<div>Source</div>
		</div>
	);
}

import { Separator } from "@/components/ui/separator";

export function SeparatorMenu() {
	return (
		<div className="flex items-center gap-2 text-sm md:gap-4">
			<div className="flex flex-col gap-1">
				<span className="font-medium">Settings</span>
				<span className="text-muted-foreground text-xs">
					Manage preferences
				</span>
			</div>
			<Separator orientation="vertical" />
			<div className="flex flex-col gap-1">
				<span className="font-medium">Account</span>
				<span className="text-muted-foreground text-xs">
					Profile & security
				</span>
			</div>
			<Separator orientation="vertical" className="hidden md:block" />
			<div className="hidden flex-col gap-1 md:flex">
				<span className="font-medium">Help</span>
				<span className="text-muted-foreground text-xs">Support & docs</span>
			</div>
		</div>
	);
}

import { Separator } from "@/components/ui/separator";

export function SeparatorList() {
	return (
		<div className="flex w-full max-w-sm flex-col gap-2 text-sm">
			<dl className="flex items-center justify-between">
				<dt>Item 1</dt>
				<dd className="text-muted-foreground">Value 1</dd>
			</dl>
			<Separator />
			<dl className="flex items-center justify-between">
				<dt>Item 2</dt>
				<dd className="text-muted-foreground">Value 2</dd>
			</dl>
			<Separator />
			<dl className="flex items-center justify-between">
				<dt>Item 3</dt>
				<dd className="text-muted-foreground">Value 3</dd>
			</dl>
		</div>
	);
}

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

export function SeparatorSurface() {
	return (
		<div className="grid w-full gap-3 md:grid-cols-2">
			<Surface variant="default" className="rounded-3xl p-6">
				<div className="flex flex-col gap-3">
					<div className="font-medium text-base">Default</div>
					<Separator />
					<div className="text-muted-foreground text-sm">
						Separator on the default surface background.
					</div>
				</div>
			</Surface>
			<Surface variant="secondary" className="rounded-3xl p-6">
				<div className="flex flex-col gap-3">
					<div className="font-medium text-base">Secondary</div>
					<Separator />
					<div className="text-muted-foreground text-sm">
						Separator on the secondary surface background.
					</div>
				</div>
			</Surface>
			<Surface variant="tertiary" className="rounded-3xl p-6">
				<div className="flex flex-col gap-3">
					<div className="font-medium text-base">Tertiary</div>
					<Separator />
					<div className="text-muted-foreground text-sm">
						Separator on the tertiary surface background.
					</div>
				</div>
			</Surface>
			<Surface variant="transparent" className="rounded-3xl p-6">
				<div className="flex flex-col gap-3">
					<div className="font-medium text-base">Transparent</div>
					<Separator />
					<div className="text-muted-foreground text-sm">
						Separator on a transparent surface (inherits parent).
					</div>
				</div>
			</Surface>
		</div>
	);
}

"use client";

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

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			title: "herocn",
			subtitle: "HeroUI design system, shadcn/ui abstraction",
			description: "Beautifully designed components for your next application.",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			title: "herocn",
			subtitle: "نظام تصميم HeroUI، تجريد shadcn/ui",
			description: "مكونات مصممة بشكل جميل لتطبيقك القادم.",
		},
	},
	he: {
		dir: "rtl",
		values: {
			title: "herocn",
			subtitle: "מערכת עיצוב HeroUI, הפשטה של shadcn/ui",
			description: "רכיבים מעוצבים בצורה יפה לאפליקציה הבאה שלך.",
		},
	},
};

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

	return (
		<div className="flex max-w-sm flex-col gap-4 text-sm" dir={dir}>
			<div className="flex flex-col gap-1.5">
				<div className="font-medium leading-none">{t.title}</div>
				<div className="text-muted-foreground">{t.subtitle}</div>
			</div>
			<Separator />
			<div>{t.description}</div>
		</div>
	);
}