Resizable

package resizable

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

// Basic mirrors shadcn's own resizable-demo-with-handle.tsx: a horizontal
// two-panel group (50%/50%) whose right panel nests a second, vertical
// group (25%/75%) — both the outer and the nested handle show the
// withHandle grip.
component Basic() {
	<ui.ResizablePanelGroup orientation="horizontal" class="max-w-md rounded-lg border md:min-w-[450px]">
		<ui.ResizablePanel defaultSize="50%">
			<div class="flex h-[200px] items-center justify-center p-6">
				<span class="font-semibold">One</span>
			</div>
		</ui.ResizablePanel>
		<ui.ResizableHandle orientation="horizontal" withHandle={true}/>
		<ui.ResizablePanel defaultSize="50%">
			<ui.ResizablePanelGroup orientation="vertical">
				<ui.ResizablePanel defaultSize="25%">
					<div class="flex h-full items-center justify-center p-6">
						<span class="font-semibold">Two</span>
					</div>
				</ui.ResizablePanel>
				<ui.ResizableHandle orientation="vertical" withHandle={true}/>
				<ui.ResizablePanel defaultSize="75%">
					<div class="flex h-full items-center justify-center p-6">
						<span class="font-semibold">Three</span>
					</div>
				</ui.ResizablePanel>
			</ui.ResizablePanelGroup>
		</ui.ResizablePanel>
	</ui.ResizablePanelGroup>
}

package resizable

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

// Vertical mirrors shadcn's own resizable-vertical.tsx: a single
// orientation="vertical" group (Header 25% / Content 75%), no withHandle
// grip.
component Vertical() {
	<ui.ResizablePanelGroup orientation="vertical" class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]">
		<ui.ResizablePanel defaultSize="25%">
			<div class="flex h-full items-center justify-center p-6">
				<span class="font-semibold">Header</span>
			</div>
		</ui.ResizablePanel>
		<ui.ResizableHandle orientation="vertical" withHandle={false}/>
		<ui.ResizablePanel defaultSize="75%">
			<div class="flex h-full items-center justify-center p-6">
				<span class="font-semibold">Content</span>
			</div>
		</ui.ResizablePanel>
	</ui.ResizablePanelGroup>
}

package resizable

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

// Handle mirrors shadcn's own resizable-handle.tsx: a single
// orientation="horizontal" group (Sidebar 25% / Content 75%) with the
// withHandle grip shown — the canonical "visible handle" demo.
component Handle() {
	<ui.ResizablePanelGroup orientation="horizontal" class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]">
		<ui.ResizablePanel defaultSize="25%">
			<div class="flex h-full items-center justify-center p-6">
				<span class="font-semibold">Sidebar</span>
			</div>
		</ui.ResizablePanel>
		<ui.ResizableHandle orientation="horizontal" withHandle={true}/>
		<ui.ResizablePanel defaultSize="75%">
			<div class="flex h-full items-center justify-center p-6">
				<span class="font-semibold">Content</span>
			</div>
		</ui.ResizablePanel>
	</ui.ResizablePanelGroup>
}

package resizable

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

// Rtl mirrors shadcn's own resizable-rtl demo: the same horizontal
// two-panel / nested-vertical-group shape as this dir's own Basic, labels
// translated to Arabic and wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.ResizablePanelGroup orientation="horizontal" class="max-w-sm rounded-lg border">
			<ui.ResizablePanel defaultSize="50%">
				<div class="flex h-[200px] items-center justify-center p-6">
					<span class="font-semibold">واحد</span>
				</div>
			</ui.ResizablePanel>
			<ui.ResizableHandle orientation="horizontal" withHandle={true}/>
			<ui.ResizablePanel defaultSize="50%">
				<ui.ResizablePanelGroup orientation="vertical">
					<ui.ResizablePanel defaultSize="25%">
						<div class="flex h-full items-center justify-center p-6">
							<span class="font-semibold">اثنان</span>
						</div>
					</ui.ResizablePanel>
					<ui.ResizableHandle orientation="vertical" withHandle={true}/>
					<ui.ResizablePanel defaultSize="75%">
						<div class="flex h-full items-center justify-center p-6">
							<span class="font-semibold">ثلاثة</span>
						</div>
					</ui.ResizablePanel>
				</ui.ResizablePanelGroup>
			</ui.ResizablePanel>
		</ui.ResizablePanelGroup>
	</div>
}