Scroll-area

// Package scrollarea holds the site's example gsx components for
// ui/scroll-area. "scroll-area" can't be a directory/Go package name
// (hyphen), so the directory drops it — same selectbox/switchctl-style
// workaround as select/switch. The registered example key stays the
// hyphenated "scroll-area" (see scrollarea.go).
package scrollarea

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

// tags mirrors shadcn's own scroll-area-demo.tsx tag list shape
// (Array.from({length: 50}).map((_, i) => `v1.2.0-beta.${50 - i}`)),
// trimmed to 15 rows — enough to force real overflow in a h-72 box without
// padding the example out unnecessarily.
var tags = []string{
	"v1.2.0-beta.15", "v1.2.0-beta.14", "v1.2.0-beta.13", "v1.2.0-beta.12",
	"v1.2.0-beta.11", "v1.2.0-beta.10", "v1.2.0-beta.9", "v1.2.0-beta.8",
	"v1.2.0-beta.7", "v1.2.0-beta.6", "v1.2.0-beta.5", "v1.2.0-beta.4",
	"v1.2.0-beta.3", "v1.2.0-beta.2", "v1.2.0-beta.1",
}

// Basic mirrors shadcn's own scroll-area-demo.tsx: a h-72 w-48 bordered
// box, vertical (default orientation), a title row, then every tag row
// separated by a Separator — a good test of the CSS-first thumb showing up
// against a border-radius-clipped container (rounded-[inherit] on the
// collapsed div matters here, see ui/scroll-area.gsx's own doc comment).
component Basic() {
	<ui.ScrollArea class="h-72 w-48 rounded-md border">
		<div class="p-4">
			<h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
			{ for _, tag := range tags {
				<div>
					<div class="text-sm">{ tag }</div>
					<ui.Separator class="my-2"/>
				</div>
			} }
		</div>
	</ui.ScrollArea>
}

package scrollarea

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

// artist names shadcn's own scroll-area-horizontal-demo.tsx's `works` array
// keys off (artist, art) pairs; only the artist survives here since `art`
// is a remote Unsplash image URL and the site has no remote-image assets
// (see the styled-div placeholder below, same "no external images" call as
// site/examples/avatar/basic.gsx's own inlined SVG stand-in).
var artists = []string{
	"Ornella Binni", "Tom Byrom", "Vladimir Malyavko",
	"Fahrul Azmi", "Christian Holzinger", "Marcus Loke",
	"Sindre Fs", "Jeremy Bishop",
}

// Horizontal mirrors shadcn's own scroll-area-horizontal-demo.tsx: a w-96
// bordered box, whitespace-nowrap, a flex w-max row of fixed-width
// "artwork" cards — orientation="horizontal" (overflow-x-auto) proves the
// axis switch actually works, per the source map's own demo-inventory call
// ("horizontal requires the explicit opt-in every time under this ADAPT's
// collapsed-single-div design, so both must be demoed").
component Horizontal() {
	<ui.ScrollArea orientation="horizontal" class="w-96 rounded-md border whitespace-nowrap">
		<div class="flex w-max gap-4 p-4">
			{ for _, artist := range artists {
				<figure class="w-[150px] shrink-0">
					<div class="flex aspect-[3/4] items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
						Photo
					</div>
					<figcaption class="pt-2 text-xs text-muted-foreground">
						Photo by <span class="font-semibold text-foreground">{ artist }</span>
					</figcaption>
				</figure>
			} }
		</div>
	</ui.ScrollArea>
}

// Package scrollarea holds the site's example gsx components for
// ui/scroll-area. "scroll-area" can't be a directory/Go package name
// (hyphen), so the directory drops it — same selectbox/switchctl-style
// workaround as select/switch. The registered example key stays the
// hyphenated "scroll-area" (see scrollarea.go).
package scrollarea

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

// tagsRtl mirrors this dir's own basic.gsx tags list (shadcn's own
// scroll-area-demo.tsx tag shape), trimmed the same way.
var tagsRtl = []string{
	"v1.2.0-beta.15", "v1.2.0-beta.14", "v1.2.0-beta.13", "v1.2.0-beta.12",
	"v1.2.0-beta.11", "v1.2.0-beta.10", "v1.2.0-beta.9", "v1.2.0-beta.8",
	"v1.2.0-beta.7", "v1.2.0-beta.6", "v1.2.0-beta.5", "v1.2.0-beta.4",
	"v1.2.0-beta.3", "v1.2.0-beta.2", "v1.2.0-beta.1",
}

// Rtl mirrors shadcn's own scroll-area-rtl demo: the same bordered h-72
// w-48 box of tag rows as this dir's own Basic, title translated to
// Arabic and wrapped in dir="rtl".
component Rtl() {
	<ui.ScrollArea dir="rtl" lang="ar" class="h-72 w-48 rounded-md border">
		<div class="p-4">
			<h4 class="mb-4 text-sm leading-none font-medium">العلامات</h4>
			{ for _, tag := range tagsRtl {
				<div>
					<div class="text-sm">{ tag }</div>
					<ui.Separator class="my-2"/>
				</div>
			} }
		</div>
	</ui.ScrollArea>
}