Dropdown

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

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

// Basic renders a menu with a label, separator, and plain items.
component Basic() {
	<ui.DropdownMenu>
		<ui.Button variant="outline" data-gsxui-dropdown-trigger>Options</ui.Button>
		<ui.DropdownMenuContent>
			<ui.DropdownMenuLabel>My Account</ui.DropdownMenuLabel>
			<ui.DropdownMenuSeparator/>
			<ui.DropdownMenuItem>Profile</ui.DropdownMenuItem>
			<ui.DropdownMenuItem>Billing</ui.DropdownMenuItem>
			<ui.DropdownMenuItem>Settings</ui.DropdownMenuItem>
		</ui.DropdownMenuContent>
	</ui.DropdownMenu>
}

package dropdown

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

// Destructive shows a destructive item alongside a disabled one — variant
// styles the row red; aria-disabled/data-disabled skip it in roving focus
// and the click handler (see ui/dropdown/dropdown.js).
component Destructive() {
	<ui.DropdownMenu>
		<ui.Button variant="outline" data-gsxui-dropdown-trigger>Manage</ui.Button>
		<ui.DropdownMenuContent>
			<ui.DropdownMenuItem>Rename</ui.DropdownMenuItem>
			<ui.DropdownMenuItem aria-disabled="true" data-disabled="true">Archive (unavailable)</ui.DropdownMenuItem>
			<ui.DropdownMenuSeparator/>
			<ui.DropdownMenuItem variant="destructive">Delete</ui.DropdownMenuItem>
		</ui.DropdownMenuContent>
	</ui.DropdownMenu>
}