Separator

// Package separator holds the site's example gsx components for
// ui/separator.
package separator

import "github.com/gsxhq/gsxui/ui"

// Basic renders a horizontal Separator between two lines of text.
component Basic() {
	<div class="text-sm">
		<p>Above the line.</p>
		<ui.Separator class="my-4"/>
		<p>Below the line.</p>
	</div>
}

package separator

import "github.com/gsxhq/gsxui/ui"

// Orientation combines both orientations: a horizontal Separator under a
// heading block, then vertical Separators between an inline row of links.
component Orientation() {
	<div>
		<div class="space-y-1">
			<h4 class="text-sm font-medium">gsxui</h4>
			<p class="text-sm text-muted-foreground">Real gsx components, not JSX facsimiles.</p>
		</div>
		<ui.Separator class="my-4"/>
		<div class="flex h-5 items-center gap-4 text-sm">
			<div>Docs</div>
			<ui.Separator orientation="vertical"/>
			<div>Components</div>
			<ui.Separator orientation="vertical"/>
			<div>GitHub</div>
		</div>
	</div>
}

package separator

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors shadcn's own separator-rtl demo: a title/subtitle block, a
// Separator, then a description line, translated to Arabic and wrapped in
// dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar" class="flex max-w-sm flex-col gap-4 text-sm">
		<div class="flex flex-col gap-1.5">
			<div class="font-medium leading-none">shadcn/ui</div>
			<div class="text-muted-foreground">الأساس لنظام التصميم الخاص بك</div>
		</div>
		<ui.Separator/>
		<div>مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.</div>
	</div>
}